diff --git a/.changeset/checkbox-accessibility-docs.md b/.changeset/checkbox-accessibility-docs.md new file mode 100644 index 000000000..849b7d590 --- /dev/null +++ b/.changeset/checkbox-accessibility-docs.md @@ -0,0 +1,5 @@ +--- +"@radui/ui": patch +--- + +Add Checkbox keyboard interaction and ARIA reference tables to the docs. diff --git a/docs/app/docs/components/checkbox/content.mdx b/docs/app/docs/components/checkbox/content.mdx index 17742e2bf..873d7a7ee 100644 --- a/docs/app/docs/components/checkbox/content.mdx +++ b/docs/app/docs/components/checkbox/content.mdx @@ -1,6 +1,6 @@ import Documentation from '@/components/layout/Documentation/Documentation'; import CheckboxExample from "./docs/example_1" -import { code, anatomy, api_documentation } from "./docs/codeUsage" +import { code, anatomy, ariaReferences, keyboardShortcuts, api_documentation } from "./docs/codeUsage" + + + + diff --git a/docs/app/docs/components/checkbox/docs/codeUsage.js b/docs/app/docs/components/checkbox/docs/codeUsage.js index ea09e0dd7..556ac7672 100644 --- a/docs/app/docs/components/checkbox/docs/codeUsage.js +++ b/docs/app/docs/components/checkbox/docs/codeUsage.js @@ -1,6 +1,16 @@ import { getSourceCodeFromPath } from '@/utils/parseSourceCode'; import root_api from './component_api/root.tsx'; import indicator_api from './component_api/indicator.tsx'; +import { + createAriaReferenceRow, + createAriaReferenceTable, + DOCS_ARIA_PATTERNS +} from '../../shared/ariaReferences'; +import { + createKeyboardShortcutRow, + createKeyboardShortcutTable, + DOCS_KEYBOARD_SHORTCUTS +} from '../../shared/keyboardShortcuts'; const example_1_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/checkbox/docs/example_1.tsx'); const scss_SourceCode = await getSourceCodeFromPath('styles/themes/components/checkbox.scss'); @@ -18,4 +28,22 @@ export const api_documentation = { indicator: indicator_api }; +export const keyboardShortcuts = createKeyboardShortcutTable([ + createKeyboardShortcutRow( + DOCS_KEYBOARD_SHORTCUTS.TAB, + 'Moves focus to the checkbox.' + ), + createKeyboardShortcutRow( + DOCS_KEYBOARD_SHORTCUTS.SPACE, + 'Toggles between checked and unchecked states.' + ) +]); + +export const ariaReferences = createAriaReferenceTable([ + createAriaReferenceRow( + DOCS_ARIA_PATTERNS.CHECKBOX, + 'Uses checkbox semantics with aria-checked to expose checked, unchecked, or mixed state.' + ) +]); + export default code; diff --git a/docs/app/docs/components/shared/ariaReferences.js b/docs/app/docs/components/shared/ariaReferences.js index b37edd768..cc48c0fcb 100644 --- a/docs/app/docs/components/shared/ariaReferences.js +++ b/docs/app/docs/components/shared/ariaReferences.js @@ -22,6 +22,11 @@ export const DOCS_ARIA_PATTERNS = Object.freeze({ label: 'Alert dialog pattern', href: 'https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/' }, + CHECKBOX: { + id: 'checkbox', + label: 'Checkbox pattern', + href: 'https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/' + }, COMBOBOX: { id: 'combobox', label: 'Combobox pattern',