Merge pull request #292 from benzara-tahar/feat/kbd-shortcuts-docs-a11y

WIP: Document component keyboard shortcuts (a11y)

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();
 		}
 	}
 

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;

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: [
+			['<kbd>Tab</kbd>', 'Moves focus to the next focusable element.'],
+			['<kbd>Shift + Tab</kbd> ', 'Moves focus to the previous focusable element.'],
+			['<kbd>Space</kbd> or <kbd>Enter</kbd>', 'When focus is on the accordion header toggles the collapsable region open/closed.']
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -160,5 +168,7 @@
 			<a href="https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion" target="_blank">ARIA Guidelines</a>
 		</div>
 		<DataTable headings={tableA11yItem.headings} source={tableA11yItem.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>

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: [
+			['<kbd>Right Arrow</kbd>', 'Moves focus one cell to the right. If focus is on the right-most cell in the row, focus does not move.'],
+			['<kbd>Left Arrow</kbd>', 'Moves focus one cell to the left. If focus is on the left-most cell in the row, focus does not move.'],
+			['<kbd>Down Arrow</kbd>', 'Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.'],
+			['<kbd>Up Arrow</kbd>', 'Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.'],
+			['<kbd>Home</kbd>', 'Moves focus to the first cell in the row that contains focus.'],
+			['<kbd>End</kbd>', ' Moves focus to the last cell in the row that contains focus.']
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -340,5 +351,11 @@ function onSelect(event: any): void { console.log('event:onSelect', event.detail
 			<a href="https://www.w3.org/WAI/ARIA/apg/patterns/grid/" target="_blank">ARIA Guidelines</a>
 		</div>
 		<DataTable headings={tableA11y.headings} source={tableA11y.source} />
+		<h3>Keyboard Interactions</h3>
+		<p>
+			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 <kbd>Tab</kbd>.
+		</p>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>

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 tableKeys: any = {
+		headings: ['Keys', 'Description'],
+		source: [
+			['<kbd>Tab</kbd>', 'Moves focus to the next option.'],
+			['<kbd>Shift + Tab</kbd> ', 'Moves focus to the previous option.'],
+			['<kbd>Space</kbd> or <kbd>Enter</kbd>', 'Changes the selection state of the focused option.']
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -150,5 +158,7 @@
 		<DataTable headings={tableA11yList.headings} source={tableA11yList.source} />
 		<h3>Listbox Item</h3>
 		<DataTable headings={tableA11yItem.headings} source={tableA11yItem.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>

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: [
+			['<kbd>Tab</kbd>', 'Moves focus to the next focusable RadioItem.'],
+			['<kbd>Shift + Tab</kbd> ', 'Moves focus to the previous focusable RadioItem.'],
+			['<kbd>Space</kbd> or <kbd>Enter</kbd>', 'Checks the focused radio button if it is not already checked']
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -109,5 +117,7 @@
 		<DataTable headings={tableA11yGroup.headings} source={tableA11yGroup.source} />
 		<h3>Radio Item</h3>
 		<DataTable headings={tableA11yItem.headings} source={tableA11yItem.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>

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: [
+			['<kbd>Right Arrow</kbd> or <kbd>Up Arrow</kbd>', 'Increase the value of the slider by one step.'],
+			['<kbd>Left Arrow</kbd> or <kbd>Down Arrow</kbd>', 'Decrease  the value of the slider by one step.'],
+			['<kbd>Home</kbd>', 'Set the slider to the first allowed value in its range.'],
+			['<kbd>End</kbd>', 'Set the slider to the last allowed value in its range.'],
+			['<kbd>Page Up</kbd>', 'Increase the slider value by an amount larger than the step change made by <kbd>Up Arrow</kbd>.'],
+			['<kbd>Page Down</kbd>', 'Decrease  the slider value by an amount larger than the step change made by <kbd>Up Down</kbd>.']
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -159,6 +170,8 @@
 			<a href="https://www.w3.org/WAI/ARIA/apg/patterns/slider/" target="_blank">ARIA Guidelines</a>
 		</div>
 		<DataTable headings={tableA11y.headings} source={tableA11y.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 
 	<!-- Support -->

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: [['<kbd>Space</kbd> or <kbd>Enter</kbd>', 'When focus is on the slide toggle, changes the state of the slide toggle.']]
+	};
 </script>
 
 <div class="space-y-8">
@@ -96,5 +100,7 @@
 			<a href="https://www.w3.org/WAI/ARIA/apg/patterns/switch/" target="_blank">ARIA Guidelines</a>
 		</div>
 		<DataTable headings={tableA11y.headings} source={tableA11y.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>

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: [
+			['<kbd>Tab</kbd>', 'Moves focus to the next focusable Tab.'],
+			['<kbd>Shift + Tab</kbd> ', 'Moves focus to the previous focusable Tab.'],
+			['<kbd>Home</kbd>', 'Moves focus to the first tab.'],
+			['<kbd>End</kbd>', 'Moves focus to the last tab.'],
+			['<kbd>Space</kbd> or <kbd>Enter</kbd>', 'Activates the tab if it was not activated automatically on focus.'],
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -175,5 +185,7 @@ let storeTab: Writable<string> = writable('a');`}
 		<DataTable headings={tableA11yGroup.headings} source={tableA11yGroup.source} />
 		<h3>Tab</h3>
 		<DataTable headings={tableA11yTab.headings} source={tableA11yTab.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>

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: [['<kbd>Esc</kbd>', ' Closes the drawer.']]
+	};
 </script>
 
 <section class="space-y-8">
@@ -63,7 +68,7 @@
 
 	<!-- Examples -->
 	<div class="card card-body">
-		<h2 class='sr-only'>Examples</h2>
+		<h2 class="sr-only">Examples</h2>
 		<div class="w-0 h-0">
 			<Drawer open={storeDrawer} {position}>
 				<div class="w-full h-full flex justify-center items-center">
@@ -144,5 +149,7 @@ const storeDrawer: Writable<boolean> = writable(false);
 			<a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/" target="_blank">ARIA Guidelines</a>
 		</div>
 		<DataTable headings={tableA11y.headings} source={tableA11y.source} />
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </section>

src/routes/(inner)/utilities/lightswitches/+page.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
-	import { LightSwitch } from '@brainandbones/skeleton';
+	import { LightSwitch, DataTable } from '@brainandbones/skeleton';
 	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
+
+	// A11y
+	const tableKeys: any = {
+		headings: ['Keys', 'Description'],
+		source: [['<kbd>Space</kbd> or <kbd>Enter</kbd>', 'When focus is on the switch, changes the state of the switch.']]
+	};
 </script>
 
 <div class="space-y-8">
@@ -62,5 +68,8 @@
 	<section class="space-y-4">
 		<h2>Accessibility</h2>
 		<p>This component is treated as a <em>Switch</em>. See the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/switch/" target="_blank">ARIA Guidelines</a>.</p>
+
+		<h3>Keyboard Interactions</h3>
+		<DataTable headings={tableKeys.headings} source={tableKeys.source} />
 	</section>
 </div>