Skip to content

Commit 27502fe

Browse files
committed
docs(Stepper): update accessibility section
1 parent e815779 commit 27502fe

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

docs/content/forms/stepper.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -310,8 +310,6 @@ Use a Linear Bootstrap Stepper when you need a guided and controlled experience,
310310

311311
This ensures data integrity and improves the user experience by keeping the flow focused.
312312

313-
---
314-
315313
## Non-linear Stepper (Optional Steps)
316314

317315
You can configure the Stepper Component to behave as non-linear, allowing users to jump freely between steps without validation restrictions. Add `data-coreui-linear="false"` or set `linear: false` to allow non-sequential navigation.
@@ -373,13 +371,22 @@ The CoreUI Stepper Component is built with accessibility in mind:
373371
- Each step button is assigned proper ARIA roles (`role="tab"`) and attributes like `aria-selected`, `aria-controls`, and `tabindex`.
374372
- Step contents (`stepper-pane`) use `role="tabpanel"` and are properly linked to their trigger buttons.
375373
- Live updates are announced to screen readers with `aria-live="polite"`.
376-
- Keyboard navigation is fully supported:
377-
- `ArrowLeft` / `ArrowUp`: move focus to previous step
378-
- `ArrowRight` / `ArrowDown`: move focus to next step
379-
- `Home` / `End`: jump focus to first or last step
374+
- Keyboard navigation is fully supported
380375

381376
Thanks to these features, your form wizard will be fully compliant with WCAG and modern accessibility standards without additional work.
382377

378+
### Keyboard Support
379+
380+
The Stepper component supports comprehensive keyboard navigation out of the box:
381+
382+
{{< bs-table >}}
383+
| Key | Function |
384+
| --- | --- |
385+
| <kbd>ArrowLeft</kbd> / <kbd>ArrowUp</kbd> | Moves focus to previous step. |
386+
| <kbd>ArrowRight</kbd> / <kbd>ArrowDown</kbd> | Moves focus to next step. |
387+
| <kbd>Home</kbd> / <kbd>End</kbd> | Jumps focus to first or last step |
388+
{{< /bs-table >}}
389+
383390
## Usage
384391

385392
{{< bootstrap-compatibility >}}

0 commit comments

Comments
 (0)