-
-
-
@@ -226,20 +229,23 @@ export const DynamicallyChangeItemsInADropdownList = () => {
-
-
diff --git a/src/examples/filter-data-in-a-table.tsx b/src/examples/filter-data-in-a-table.tsx
index c1036e1e5..9169afe58 100644
--- a/src/examples/filter-data-in-a-table.tsx
+++ b/src/examples/filter-data-in-a-table.tsx
@@ -417,13 +417,14 @@ export const FilterDataInATable = () => {
Filter:
-
-
+ @for (typedChip of typedChips; track typedChip) {
+
+
+ }
Clear all
@@ -438,13 +439,15 @@ export const FilterDataInATable = () => {
-
-
-
- Lorem ipsum
- {{ u.key }}
-
+ @for (u of filteredData; track u) {
+
+
+
+ Lorem ipsum
+ {{ u.key }}
+
+ }
@@ -855,13 +858,14 @@ export const FilterDataInATable = () => {
Filter:
-
-
+ @for (typedChip of typedChips; track typedChip) {
+
+
+ }
Clear all
@@ -876,13 +880,15 @@ export const FilterDataInATable = () => {
-
-
-
- Lorem ipsum
- {{ u.key }}
-
+ @for (u of filteredData; track u) {
+
+
+
+ Lorem ipsum
+ {{ u.key }}
+
+ }
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..5b7e18747 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,5 +1,5 @@
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";
@@ -17,14 +17,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 +54,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/multiple-actions-in-a-table.tsx b/src/examples/multiple-actions-in-a-table.tsx
index 161deea0b..af910b133 100644
--- a/src/examples/multiple-actions-in-a-table.tsx
+++ b/src/examples/multiple-actions-in-a-table.tsx
@@ -860,8 +860,8 @@ export default function MultipleActionsinATable() {
- {pageUsers.map(user => (
-
+ @for (user of users; track $index) {
+
{{ user.text }}
{{ user.number }}
@@ -879,7 +879,7 @@ export default function MultipleActionsinATable() {
- ))}
+ }
@@ -1077,8 +1077,8 @@ export default function MultipleActionsinATable() {
- {pageUsers.map(user => (
-
+ @for (user of users; track $index) {
+
{{ user.text }}
{{ user.number }}
@@ -1096,7 +1096,7 @@ export default function MultipleActionsinATable() {
- ))}
+ }
diff --git a/src/examples/popover/TablePopover.tsx b/src/examples/popover/TablePopover.tsx
index b6d2ebcba..ffa0239bc 100644
--- a/src/examples/popover/TablePopover.tsx
+++ b/src/examples/popover/TablePopover.tsx
@@ -304,12 +304,15 @@ export const TablePopover = () => {
Action
-
- Lorem ipsum
- 1234567890
- Action
+
+ @for (u of popoverValues; track u) {
+
+ Lorem ipsum
+ 1234567890
+ Action
+ }
`}
diff --git a/src/examples/remove-a-filter.tsx b/src/examples/remove-a-filter.tsx
index 664bc5f5e..ae575cf78 100644
--- a/src/examples/remove-a-filter.tsx
+++ b/src/examples/remove-a-filter.tsx
@@ -36,12 +36,13 @@ export const RemoveAFilter = () => {
tags="angular"
allowCopy={true}
code={`
-
-
+ @for (chip of chips; track chip) {
+
+
+ }
`}
/>
)}
@@ -51,12 +52,13 @@ export const RemoveAFilter = () => {
tags="angular"
allowCopy={true}
code={`
-
-
+ @for (chip of chips; track chip) {
+
+
+ }
`}
/>
)}
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/examples/set-a-specific-tab-to-be-active.tsx b/src/examples/set-a-specific-tab-to-be-active.tsx
index 3f005b8d3..0313d1c87 100644
--- a/src/examples/set-a-specific-tab-to-be-active.tsx
+++ b/src/examples/set-a-specific-tab-to-be-active.tsx
@@ -126,26 +126,30 @@ export const SetASpecificTabToBeActive = () => {
-
-
-
- Lorem ipsum
- 1234567890
-
- Action
-
-
-
-
-
- Lorem Ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+
+ Action
+
+
+ }
+ @for (i of [0,1]; track i) {
+
+
+
+ Lorem Ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -161,16 +165,18 @@ export const SetASpecificTabToBeActive = () => {
-
-
-
- Lorem ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -186,16 +192,18 @@ export const SetASpecificTabToBeActive = () => {
-
-
-
- Lorem Ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1]; track i) {
+
+
+
+ Lorem Ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -220,26 +228,30 @@ export const SetASpecificTabToBeActive = () => {
-
-
-
- Lorem ipsum
- 1234567890
-
- Action
-
-
-
-
-
- Lorem Ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+
+ Action
+
+
+ }
+ @for (i of [0,1]; track i) {
+
+
+
+ Lorem Ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -255,16 +267,18 @@ export const SetASpecificTabToBeActive = () => {
-
-
-
- Lorem ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -280,16 +294,18 @@ export const SetASpecificTabToBeActive = () => {
-
-
-
- Lorem Ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1]; track i) {
+
+
+
+ Lorem Ipsum
+ 1234567890
+
+ Action
+
+
+ }
diff --git a/src/examples/show-different-views-of-data-in-a-table.tsx b/src/examples/show-different-views-of-data-in-a-table.tsx
index 446867320..964615f82 100644
--- a/src/examples/show-different-views-of-data-in-a-table.tsx
+++ b/src/examples/show-different-views-of-data-in-a-table.tsx
@@ -126,26 +126,30 @@ export const ShowDifferentViewsOfDataInATable = () => {
-
-
-
- Lorem ipsum
- 1234567890
-
- Action
-
-
-
-
-
- Lorem Ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+
+ Action
+
+
+ }
+ @for (i of [0,1]; track i) {
+
+
+
+ Lorem Ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -161,16 +165,18 @@ export const ShowDifferentViewsOfDataInATable = () => {
-
-
-
- Lorem ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -186,16 +192,18 @@ export const ShowDifferentViewsOfDataInATable = () => {
-
-
-
- Lorem Ipsum
- 1234567890
-
- Action
-
-
+ @for (i of [0,1]; track i) {
+
+
+
+ Lorem Ipsum
+ 1234567890
+
+ Action
+
+
+ }
@@ -219,18 +227,22 @@ export const ShowDifferentViewsOfDataInATable = () => {
-
- Lorem ipsum
- 1234567890
- Action
-
- Lorem Ipsum
- 1234567890
- Action
+ @for (i of [0,1,2,3]; track i) {
+
+ Lorem ipsum
+ 1234567890
+ Action
+ }
+ @for (i of [0,1]; track i) {
+
+ Lorem Ipsum
+ 1234567890
+ Action
+ }
@@ -246,14 +258,16 @@ export const ShowDifferentViewsOfDataInATable = () => {
-
-
-
- Lorem ipsum
- 1234567890
- Action
+ @for (i of [0,1,2,3]; track i) {
+
+
+
+ Lorem ipsum
+ 1234567890
+ Action
+ }
@@ -269,12 +283,14 @@ export const ShowDifferentViewsOfDataInATable = () => {
-
- Lorem Ipsum
- 1234567890
- Action
+ @for (i of [0,1]; track i) {
+
+ Lorem Ipsum
+ 1234567890
+ Action
+ }
diff --git a/src/examples/show-number-of-results-per-page.tsx b/src/examples/show-number-of-results-per-page.tsx
index 6764a0140..3e198c6f0 100644
--- a/src/examples/show-number-of-results-per-page.tsx
+++ b/src/examples/show-number-of-results-per-page.tsx
@@ -422,11 +422,13 @@ export default function ShowResultsPerPageExample() {
-
- {{ user.firstName }}
- {{ user.lastName }}
- {{ user.age }}
-
+ @for (user of pageUsers; track $index) {
+
+ {{ user.firstName }}
+ {{ user.lastName }}
+ {{ user.age }}
+
+ }
@@ -484,11 +486,13 @@ export default function ShowResultsPerPageExample() {
-
- {{ user.firstName }}
- {{ user.lastName }}
- {{ user.age }}
-
+ @for (user of pageUsers; track $index) {
+
+ {{ user.firstName }}
+ {{ user.lastName }}
+ {{ user.age }}
+
+ }
diff --git a/src/examples/show-status-in-a-table.tsx b/src/examples/show-status-in-a-table.tsx
index 7b6f56499..d47d01491 100644
--- a/src/examples/show-status-in-a-table.tsx
+++ b/src/examples/show-status-in-a-table.tsx
@@ -134,7 +134,8 @@ export const ShowStatusInATable = () => {
-
+ @for (badge of badgeValues; track badge) {
+
@@ -143,7 +144,8 @@ export const ShowStatusInATable = () => {
Assign
-
+
+ }
`}
@@ -164,16 +166,18 @@ export const ShowStatusInATable = () => {
-
-
-
- Lorem ipsum dolor sit amet consectetur.
- 1234567890
-
- Assign
-
-
+ @for (badge of badgeValues; track badge) {
+
+
+
+ Lorem ipsum dolor sit amet consectetur.
+ 1234567890
+
+ Assign
+
+
+ }
`}
diff --git a/src/examples/sort-data-in-a-table.tsx b/src/examples/sort-data-in-a-table.tsx
index ad7fe3480..e49cb4ab5 100644
--- a/src/examples/sort-data-in-a-table.tsx
+++ b/src/examples/sort-data-in-a-table.tsx
@@ -315,11 +315,13 @@ export class TableComponent() {
-
- {{ user.firstName }}
- {{ user.lastName }}
- {{ user.age }}
-
+ @for (user of users; track $index) {
+
+ {{ user.firstName }}
+ {{ user.lastName }}
+ {{ user.age }}
+
+ }
`}
@@ -392,11 +394,13 @@ export class TableComponent() {
-
- {{ user.firstName }}
- {{ user.lastName }}
- {{ user.age }}
-
+ @for (user of users; track $index) {
+
+ {{ user.firstName }}
+ {{ user.lastName }}
+ {{ user.age }}
+
+ }
`}
diff --git a/src/examples/type-to-create-a-new-filter.tsx b/src/examples/type-to-create-a-new-filter.tsx
index 520de6dd0..1a5a1b699 100644
--- a/src/examples/type-to-create-a-new-filter.tsx
+++ b/src/examples/type-to-create-a-new-filter.tsx
@@ -112,14 +112,15 @@ export class FilterChipComponent {
-
-
+ @for (typedChip of typedChips; track typedChip) {
+
+
+ }
`}
/>
@@ -180,14 +181,15 @@ export class FilterChipComponent {
-
-
+ @for (typedChip of typedChips; track typedChip) {
+
+
+ }
`}
/>
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
+
-
-
diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx
index 668f5a96a..e7fa0f57d 100644
--- a/src/routes/components/DatePicker.tsx
+++ b/src/routes/components/DatePicker.tsx
@@ -19,30 +19,34 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { ComponentContent } from "@components/component-content/ComponentContent";
import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts";
+import {
+ LegacyMarginProperty,
+ MarginProperty,
+} from "@components/component-properties/common-properties.ts";
import { DatePickerExamples } from "@examples/date-picker/DatePickerExamples.tsx";
import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
// == Page props ==
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=33054-33175";
+const FIGMA_LINK =
+ "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=33054-33175";
const componentName = "Date picker";
const category = Category.INPUTS_AND_ACTIONS;
const relatedComponents = [
{ link: "/content/date-format", name: "Date format" },
- { link: "/components/form-item", name: "Form item" }
+ { link: "/components/form-item", name: "Form item" },
];
const description =
"Lets users select a date through a calendar without the need to manually type it in a field.";
type ComponentPropsType = GoabDatePickerProps;
type CastingType = {
[key: string]: unknown;
- onChange: (event: GoabDatePickerOnChangeDetail)=> void;
+ onChange: (event: GoabDatePickerOnChangeDetail) => void;
};
export default function DatePickerPage() {
- const {version} = useContext(LanguageVersionContext);
+ const { version } = useContext(LanguageVersionContext);
const [componentProps, setComponentProps] = useState({
onChange: () => {},
});
@@ -70,6 +74,12 @@ export default function DatePickerPage() {
name: "disabled",
value: false,
},
+ {
+ label: "Width",
+ type: "string",
+ name: "width",
+ value: "",
+ },
]);
useEffect(() => {
@@ -86,7 +96,7 @@ export default function DatePickerPage() {
options: ["", "calendar", "input"],
value: "",
defaultValue: "calendar",
- }
+ },
];
}
} else {
@@ -174,6 +184,13 @@ export default function DatePickerPage() {
defaultValue: "5 years forward",
description: "Maximum date value allowed. Only used for calendar type.",
},
+ {
+ name: "width",
+ type: "string | undefined",
+ defaultValue: "16ch",
+ description:
+ "Set the width of the date text field. Supports all valid CSS units, including %, px, em, rem, and ch.",
+ },
{
name: "error",
type: "boolean",
@@ -197,7 +214,7 @@ export default function DatePickerPage() {
name: "onChange",
type: "(event: GoabDatePickerOnChangeDetail) => void",
description: "Function to call when the date changes.",
- }
+ },
];
function onSandboxChange(bindings: ComponentBinding[], props: Record) {
@@ -219,23 +236,24 @@ export default function DatePickerPage() {
/>
-
- Playground
+
+ Playground
+
-
{/*Angular*/}
- {version === "old" &&
-
-
{version === "new" && (
+ <>
Examples
)}
@@ -363,8 +399,7 @@ export default function DatePickerPage() {
Examples
-
+ @for (upload of uploads; track $index) {
+
+
+ }
`}
/>}
@@ -468,16 +469,17 @@ export default function FileUploaderPage() {
code={`
-
+ @for (upload of uploads; track $index) {
+
+
+ }
`}
/>}
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"
},
diff --git a/src/routes/components/Pagination.tsx b/src/routes/components/Pagination.tsx
index 89e4ca71c..04dc7227c 100644
--- a/src/routes/components/Pagination.tsx
+++ b/src/routes/components/Pagination.tsx
@@ -448,11 +448,13 @@ export default function PaginationPage() {
-
- {{ user.firstName }}
- {{ user.lastName }}
- {{ user.age }}
-
+ @for (user of pageUsers; track $index) {
+
+ {{ user.firstName }}
+ {{ user.lastName }}
+ {{ user.age }}
+
+ }
-
- {{ user.firstName }}
- {{ user.lastName }}
- {{ user.age }}
-
+ @for (user of pageUsers; track $index) {
+
+ {{ user.firstName }}
+ {{ user.lastName }}
+ {{ user.age }}
+
+ }
-
+
+
+ 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.
+
+
+
+
+
+
+
+ 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
+
+
+
+
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 combining 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() {
- handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!expectedError } />
+ handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!expectedError } />
- handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!actualError } />
+ handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!actualError } />
- handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } />
+ handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } />
- handleChange(event.name, event.value) } rows={ 6 } width="90%" />
+ handleChange(event.name, event.value) } rows={ 6 } width="90%" />
Submit bug report
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
+
Talk to us
Slack
- #design-system-support
+
+ #design-system-support
+
- #figma
-
+ #figma
+
+
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
+
Design system team
-
Product Owner
+
+ Product owner
+
Mark Elamatha | mark.elamatha@gov.ab.ca
-
Digital architect and Lead developer
+
+ Digital architect and Lead developer
+
Chris Olsen | chris.olsen@gov.ab.ca
-
Scrum master and DevOps
+
+ Scrum master and DevOps
+
Dustin Nielsen | dustin.nielsen@gov.ab.ca
-
Developers
+
+ Developers
+
Vanessa Tran | vanessa.m.tran@gov.ab.ca
syed.zeeshan@gov.ab.ca
+ Eric Hoff | eric.hoff@gov.ab.ca
-
Designer
+
+ Designer and Developer
+
Thomas Jeffery | thomas.jeffery@gov.ab.ca
+ benji.franck@gov.ab.ca