[OUDS] fix(docs): Update aria-pressed usage for toggle buttons in chips documentation#3514
[OUDS] fix(docs): Update aria-pressed usage for toggle buttons in chips documentation#3514
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
There was a problem hiding this comment.
Pull request overview
Updates the Chips component documentation to reflect correct ARIA usage for toggle-style filter chips, focusing on aria-pressed requirements when using the Button JS plugin.
Changes:
- Update “Using buttons” guidance to require explicit
aria-pressed="true|false"for toggle buttons. - Add
aria-pressed="false"to initial (unpressed) button examples. - Rewrite the Button plugin “Toggle states” documentation section to describe expected ARIA behavior.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <li class="chip chip-filter"> | ||
| <button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button"> | ||
| <button class="chip-interactive" data-bs-toggle="button" aria-pressed="true"> | ||
| Quite long label |
There was a problem hiding this comment.
Same issue again in this block: aria-pressed="true" is used without the .active class. For pre-selected toggle buttons, the examples should either include .active or the docs should explain (and the plugin should support) initializing state from aria-pressed.
| #### Toggle states | ||
|
|
||
| Add `data-bs-toggle="button"` to toggle a button’s `active` state. If you’re pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. | ||
| Adding the attribute `data-bs-toggle="button"` enables the button JS plugin. Upon initialization, manually add `aria-pressed="false"` or `aria-pressed="true"` to indicate assistive technologies this is a toggle button, and its current state. When the state changes, the plugin will automatically update the `aria-pressed` value. |
There was a problem hiding this comment.
The docs say to “manually add aria-pressed … upon initialization” and that the plugin will update it when the state changes, but the current button plugin only syncs aria-pressed when toggle() is invoked (on click) and tracks state via the .active class. Please adjust the wording to reflect actual behavior and document that initial pressed state must keep .active and aria-pressed in sync (e.g., .active when aria-pressed="true", no .active when false).
| Adding the attribute `data-bs-toggle="button"` enables the button JS plugin. Upon initialization, manually add `aria-pressed="false"` or `aria-pressed="true"` to indicate assistive technologies this is a toggle button, and its current state. When the state changes, the plugin will automatically update the `aria-pressed` value. | |
| Adding the attribute `data-bs-toggle="button"` enables the button JS plugin. Set the initial pressed state manually and keep the `.active` class and `aria-pressed` attribute in sync: use `.active` with `aria-pressed="true"` for a pressed button, and no `.active` class with `aria-pressed="false"` for an unpressed button. When the plugin toggles the button state, it will automatically update the `aria-pressed` value. |
| <li class="chip chip-filter"> | ||
| <button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button"> | ||
| <button class="chip-interactive" data-bs-toggle="button" aria-pressed="true"> | ||
| Quite long label |
There was a problem hiding this comment.
In this example, aria-pressed="true" is shown without the .active class. The button plugin toggles .active and then sets aria-pressed from the result, so starting with aria-pressed="true" but no .active leaves the JS/plugin state out of sync (first click won’t visually/semantically toggle). Update the examples so pressed buttons include .active (or ensure the plugin initializes from aria-pressed if that’s now supported).
| <li class="chip chip-filter"> | ||
| <button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button"> | ||
| <button class="chip-interactive" data-bs-toggle="button" aria-pressed="true"> | ||
| Quite long label |
There was a problem hiding this comment.
Same issue here: aria-pressed="true" is used without .active, which is inconsistent with how the button plugin derives aria-pressed (it toggles .active and then mirrors it). Please keep .active and aria-pressed consistent in all pre-toggled examples.
| </li> | ||
| <li class="chip chip-filter"> | ||
| <button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button"> | ||
| <button class="chip-interactive active" data-bs-toggle="button" aria-pressed="true"> |
There was a problem hiding this comment.
| <button class="chip-interactive active" data-bs-toggle="button" aria-pressed="true"> | |
| <button class="chip-interactive" data-bs-toggle="button" aria-pressed="true"> |
boosted-bot
moved this from Need Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
Related issues
Closes #3509
Description
aria-pressed="false"at initialization of the button JS plugin when the button is not pressed.activeclass in chips' docs since it is not used anymoreChecklists
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews