From d0ede4714b80143a3aa862c70cc065ec4c3a853e Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Tue, 27 Sep 2022 10:20:23 +0100 Subject: [PATCH 01/13] Add Listbox a11y keyboard shortcuts documentation --- src/routes/(inner)/components/listboxes/+page.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/routes/(inner)/components/listboxes/+page.svelte b/src/routes/(inner)/components/listboxes/+page.svelte index ffae10b6c9..a72169f73a 100644 --- a/src/routes/(inner)/components/listboxes/+page.svelte +++ b/src/routes/(inner)/components/listboxes/+page.svelte @@ -45,6 +45,14 @@ headings: ['Prop', 'Type', 'Default', 'Description'], source: [['id', 'string', '-', 'Define a unique and semantic identifier for the item.']] }; + const tableA11yKeyboardList: any = { + headings: ['Keyboard Shortcut', 'Description'], + source: [ + ['Tab', 'Moves focus to the next option.'], + ['Shift + Tab ', 'Moves focus to the previous option.'], + ['Space or Enter', 'Changes the selection state of the focused option.'] + ] + };
@@ -150,5 +158,7 @@

Listbox Item

+

Keyboard shortcuts

+
From 6c1c0cf53d9798e55599565b2d28aad61f76a7e7 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Tue, 27 Sep 2022 22:24:08 +0100 Subject: [PATCH 02/13] Keyboard shortcuts rephrasing and better vars naming --- src/routes/(inner)/components/listboxes/+page.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/(inner)/components/listboxes/+page.svelte b/src/routes/(inner)/components/listboxes/+page.svelte index a72169f73a..226c2160bf 100644 --- a/src/routes/(inner)/components/listboxes/+page.svelte +++ b/src/routes/(inner)/components/listboxes/+page.svelte @@ -45,8 +45,8 @@ headings: ['Prop', 'Type', 'Default', 'Description'], source: [['id', 'string', '-', 'Define a unique and semantic identifier for the item.']] }; - const tableA11yKeyboardList: any = { - headings: ['Keyboard Shortcut', 'Description'], + const tableKeys: any = { + headings: ['Keys', 'Description'], source: [ ['Tab', 'Moves focus to the next option.'], ['Shift + Tab ', 'Moves focus to the previous option.'], @@ -158,7 +158,7 @@

Listbox Item

-

Keyboard shortcuts

- +

Keyboard Interactions

+ From fa23456f27d87ffaa95390e695058372300366d3 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Tue, 27 Sep 2022 22:34:27 +0100 Subject: [PATCH 03/13] Add Accordion a11y keyboard shortcuts documentation --- src/routes/(inner)/components/accordions/+page.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/routes/(inner)/components/accordions/+page.svelte b/src/routes/(inner)/components/accordions/+page.svelte index 00c1fc7d0e..131c3935dc 100644 --- a/src/routes/(inner)/components/accordions/+page.svelte +++ b/src/routes/(inner)/components/accordions/+page.svelte @@ -36,6 +36,14 @@ ['contentId', 'Provide semantic ID for ARIA content element.'] ] }; + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [ + ['Tab', 'Moves focus to the next focusable element.
All focusable elements in the accordion are included in the page Tab sequence.'], + ['Shift + Tab ', 'Moves focus to the previous focusable element.
All focusable elements in the accordion are included in the page Tab sequence.'], + ['Space or Enter', 'When focus is on the accordion header of a collapsed section, expands the section.'] + ] + };
@@ -160,5 +168,7 @@ ARIA Guidelines
+

Keyboard Interactions

+ From f5bde46caa2ef157c1c38a11f6671f6f83cdd043 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Tue, 27 Sep 2022 22:55:14 +0100 Subject: [PATCH 04/13] Add Accordion a11y keyboard shortcuts documentation --- .../(inner)/components/data-tables/+page.svelte | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/routes/(inner)/components/data-tables/+page.svelte b/src/routes/(inner)/components/data-tables/+page.svelte index 86d8b1937f..6ec37e6ae9 100644 --- a/src/routes/(inner)/components/data-tables/+page.svelte +++ b/src/routes/(inner)/components/data-tables/+page.svelte @@ -115,6 +115,17 @@ ['describedby', '-', `Provide the ID of the element that describes the table.`] ] }; + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [ + ['Right Arrow', 'Moves focus one cell to the right. If focus is on the right-most cell in the row, focus does not move.'], + ['Left Arrow', 'Moves focus one cell to the left. If focus is on the left-most cell in the row, focus does not move.'], + ['Down Arrow', 'Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.'], + ['Up Arrow', 'Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.'], + ['Home', 'Moves focus to the first cell in the row that contains focus.'], + ['End', ' Moves focus to the last cell in the row that contains focus.'] + ] + };
@@ -340,5 +351,11 @@ function onSelect(event: any): void { console.log('event:onSelect', event.detail ARIA Guidelines
+

Keyboard Interactions

+

+ The following keys provide grid navigation by moving focus among cells of the grid. Implementations of grid make these key commands available when an element in the grid has received focus, + e.g., after a user has moved focus to the grid with Tab. +

+ From 0f39caf9b976fbcea0dceb89203390d9f8733ee7 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Tue, 27 Sep 2022 22:56:17 +0100 Subject: [PATCH 05/13] Fix Datatable keyboard cell navigation for the "End" Key --- src/lib/components/Table/DataTable.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Table/DataTable.svelte b/src/lib/components/Table/DataTable.svelte index 32e04cef53..f8950f4531 100644 --- a/src/lib/components/Table/DataTable.svelte +++ b/src/lib/components/Table/DataTable.svelte @@ -143,7 +143,7 @@ function jumpToOuterColumn(type: 'first' | 'last' = 'first'): void { const targetRowElement = getTargetElem(); if (targetRowElement === null) return; - const lastIndex: number = targetRowElement.children.length - 1; + const lastIndex: number = targetRowElement.children.length; const selected = type === 'first' ? 1 : lastIndex; const targetColElement: HTMLElement | null = targetRowElement.querySelector(`[aria-colindex="${selected}"]`); if (targetColElement === null) return; From 142b5002cf2825d5288cb809a45ed566ce374fe5 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 19:25:04 +0100 Subject: [PATCH 06/13] Add LightSwitch a11y keyboard shortcuts documentation --- .../(inner)/utilities/lightswitches/+page.svelte | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/routes/(inner)/utilities/lightswitches/+page.svelte b/src/routes/(inner)/utilities/lightswitches/+page.svelte index 54a2b2e69d..1a5523f10e 100644 --- a/src/routes/(inner)/utilities/lightswitches/+page.svelte +++ b/src/routes/(inner)/utilities/lightswitches/+page.svelte @@ -1,6 +1,12 @@
@@ -62,5 +68,8 @@

Accessibility

This component is treated as a Switch. See the ARIA Guidelines.

+ +

Keyboard Interactions

+
From bb1d105578cb6af0453f5e07e0650a2b96dbaa82 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 19:31:30 +0100 Subject: [PATCH 07/13] Add Drawer a11y keyboard shortcuts documentation --- src/routes/(inner)/utilities/drawers/+page.svelte | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/routes/(inner)/utilities/drawers/+page.svelte b/src/routes/(inner)/utilities/drawers/+page.svelte index bda81fcc02..73b40bfebb 100644 --- a/src/routes/(inner)/utilities/drawers/+page.svelte +++ b/src/routes/(inner)/utilities/drawers/+page.svelte @@ -51,6 +51,11 @@ ['describedby', 'string', '-', 'Provide an ID of the element describing the drawer.'] ] }; + + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [['Escape', ' Closes the drawer.']] + };
@@ -144,5 +149,7 @@ const storeDrawer: Writable = writable(false); ARIA Guidelines +

Keyboard Interactions

+
From 14ff8f3cc16418deb75247a7cf2ef0b1e834c07c Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 19:37:57 +0100 Subject: [PATCH 08/13] Add RangeSlidera11y keyboard shortcuts documentation --- .../(inner)/components/range-sliders/+page.svelte | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/routes/(inner)/components/range-sliders/+page.svelte b/src/routes/(inner)/components/range-sliders/+page.svelte index 14e20e222d..680c9b4cdc 100644 --- a/src/routes/(inner)/components/range-sliders/+page.svelte +++ b/src/routes/(inner)/components/range-sliders/+page.svelte @@ -45,6 +45,17 @@ ['label', 'string', `A semantic ARIA label.`] ] }; + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [ + ['Right Arrow or Up Arrow', 'Increase the value of the slider by one step.'], + ['Left Arrow or Down Arrow', 'Decrease the value of the slider by one step.'], + ['Home', 'Set the slider to the first allowed value in its range.'], + ['End', 'Set the slider to the last allowed value in its range.'], + ['Page Up', 'Increase the slider value by an amount larger than the step change made by Up Arrow.'], + ['Page Down', 'Decrease the slider value by an amount larger than the step change made by Up Down.'] + ] + };
@@ -159,6 +170,8 @@ ARIA Guidelines
+

Keyboard Interactions

+ From ebb6b9e2015b782ef9ed5d0f9d43e60a6e5c0b22 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 19:47:24 +0100 Subject: [PATCH 09/13] Add Slide Toggle a11y keyboard shortcuts documentation --- src/routes/(inner)/components/slide-toggles/+page.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/routes/(inner)/components/slide-toggles/+page.svelte b/src/routes/(inner)/components/slide-toggles/+page.svelte index cf0e374f5c..928571bbbe 100644 --- a/src/routes/(inner)/components/slide-toggles/+page.svelte +++ b/src/routes/(inner)/components/slide-toggles/+page.svelte @@ -17,6 +17,10 @@ headings: ['Prop', 'Required', 'Description'], source: [['label', '-', `Provide a semantic label.`]] }; + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [['Space or Enter', 'When focus is on the slide toggle, changes the state of the slide toggle.']] + };
@@ -96,5 +100,7 @@ ARIA Guidelines
+

Keyboard Interactions

+ From e01aba5ea8610e2a119db49f376734fbe42c2439 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 19:53:08 +0100 Subject: [PATCH 10/13] Fix SlideToggle Enter or Space keyboard interaction --- src/lib/components/SlideToggle/SlideToggle.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/SlideToggle/SlideToggle.svelte b/src/lib/components/SlideToggle/SlideToggle.svelte index 3975356c3f..a7c48d5b6b 100644 --- a/src/lib/components/SlideToggle/SlideToggle.svelte +++ b/src/lib/components/SlideToggle/SlideToggle.svelte @@ -32,7 +32,7 @@ if (['Enter', 'Space'].includes(event.code)) { event.preventDefault(); dispatch('keyup', event); - event.target.click(); + event.target.firstChild.click(); } } From 9a8c5d560910605b40975b041f084763051c1904 Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 21:22:24 +0100 Subject: [PATCH 11/13] Add RadioGroup a11y keyboard shortcuts documentation --- .../(inner)/components/radio-groups/+page.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/routes/(inner)/components/radio-groups/+page.svelte b/src/routes/(inner)/components/radio-groups/+page.svelte index 1ea7738a2f..f3d070782c 100644 --- a/src/routes/(inner)/components/radio-groups/+page.svelte +++ b/src/routes/(inner)/components/radio-groups/+page.svelte @@ -33,6 +33,14 @@ headings: ['Prop', 'Required', 'Description'], source: [['label', '-', `Defines a semantic ARIA label.`]] }; + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [ + ['Tab', 'Moves focus to the next focusable RadioItem.'], + ['Shift + Tab ', 'Moves focus to the previous focusable RadioItem.'], + ['Space or Enter', 'Checks the focused radio button if it is not already checked'] + ] + };
@@ -109,5 +117,7 @@

Radio Item

+

Keyboard Interactions

+
From 0d52f1de9021c8344c3bf80fe5c654311b6327ca Mon Sep 17 00:00:00 2001 From: Benzara Tahar Date: Sun, 2 Oct 2022 21:27:19 +0100 Subject: [PATCH 12/13] Add Tabs a11y keyboard shortcuts documentation --- src/routes/(inner)/components/tabs/+page.svelte | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/routes/(inner)/components/tabs/+page.svelte b/src/routes/(inner)/components/tabs/+page.svelte index b31acaa754..c27b8a0909 100644 --- a/src/routes/(inner)/components/tabs/+page.svelte +++ b/src/routes/(inner)/components/tabs/+page.svelte @@ -42,6 +42,16 @@ headings: ['Prop', 'Type', 'Required', 'Description'], source: [['label', 'string', '-', `Defines a semantic label for the tab.`]] }; + const tableKeys: any = { + headings: ['Keys', 'Description'], + source: [ + ['Tab', 'Moves focus to the next focusable Tab.'], + ['Shift + Tab ', 'Moves focus to the previous focusable Tab.'], + ['Home', 'Moves focus to the first tab.'], + ['End', 'Moves focus to the last tab.'], + ['Space or Enter', 'Activates the tab if it was not activated automatically on focus.'], + ] + };
@@ -175,5 +185,7 @@ let storeTab: Writable = writable('a');`}

Tab

+

Keyboard Interactions

+
From 101de603f5d3510a6a4d5bc835ecc938dcab1721 Mon Sep 17 00:00:00 2001 From: endigo9740 Date: Mon, 3 Oct 2022 11:15:31 -0500 Subject: [PATCH 13/13] Minor text adjustments --- src/routes/(inner)/components/accordions/+page.svelte | 6 +++--- src/routes/(inner)/utilities/drawers/+page.svelte | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/routes/(inner)/components/accordions/+page.svelte b/src/routes/(inner)/components/accordions/+page.svelte index 131c3935dc..6bfecf9967 100644 --- a/src/routes/(inner)/components/accordions/+page.svelte +++ b/src/routes/(inner)/components/accordions/+page.svelte @@ -39,9 +39,9 @@ const tableKeys: any = { headings: ['Keys', 'Description'], source: [ - ['Tab', 'Moves focus to the next focusable element.
All focusable elements in the accordion are included in the page Tab sequence.'], - ['Shift + Tab ', 'Moves focus to the previous focusable element.
All focusable elements in the accordion are included in the page Tab sequence.'], - ['Space or Enter', 'When focus is on the accordion header of a collapsed section, expands the section.'] + ['Tab', 'Moves focus to the next focusable element.'], + ['Shift + Tab ', 'Moves focus to the previous focusable element.'], + ['Space or Enter', 'When focus is on the accordion header toggles the collapsable region open/closed.'] ] }; diff --git a/src/routes/(inner)/utilities/drawers/+page.svelte b/src/routes/(inner)/utilities/drawers/+page.svelte index 73b40bfebb..a752c9f474 100644 --- a/src/routes/(inner)/utilities/drawers/+page.svelte +++ b/src/routes/(inner)/utilities/drawers/+page.svelte @@ -54,7 +54,7 @@ const tableKeys: any = { headings: ['Keys', 'Description'], - source: [['Escape', ' Closes the drawer.']] + source: [['Esc', ' Closes the drawer.']] }; @@ -68,7 +68,7 @@
-

Examples

+

Examples