@gunkin/uiify 0.0.17-alpha → 0.0.19-alpha

package/skills/uiify/references/elements/slider.md

@@ -0,0 +1,39 @@
+# slider
+
+Binding: slider
+
+Set a value within a continuous or stepped range.
+
+## Use when
+
+Let people adjust a value within meaningful lower and upper bounds.
+
+## Avoid when
+
+Use a number field when people need exact numeric entry or the range has too many meaningful values to scan.
+
+## Structure
+
+Use the documented Slider for one value and label it with the quantity and units. State the current value in adjacent text when it is not otherwise clear; set min, max, and step to match the task. Use SliderClient for a range with two thumbs, labels, or marks.
+
+## Responsive
+
+Keep the track and thumb operable at narrow widths. Do not communicate the selected value by thumb position or color alone.
+
+## States
+
+Expose the current value, bounds, step, and disabled state. Keep a numeric text entry alternative when precise adjustment is important.
+
+## Verify
+
+Test keyboard adjustment, endpoints, step increments, accessible name and value, touch screen-reader operation, and any alternative numeric entry.
+
+## Common mistake
+
+Showing a slider without a visible label or a way to understand its current value.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (verified 2026-10-17)

package/skills/uiify/references/elements/spinner.md

@@ -0,0 +1,38 @@
+# spinner
+
+Binding: spinner
+
+A task is actively pending and there is no reliable completion percentage
+
+## Use when
+
+A task is actively pending and there is no reliable completion percentage. Pair the indicator with a short label that says what is waiting.
+
+## Avoid when
+
+Do not show a spinner for a task with measurable progress; use a labeled progress element. Avoid showing it for work that completes too quickly to perceive.
+
+## Structure
+
+Use `Spinner` with a specific label. Its status role and polite live region announce the label; use showLabel when the text should also be visible.
+
+## Responsive
+
+Keep the indicator near the task it describes, reserve enough space to prevent layout jumps, and do not let fixed positioning obscure controls.
+
+## States
+
+The delay prop writes a delayed state marker; shipped CSS disables animation in that state, but does not hide the element or schedule a timer. The component supports sm/md/lg sizes and center/fixed/absolute alignment. Motion respects reduced-motion preferences in UIify styles.
+
+## Verify
+
+Check the announced label, visible label when needed, the delayed marker behavior, alignment at narrow widths, and reduced-motion rendering. Ensure completion removes the status.
+
+## Common mistake
+
+A spinner without a meaningful label says that something is happening but not what the person is waiting for. Do not treat `delay` as a timer that hides the indicator.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-17)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) (verified 2026-10-17)

package/skills/uiify/references/elements/stats-bar.md

@@ -4,7 +4,35 @@ Binding: gap
 
 Summarize a few named values for one subject or time period.
 
-Pair each metric with a clear label and value. Use a description list when the content consists of term-and-value pairs.
+## Use when
+
+A few named values summarize one subject, population, and time period.
+
+## Avoid when
+
+Do not show unlabeled numbers, mix unlike periods/populations, or use a stats bar when people need detailed comparisons or exploration.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Use a description list for term/value pairs and label units and the time period in text.
+
+## Responsive
+
+Let each label/value pair wrap and keep pairs together. Preserve source order as columns collapse.
+
+## States
+
+For values that update, explain their meaning and update timing; announce important changes without repeatedly interrupting users.
+
+## Verify
+
+Check labels, units, period, number formatting, reading order, and narrow layout. Ensure decoration does not carry the only meaning.
+
+## Common mistake
+
+“1,248” without a label, unit, or period is not an interpretable metric.
+
+## Custom implementation
 
 ```html
 <dl>
@@ -13,7 +41,7 @@ Pair each metric with a clear label and value. Use a description list when the c
 </dl>
 ```
 
-This is an app-level composition recipe; it does not add a component to UIify.
+This is an app-level composition; UIify does not currently ship this component.
 
 ## Sources
 

package/skills/uiify/references/elements/stepper.md

@@ -4,17 +4,40 @@ Binding: gap
 
 Show ordered steps and identify the current step in a multi-step task.
 
-Present ordered steps in their actual sequence and identify the current step in text. Do not imply that future steps are completed.
+## Use when
 
-```html
-<ol aria-label="Application progress">
-  <li>Account</li><li aria-current="step">Profile</li><li>Review</li>
-</ol>
-```
+Show the sequence and current position in a multi-step task.
 
-This is an app-level composition recipe; it does not add a component to UIify.
+## Avoid when
+
+Do not use a stepper for unrelated navigation or suggest that future steps are already complete.
+
+## Structure
+
+Use an ordered list in task order. Identify the current step with aria-current="step" and provide concise step names.
+
+## Responsive
+
+Keep the current step and sequence understandable when labels wrap or the list becomes compact.
+
+## States
+
+Distinguish completed, current, and upcoming steps in text or semantics, not color alone. Update the current marker only when the task advances.
+
+## Verify
+
+Check list order, current-step announcement, keyboard sequence through any step links, and narrow-screen reading order.
+
+## Common mistake
+
+Marking every past step complete when users can still need to correct its information.
+
+## Custom implementation
+
+Render the sequence as an ol and set aria-current="step" on the current item. This task-progress pattern does not add a UIify component.
 
 ## Sources
 
-- [www.w3.org](https://www.w3.org/TR/wai-aria-1.2/#aria-current) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/TR/wai-aria-1.2/#aria-current) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) (verified 2026-10-17)

package/skills/uiify/references/elements/switch.md

@@ -2,13 +2,40 @@
 
 Binding: switch
 
-Expose a binary preference with a clear label.
+Expose a binary setting that takes effect immediately.
 
-Label the setting by the result it controls and show its current on or off state. Use a switch only for an immediate binary setting.
+## Use when
+
+Let a person turn a persistent setting on or off and apply the change immediately.
+
+## Avoid when
+
+Use a checkbox for a form choice that is applied on submit, or a button for a one-time action.
+
+## Structure
+
+Use the documented Switch with a stable visible label that describes the setting. Keep the label unchanged as the state changes, and expose the current checked state.
+
+## Responsive
+
+Keep the label and control together as they wrap. Ensure the complete control remains operable at narrow widths.
+
+## States
+
+Make on, off, and disabled states clear. If changing the setting triggers remote work, communicate pending and failure feedback in text.
+
+## Verify
+
+Test label activation, Space-key operation, checked-state announcement, persistence after navigation, and feedback for failed updates.
+
+## Common mistake
+
+Using a switch for a form value that does not take effect until the user submits.
 
 Related laws: references/laws/proximity.md, references/laws/accessibility.md
 
 ## Sources
 
-- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-17)

package/skills/uiify/references/elements/table-of-contents.md

@@ -0,0 +1,39 @@
+# table-of-contents
+
+Binding: table-of-contents
+
+Help readers navigate sections within a long page.
+
+## Use when
+
+Help readers jump among named sections in a long document or article.
+
+## Avoid when
+
+Do not add a contents rail to a short page or include headings that are not present in the content.
+
+## Structure
+
+Use the documented TableOfContents parts with a named navigation region and links whose fragments match stable heading IDs. Reflect heading hierarchy with the documented level.
+
+## Responsive
+
+Keep the links reachable on small screens. The native popover trigger can expose the contents without removing the in-page heading and fragment destinations.
+
+## States
+
+Use the base entry for native fragment navigation. The /client entry can add scroll tracking and controlled open/current state; it enhances the native shell after hydration.
+
+## Verify
+
+Follow each link and confirm its target exists, is visible after navigation, and is not obscured by a sticky header. Check the named landmark and keyboard operation of the popover trigger.
+
+## Common mistake
+
+Using scroll position alone to highlight a link while its fragment target is missing or unstable.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) (verified 2026-10-17)

package/skills/uiify/references/elements/table.md

@@ -4,11 +4,40 @@ Binding: table
 
 Compare structured member records.
 
-Use a table for related row-and-column data, with a caption and header cells that identify the data. Associate search and filters with this table.
+## Use when
+
+Compare records across shared attributes in rows and columns. Use a list for a one-dimensional set of items and CSS grid for page layout.
+
+## Avoid when
+
+Do not use a table only to position content. Turn rows into cards only when people no longer need to compare values across records.
+
+## Structure
+
+Use `Table.Root`, `Table.Caption`, `Table.Header`, `Table.ColumnHeader`, `Table.Body`, `Table.Row`, and `Table.Cell` for native table structure. Give the table a caption or an accessible name and mark header cells so their relationship to data is clear. Keep action controls in a separate column. Align numbers to the end and use tabular numerals for easier comparison.
+
+## Responsive
+
+Preserve the table's row and column relationships. If columns need horizontal scrolling, prioritize which columns remain visible and make the overflow region usable with a keyboard. Do not squeeze text until values are unreadable.
+
+## States
+
+Distinguish an empty dataset from a filter with no matches. Communicate loading and errors, and keep selection or sort state visible when requested. The native table is Tier 0; row selection, sorting, and expansion require the `/client` entry.
+
+## Verify
+
+Inspect the accessibility tree for the caption, header cells, and their data relationships. Navigate through the table at a narrow viewport and check any horizontal overflow with a keyboard. Test empty, no-match, loading, error, selected, and sorted states that the page supports.
+
+## Common mistake
+
+A grid of `div` elements can look like a table but does not provide native row and column header relationships.
+
+Example: `references/examples/table-controls.md`.
 
 Related laws: references/laws/proximity.md, references/laws/accessibility.md
 
 ## Sources
 
-- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/tables/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/table/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-17)

package/skills/uiify/references/elements/tabs.md

@@ -0,0 +1,38 @@
+# tabs
+
+Binding: tabs
+
+Switch between alternate views of the same object.
+
+## Use when
+
+Switch between equivalent views of the same object when only one view needs to be visible at a time.
+
+## Avoid when
+
+Use links for navigation, a stepper for sequential tasks, and side-by-side content when people need to compare views.
+
+## Structure
+
+UIify `Tabs` takes an `id`, `items` with a `value`, `label`, and `panel`, and an optional `defaultValue` and `orientation`. It renders a native radio group with one label and panel per item; it does not implement the ARIA tablist pattern. Set `defaultValue` so a useful panel is selected initially. Keep labels short and make each panel's content match its label.
+
+## Responsive
+
+Let the radio labels wrap or scroll as a group on narrow screens; do not shrink them until they are hard to read. Keep the selected label and its panel visually connected.
+
+## States
+
+`defaultValue` selects the initial radio and panel; changing the native radio changes the visible panel. The panels are CSS-only and work without JavaScript. Use native radio keyboard behavior; do not assume the APG tablist arrow-key model.
+
+## Verify
+
+Check one radio is selected, each label selects its matching panel, and Tab and arrow keys work as they do for a native radio group. Verify the group at narrow widths and with long labels.
+
+## Common mistake
+
+Using tabs as the site's primary navigation hides the fact that each choice is a different page.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) (verified 2026-10-17)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) (verified 2026-10-17)

package/skills/uiify/references/elements/tags-input.md

@@ -0,0 +1,39 @@
+# tags-input
+
+Binding: tags-input
+
+Enter and manage a set of text tokens such as recipients or filters.
+
+## Use when
+
+Let people enter multiple free-form values as removable tokens.
+
+## Avoid when
+
+Use a select or checkbox group for a fixed choice set. Do not add suggestion-list semantics unless the complete combobox interaction is implemented.
+
+## Structure
+
+Use TagsInput.Root with the documented List, Tag, TagRemove, and Input parts. Give the text input a clear accessible name and keep each remove control adjacent to its tag. UIify currently names each one “Remove tag”; verify that the tag context is announced when moving among removal controls.
+
+## Responsive
+
+Allow tags to wrap and the input to remain reachable as the list grows. Keep remove controls visible and operable at narrow widths.
+
+## States
+
+Communicate validation, duplicate values, and maximum-tag limits in text. Preserve existing tags when one value is rejected.
+
+## Verify
+
+Test adding, removing, paste and delimiter behavior, duplicate and limit cases, keyboard access, accessible names, and long lists. If removal controls are ambiguous in the target assistive technology, use custom controls with names that include the tag value.
+
+## Common mistake
+
+Rendering tags as decorative chips with no accessible way to identify or remove each value.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (verified 2026-10-17)

package/skills/uiify/references/elements/testimonial.md

@@ -4,18 +4,49 @@ Binding: gap
 
 Attribute a customer quote to a named source.
 
-Use a quotation with a clear attribution. Include the speaker and relevant affiliation in text when the quotation needs that context.
+## Use when
+
+A real customer quotation adds useful evidence to a product or service claim.
+
+## Avoid when
+
+Do not invent a quote, imply an endorsement that was not given, or use a testimonial as the only source for a factual claim.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Mark the quoted words with blockquote and include a clear attribution in a nearby caption or paragraph. Keep the quote and its speaker together.
+
+## Responsive
+
+Let the quotation wrap at a readable line length. Keep attribution adjacent on narrow screens and do not crop text into an image.
+
+## States
+
+If quotes rotate, provide labeled controls and user control over rotation; otherwise prefer a static quote.
+
+## Verify
+
+Check quote accuracy and attribution, semantic quotation markup, text contrast, reading order, and keyboard access for any controls.
+
+## Common mistake
+
+A decorative quotation mark does not identify who said the words.
+
+## Custom implementation
 
 ```html
 <figure>
-  <blockquote><p>Setup took minutes.</p></blockquote>
-  <figcaption>— Ada Lovelace, Acme</figcaption>
+  <blockquote cite="/customers/acme">
+    <p>Our team can find the latest project status quickly.</p>
+  </blockquote>
+  <figcaption>Jordan Lee, Operations Lead</figcaption>
 </figure>
 ```
 
-This is an app-level composition recipe; it does not add a component to UIify.
+This is an app-level composition; UIify does not currently ship this component.
 
 ## Sources
 
 - [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) (verified 2026-10-16)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) (verified 2026-10-16)
 - [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/textarea.md

@@ -4,11 +4,38 @@ Binding: textarea
 
 Accept a longer free-text value.
 
-Give the multiline control a visible label. State length or format limits before entry and keep any validation message beside the control.
+## Use when
+
+Collect a response that may span multiple lines, such as a message or description.
+
+## Avoid when
+
+Use a single-line input for short values and avoid imposing a character limit that the task does not require.
+
+## Structure
+
+Associate the documented Textarea with a visible label. State length or format limits before entry and place validation feedback next to the control.
+
+## Responsive
+
+Let the field grow to the available inline size and allow entered text to wrap. Use the documented autoSize option when content-driven height is appropriate.
+
+## States
+
+Preserve text after an error and identify invalid content in text; do not rely on a color change alone.
+
+## Verify
+
+Check the visible label, instructions, keyboard editing, error association, long content, and narrow-width reflow.
+
+## Common mistake
+
+Using placeholder text as a substitute for the label or hiding the only copy of a length limit.
 
 Related laws: references/laws/proximity.md, references/laws/accessibility.md
 
 ## Sources
 
-- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
-- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/instructions/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) (verified 2026-10-17)

package/skills/uiify/references/elements/timeline.md

@@ -4,15 +4,43 @@ Binding: gap
 
 Show dated events in chronological order.
 
-Use an ordered list when sequence matters. Encode machine-readable dates with time and keep each event’s date attached to its description.
+## Use when
+
+Events have a meaningful chronological sequence and each date needs to stay attached to its description.
+
+## Avoid when
+
+Do not use a timeline to decorate unrelated facts or imply chronology when events are unordered. Use a table when people need to compare attributes across events.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Use an ordered list when sequence matters, and a time element with machine-readable datetime for each date. Keep event title and details in the same list item.
+
+## Responsive
+
+Preserve chronological reading order as a vertical list on narrow screens. Do not rely on left/right placement or connecting lines to communicate sequence.
+
+## States
+
+Distinguish past, current, and upcoming events in text when those states matter; color and position alone are insufficient.
+
+## Verify
+
+Check ordering, machine-readable dates, date format, current/upcoming meaning, list semantics, and narrow layout.
+
+## Common mistake
+
+A reverse chronological visual layout can conflict with DOM reading order if the markup is not ordered intentionally.
+
+## Custom implementation
 
 ```html
 <ol>
-  <li><time datetime="2026-10-16">October 16, 2026</time><p>Release published</p></li>
+  <li><time datetime="2026-10-17">October 17, 2026</time><p>Release published</p></li>
 </ol>
 ```
 
-This is an app-level composition recipe; it does not add a component to UIify.
+This is an app-level composition; UIify does not currently ship this component.
 
 ## Sources
 

package/skills/uiify/references/elements/toast.md

@@ -4,7 +4,33 @@ Binding: toast
 
 Confirm the result of a completed save.
 
-Use a status message for brief feedback that should not interrupt the current task. Keep essential errors visible until the user can address them.
+## Use when
+
+A brief, non-blocking update confirms a completed action or reports a change while the person continues working. Use assertive priority only when the message is urgent.
+
+## Avoid when
+
+Do not use a timed toast for errors that require correction, critical information, or a decision. Put actionable errors in the relevant form or page and keep them visible.
+
+## Structure
+
+Place a live `ToastViewport` beside the client provider and enqueue a concise title/description. Include an explicit close control; add one short action only when undo or a direct follow-up is useful.
+
+## Responsive
+
+Keep notifications clear of controls and safe areas, allow text to wrap, and limit simultaneous messages so the queue stays readable.
+
+## States
+
+Toasts default to polite announcements and a 4-second duration. Hover and focus pause the timer; set duration to 0 for persistent feedback. The client island is required for the queue; the exported shell alone does not enqueue messages.
+
+## Verify
+
+Check that a save message is announced without moving focus, pause on pointer/focus, close control, queue behavior, persistent duration, and a narrow viewport. Confirm assertive announcements are reserved for urgent messages.
+
+## Common mistake
+
+Do not auto-dismiss an error before the person can read and act on it.
 
 Related laws: references/laws/feedback.md
 

package/skills/uiify/references/elements/toggle-group.md

@@ -0,0 +1,39 @@
+# toggle-group
+
+Binding: toggle-group
+
+Select one or several related options as a group of toggles.
+
+## Use when
+
+Present a compact set of related options whose selected values affect the same view or object.
+
+## Avoid when
+
+Use ordinary links for navigation, Tabs for switching associated panels, and checkboxes for a form list that benefits from visible labels and descriptions.
+
+## Structure
+
+Use ToggleGroup with a stable id, a group name, and items with values and labels. Set type to single for one choice or multiple for independent choices.
+
+## Responsive
+
+Let labels wrap or stack without changing the option order or hiding selected values. Keep targets usable at narrow widths.
+
+## States
+
+Show selected and unselected values clearly. In single mode, keep a valid selection when one is required; in multiple mode, allow the documented independent selection behavior.
+
+## Verify
+
+Test arrow-key operation, group name, single/multiple selection, disabled items, selected-state announcement, and keyboard focus.
+
+## Common mistake
+
+Using a toggle group for navigation or tabs when options do not represent selection on the same content.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (verified 2026-10-17)

package/skills/uiify/references/elements/toggle.md

@@ -0,0 +1,39 @@
+# toggle
+
+Binding: toggle
+
+Expose a binary value with a toggle-style presentation.
+
+## Use when
+
+Present one reversible binary value, such as whether a formatting option is active.
+
+## Avoid when
+
+Use a switch for a persistent on/off setting and ordinary buttons for one-time actions.
+
+## Structure
+
+Use the documented Toggle with its required id and label. It is backed by a native checkbox; keep the label stable so the checked state conveys the change.
+
+## Responsive
+
+Keep the label visible or provide an accessible name for an icon-only control. Preserve an adequate target at narrow widths.
+
+## States
+
+Expose checked and unchecked state and show it visually without relying on color alone. Disabled state should remain distinguishable.
+
+## Verify
+
+Use Space to toggle, check the announced checkbox state and stable name, and test keyboard focus and disabled behavior.
+
+## Common mistake
+
+Styling a checkbox as a toggle button while hiding its checked state from the visual presentation.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (verified 2026-10-17)