+ }
Date: Wed, 5 Nov 2025 17:42:20 -0500
Subject: [PATCH 02/14] fix(#3119): docs notification banner type property
---
src/routes/components/Notificationbanner.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/routes/components/Notificationbanner.tsx b/src/routes/components/Notificationbanner.tsx
index 5925c0171..d0cbf0f42 100644
--- a/src/routes/components/Notificationbanner.tsx
+++ b/src/routes/components/Notificationbanner.tsx
@@ -63,7 +63,7 @@ export default function NotificationBannerPage() {
const oldComponentProperties: ComponentProperty[] = [
{
name: "type",
- type: "success | important | information | emergency",
+ type: "important | information | event | emergency",
description: "Define the context and colour of the badge",
},
{
@@ -108,7 +108,7 @@ export default function NotificationBannerPage() {
const componentProperties: ComponentProperty[] = [
{
name: "type",
- type: "GoabNotificationType(success | important | information | emergency)",
+ type: "GoabNotificationType(important | information | event | emergency)",
description: "Define the context and colour of the badge",
defaultValue: "information"
},
From aa918ac22a7a934e6d9c97e766bef60e8de4d022 Mon Sep 17 00:00:00 2001
From: Eric Hoff
Date: Mon, 10 Nov 2025 16:39:09 -0700
Subject: [PATCH 03/14] fix: remove, add, and update team members and role
names
---
src/routes/get-started/Support.tsx | 70 ++++++++++++++++++++----------
1 file changed, 48 insertions(+), 22 deletions(-)
diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx
index 8e804de24..07a250d71 100644
--- a/src/routes/get-started/Support.tsx
+++ b/src/routes/get-started/Support.tsx
@@ -3,7 +3,8 @@ import {
GoabFormItem,
GoabRadioGroup,
GoabRadioItem,
- GoabSpacer, GoabText
+ GoabSpacer,
+ GoabText,
} from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
import { useState } from "react";
@@ -13,7 +14,7 @@ import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common";
export default function SupportPage() {
let navigate = useNavigate();
- const [issueSelection, setIssueSelection] = useState("")
+ const [issueSelection, setIssueSelection] = useState("");
function bugOrFeature(value: string) {
setIssueSelection(value);
@@ -33,69 +34,94 @@ export default function SupportPage() {
Get support
- Get help from our team with using the design system, including components, guidelines, best practices, and accessibility.
+ Get help from our team with using the design system, including components, guidelines, best
+ practices, and accessibility.
-
- Raise an issue
-
+
Raise an issue
- Let us know if you find a problem in the design system or if you need a new component or pattern.
+ Let us know if you find a problem in the design system or if you need a new component or
+ pattern.
- bugOrFeature(event.value)}>
+ bugOrFeature(event.value)}>
- Raise an issue
+
+ Raise an issue
+
- #figma
-
- A place for any Figma discussion. Share tips, tricks, techniques, ask questions, report issues.
+
+ #figma
+
+ A place for any Figma discussion. Share tips, tricks, techniques, ask questions,
+ report issues.
Drop in Hours
(Tuesday and Friday 1:00 - 3:00pm MST)
- For service teams to get feedback on their usage of the design system, propose new components or changes
- to existing components, ask any questions, and give feedback to the design system.
+ For service teams to get feedback on their usage of the design system, propose new
+ components or changes to existing components, ask any questions, and give feedback to the
+ design system.
- Book a time
+
+ Book a time
+
From 6ad0ed799ac32a4debb95ac04d5d79910f04ebdc Mon Sep 17 00:00:00 2001
From: syedszeeshan <47701214+syedszeeshan@users.noreply.github.com>
Date: Tue, 4 Nov 2025 15:40:26 -0500
Subject: [PATCH 04/14] fix(#3123): docs updat for badge icon type prop
---
src/routes/components/Badge.tsx | 32 ++++++++++++++++++++++++--------
1 file changed, 24 insertions(+), 8 deletions(-)
diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx
index 26f3ebf7b..c333ec495 100644
--- a/src/routes/components/Badge.tsx
+++ b/src/routes/components/Badge.tsx
@@ -11,10 +11,12 @@ import BadgeExamples from "@examples/badge/BadgeExamples.tsx";
import { GoabBadgeType } from "@abgov/ui-components-common";
import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
+import ICONS from "@routes/components/icons.json";
// == Page props ==
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=458-16984";
+const FIGMA_LINK =
+ "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=458-16984";
const componentName = "Badge";
const description =
"Small labels which hold small amounts of information, system feedback, or states.";
@@ -90,6 +92,13 @@ export default function BadgePage() {
name: "icon",
value: false,
},
+ {
+ label: "Icon type",
+ type: "combobox",
+ name: "iconType",
+ options: [""].concat(ICONS),
+ value: "",
+ },
{
label: "Content",
type: "string",
@@ -166,6 +175,12 @@ export default function BadgePage() {
description: "Includes an icon in the badge.",
defaultValue: "false",
},
+ {
+ name: "iconType",
+ type: "GoabIconType",
+ description:
+ "Specifies which icon to display when icon is enabled. See the Icons component for available options.",
+ },
{
name: "content",
type: "string",
@@ -202,17 +217,20 @@ export default function BadgePage() {
relatedComponents={relatedComponents}
figmaLink={FIGMA_LINK}
githubLink="Badge"
-
/>
-
Playground
+
+ Playground
+
-
-
+
- }
- >
+ }>
@@ -233,7 +250,6 @@ export default function BadgePage() {
-
From ed9337574e80e73099ef860e5672bdbb14973ee4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 15 Nov 2025 16:56:48 +0000
Subject: [PATCH 05/14] chore(deps-dev): bump js-yaml from 4.1.0 to 4.1.1
Bumps [js-yaml](https://github.com/nodeca/js-yaml) from 4.1.0 to 4.1.1.
- [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nodeca/js-yaml/compare/4.1.0...4.1.1)
---
updated-dependencies:
- dependency-name: js-yaml
dependency-version: 4.1.1
dependency-type: indirect
...
Signed-off-by: dependabot[bot]
---
package-lock.json | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9ad951bc5..618d62cc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2481,10 +2481,11 @@
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"node_modules/js-yaml": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
- "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+ "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"argparse": "^2.0.1"
},
From 86c5104c5b8509a25e1ce7523f6a50758a1d280c Mon Sep 17 00:00:00 2001
From: Dustin Nielsen
Date: Fri, 21 Nov 2025 12:57:38 -0700
Subject: [PATCH 06/14] fix(#3146): Updated View content link on home page
---
src/routes/home.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/routes/home.tsx b/src/routes/home.tsx
index ad45ba89b..af6fb70f5 100644
--- a/src/routes/home.tsx
+++ b/src/routes/home.tsx
@@ -54,7 +54,7 @@ const HomePage = () => {
Date: Fri, 21 Nov 2025 15:42:46 -0700
Subject: [PATCH 07/14] feat(#2967): Added Automated accessibility
documentation
---
src/App.tsx | 4 +
.../get-started/AutomatedAccessibility.tsx | 80 +++++++++++++++++++
src/routes/get-started/GetStartedLayout.tsx | 1 +
3 files changed, 85 insertions(+)
create mode 100644 src/routes/get-started/AutomatedAccessibility.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 9c6cb9b45..fe6472c20 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,6 +40,7 @@ import BugVerificationPage from "@routes/get-started/developers/BugVerification"
import GetStartedLayout from "@routes/get-started/GetStartedLayout";
import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview";
import QATestingOverviewPage from "@routes/get-started/qa-testing/QATestingOverview";
+import AutomatedAccessibilityPage from "@routes/get-started/AutomatedAccessibility";
import ComponentLifecyclePage from "@routes/get-started/ComponentLifecycle";
import ContributePage from "@routes/get-started/Contribute";
import SupportPage from "@routes/get-started/Support";
@@ -115,6 +116,9 @@ const router = createBrowserRouter(
} />
+
+ } />
+ } />
} />
diff --git a/src/routes/get-started/AutomatedAccessibility.tsx b/src/routes/get-started/AutomatedAccessibility.tsx
new file mode 100644
index 000000000..16f0b7442
--- /dev/null
+++ b/src/routes/get-started/AutomatedAccessibility.tsx
@@ -0,0 +1,80 @@
+import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabText } from "@abgov/react-components";
+import { Link } from "react-router-dom";
+
+export default function AutomatedAccessibilityPage() {
+ return (
+
+
+
+ Automated accessibility
+
+
+ Automated accessibility testing tools are a valuable first step in identifying potential accessibility issues.
+ However, these tools are not a complete solution. They often produce false positives (flagging issues that aren’t
+ actually problems) and false negatives (failing to detect real barriers). To ensure your digital products are
+ truly accessible, combine automated and manual testing and apply human judgment.
+
+
+
+
+
Why automated tools alone are not enough
+
+
+ False positives - Automated tools may flag elements as non-compliant even when they
+ function correctly for users. For example: Tools might flag an input as “missing an id” when it
+ is correctly associated with its label using other valid techniques, such as a label element
+ that wraps the input directly.
+
+
+ False negatives - Automated tools cannot detect nuanced or context-specific issues.
+ For instance: They cannot assess whether a screen reader user can effectively navigate a complex
+ form.
+
+
+ Real user experience - Accessibility is about ensuring real people can use a product
+ effectively. Automated tools cannot fully simulate how users interact with your product.
+
+
+
+
Steps for effective accessibility testing
+
+
+
Run automated tools to get an initial assessment
+
+ Manually verify flagged issues:
+
+
Use a screen reader, like VoiceOver (MacOS) and/or NVDA (Windows), to test the flagged issue
+
Consider the intent and context of the flagged element
+
+
+
+ Perform manual testing to catch issues that tools cannot detect
+
+
Keyboard navigation
+
Logical focus order
+
Usability with assistive technology
+
+
+
+ Report findings. Any findings related to design system components should be reported to the
+ design system using the bug report form.
+
+
+
+
+
Why this process matters
+
+ Automated tools provide helpful insights, but relying solely on them can lead to:
+
+
Wasted time addressing non-issues
+
Missed opportunities to fix genuine barriers
+
A false sense of compliance without real usability improvements
+
+ By combing automation with thoughtful manual testing, teams can focus on real issues impacting
+ users, improving the accessibility and quality of their digital products.
+
+
+
+ );
+}
diff --git a/src/routes/get-started/GetStartedLayout.tsx b/src/routes/get-started/GetStartedLayout.tsx
index 011845cf0..7fa01f3aa 100644
--- a/src/routes/get-started/GetStartedLayout.tsx
+++ b/src/routes/get-started/GetStartedLayout.tsx
@@ -23,6 +23,7 @@ export default function GetStartedLayout() {
Version update guide
QA testing
+ Automated accessibility
Component lifecycle
Contribute
Roadmap
From 889c3da8c625d12cc567ea1f0b4b1c109c768b5f Mon Sep 17 00:00:00 2001
From: Dustin Nielsen
Date: Mon, 24 Nov 2025 16:27:13 -0700
Subject: [PATCH 08/14] fix(#2579,#3202): Updated GoabTextarea and switch
checkbox and radio example
---
src/examples/add-another-item-in-a-modal.tsx | 6 +-
...wer-question-with-a-maximum-word-count.tsx | 4 +-
...t-before-asking-a-long-answer-question.tsx | 4 +-
...a-link-in-the-helper-text-of-an-option.tsx | 108 ++++++++--------
...criptions-for-items-in-a-checkbox-list.tsx | 119 +++++++++---------
src/examples/review-and-action.tsx | 4 +-
src/routes/components/TextArea.tsx | 4 +-
src/routes/get-started/ReportBug.tsx | 10 +-
8 files changed, 136 insertions(+), 123 deletions(-)
diff --git a/src/examples/add-another-item-in-a-modal.tsx b/src/examples/add-another-item-in-a-modal.tsx
index 60d5874e3..335443853 100644
--- a/src/examples/add-another-item-in-a-modal.tsx
+++ b/src/examples/add-another-item-in-a-modal.tsx
@@ -4,7 +4,7 @@ import {
GoabContainer,
GoabDropdown, GoabDropdownItem,
GoabFormItem, GoabInput,
- GoabModal, GoabTextarea
+ GoabModal, GoabTextArea
} from "@abgov/react-components";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext, useState } from "react";
@@ -66,12 +66,12 @@ export const AddAnotherItemInAModal = () => {
name="name">
-
+ value={description}>
diff --git a/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx b/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx
index cbf4e2b52..1e2cbc331 100644
--- a/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx
+++ b/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx
@@ -1,7 +1,7 @@
import { Sandbox } from "@components/sandbox";
import {
GoabFormItem,
- GoabTextarea
+ GoabTextArea
} from "@abgov/react-components";
export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
@@ -13,7 +13,7 @@ export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
-
+
diff --git a/src/examples/give-context-before-asking-a-long-answer-question.tsx b/src/examples/give-context-before-asking-a-long-answer-question.tsx
index e3de88d02..3e0fd8a2a 100644
--- a/src/examples/give-context-before-asking-a-long-answer-question.tsx
+++ b/src/examples/give-context-before-asking-a-long-answer-question.tsx
@@ -4,7 +4,7 @@ import {
GoabButtonGroup,
GoabDetails,
GoabFormItem,
- GoabTextarea
+ GoabTextArea
} from "@abgov/react-components";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext } from "react";
@@ -44,7 +44,7 @@ export const GiveContextBeforeAskingALongAnswerQuestion = () => {
-
+
diff --git a/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx b/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx
index 18714d585..df2fce271 100644
--- a/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx
+++ b/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx
@@ -1,11 +1,13 @@
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { GoabCheckbox, GoabFormItem } from "@abgov/react-components";
+import { GoabRadioGroup, GoabRadioItem, GoabFormItem } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
export const IncludeALinkInTheHelperTextOfAnOption = () => {
const {version} = useContext(LanguageVersionContext);
+ const noop = () => {
+ };
return (
<>
@@ -17,14 +19,16 @@ export const IncludeALinkInTheHelperTextOfAnOption = () => {
tags="angular"
allowCopy={true}
code={`
-
-
- Help text with a link.
-
-
-
-
- `}
+
+
+
+ Help text with a link.
+
+
+
+
+
+ `}
/>}
{version === "new" && {
tags="angular"
allowCopy={true}
code={`
-
-
-
- Help text with a link.
-
-
-
-
-
- `}
+
+
+
+
+ Help text with a link.
+
+
+
+
+
+
+ `}
/>}
{/*React*/}
@@ -50,17 +56,18 @@ export const IncludeALinkInTheHelperTextOfAnOption = () => {
tags="react"
allowCopy={true}
code={`
-
- Help text with a link.}
- />
-
-
-
- `}
+
+
+ Help text with a link.}
+ />
+
+
+
+
+ `}
/>}
{version === "new" && {
tags="react"
allowCopy={true}
code={`
-
- Help text with a link.}
- />
-
-
-
- `}
+
+
+ Help text with a link.}
+ />
+
+
+
+
+ `}
/>}
- Help text with a link.}
- />
-
-
+
+ Help text with a link.}
+ />
+
+
+
diff --git a/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx b/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx
index 98aa9c562..c3605278c 100644
--- a/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx
+++ b/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx
@@ -1,4 +1,4 @@
-import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { GoabFormItem, GoabCheckbox } from "@abgov/react-components";
import { Sandbox } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext } from "react";
@@ -19,14 +19,12 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
-
-
- Use the account associated with the business
-
-
- If you don't have a Alberta.ca login, you can create one
-
-
+
+ Use the account associated with the business
+
+ If you don't have a Alberta.ca login, you can create one
+
`}
/>
@@ -42,7 +40,8 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
public constructor(private fb: FormBuilder) {
this.form = this.fb.group({
- selectOne: ["1"]
+ checkboxOne: [""],
+ checkboxTwo: [""]
});
}
}
@@ -57,18 +56,16 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
-
-
-
- Use the account associated with the business
-
-
-
-
- If you don't have a Alberta.ca login, you can create one
-
-
-
+
+
+ Use the account associated with the business
+
+
+
+
+ If you don't have a Alberta.ca login, you can create one
+
+
`}
/>
@@ -82,18 +79,20 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
-
-
-
-
+
+
`}
/>
@@ -106,36 +105,40 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
-
-
-
-
+
+
`}
/>
)}
-
-
-
-
+
+
)
diff --git a/src/examples/review-and-action.tsx b/src/examples/review-and-action.tsx
index 79d5b8f9d..e43cb057d 100644
--- a/src/examples/review-and-action.tsx
+++ b/src/examples/review-and-action.tsx
@@ -6,7 +6,7 @@ import {
GoabContainer, GoabDropdown, GoabDropdownItem,
GoabFormItem,
GoabGrid,
- GoabRadioGroup, GoabRadioItem, GoabTextarea
+ GoabRadioGroup, GoabRadioItem, GoabTextArea
} from "@abgov/react-components";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
@@ -170,7 +170,7 @@ export const ReviewAndAction = () => {
- {}} />
+ {}} />
{}}>
diff --git a/src/routes/components/TextArea.tsx b/src/routes/components/TextArea.tsx
index 3d18a5eb2..b1aa0e960 100644
--- a/src/routes/components/TextArea.tsx
+++ b/src/routes/components/TextArea.tsx
@@ -5,7 +5,7 @@ import {
ComponentProperty,
} from "@components/component-properties/ComponentProperties.tsx";
import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import { GoabBadge, GoabFormItem, GoabTab, GoabTabs, GoabTextarea } from "@abgov/react-components";
+import { GoabBadge, GoabFormItem, GoabTab, GoabTabs, GoabTextArea } from "@abgov/react-components";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
import { ComponentContent } from "@components/component-content/ComponentContent";
@@ -517,7 +517,7 @@ export default function TextAreaPage() {
)}