Skip to content

[OUDS] fix(docs): Update aria-pressed usage for toggle buttons in chips documentation #3514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hannahiss wants to merge 8 commits into
base: ouds/main
Choose a base branch
from
+40 −40
Open

[OUDS] fix(docs): Update aria-pressed usage for toggle buttons in chips documentation #3514

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a68eb3d
fix(docs): Update aria-pressed usage for toggle buttons in chips docu…
hannahiss Apr 16, 2026
b0802e1
fix(docs): Update aria-pressed usage for toggle buttons in chips docu…
hannahiss Apr 16, 2026
11cb035
Merge branch 'ouds/main' into ouds/main-fix-toggle-aria-pressed
hannahiss Apr 16, 2026
e73bd26
Merge branch 'ouds/main' into ouds/main-fix-toggle-aria-pressed
hannahiss Apr 16, 2026
8134643
Update site/src/content/docs/components/chips.mdx
hannahiss Apr 27, 2026
52b183e
Merge branch 'ouds/main' into ouds/main-fix-toggle-aria-pressed
hannahiss Apr 28, 2026
800bab7
Merge branch 'ouds/main' into ouds/main-fix-toggle-aria-pressed
hannahiss Apr 28, 2026
e53416f
Merge remote-tracking branch 'origin/ouds/main-fix-toggle-aria-presse…
hannahiss Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions site/src/content/docs/components/chips.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,18 +154,18 @@ To have only one active filter chip at a time, use the radio button version. All

If you need to trigger a dynamic interaction directly on the page, `<button>` markup is also supported. All the rules explained in this page about filter chips apply on this variant as well.

The style is applied on `[aria-pressed="true"]` to enforce a good level of accessibility.

Make use of our [button JS plugin]([[docsref:/components/chips#javascript]]) or handle interactivity on your side, but make sure to use `aria-pressed`.
Use our [button JS plugin](#javascript) through `data-bs-toggle="button"` attribute, or handle interactivity on your side, but make sure to use `aria-pressed` to ensure a good level of accessibility:
- The presence of `aria-pressed` (`true` or `false`) is mandatory to indicate to assistive technologies that this is a toggle button.
- The selected styles of the filter chip rely on `aria-pressed="true"`.

<Example buttonLabel="filter chips using buttons" code={`<ul class="chips-container" aria-label="Filter by">
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Filter label using button 1
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Filter label using button 2
</button>
</li>
Expand Down Expand Up @@ -246,7 +246,7 @@ The following example shows every possible renderings depending on the filter ch
</label>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" disabled type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" disabled type="button">
Disabled unchecked filter
<svg aria-hidden="true">
<use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#heart-empty')}" />
Expand Down Expand Up @@ -281,7 +281,7 @@ The button plugin allows you to create simple on/off toggle buttons.

#### 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.
Copy link

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Suggested change
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.

Copilot uses AI. Check for mistakes.

#### Methods

Expand Down Expand Up @@ -446,37 +446,37 @@ By default when using `.chips-container` the chip list will scroll horizontally

<Example buttonLabel="overflowing suggestion chips" code={`<ul class="chips-container" aria-label="Filter by">
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
Comment on lines 453 to 455
Copy link

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copilot uses AI. Check for mistakes.
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
Expand All @@ -488,37 +488,37 @@ Add `.flex-wrap` on the `.chips-container` element to display a wrapping list of

<Example buttonLabel="wrapping suggestion chips" code={`<ul class="chips-container flex-wrap" aria-label="Filter by">
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
Comment on lines 495 to 497
Copy link

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
Expand All @@ -532,97 +532,97 @@ This layout combines wrapping and vertical scrolling, please note that a `style=

<Example buttonLabel="wrapping and overflowing suggestion chips" code={`<ul class="chips-container flex-wrap" style="max-height: 115px;" aria-label="Filter by">
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
Comment on lines 539 to 541
Copy link

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Member Author

@hannahiss hannahiss Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't add .active class because it is useless in this case

</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive active" aria-pressed="true" data-bs-toggle="button" type="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="true" type="button">
Quite long label
</button>
</li>
<li class="chip chip-filter">
<button class="chip-interactive" data-bs-toggle="button">
<button class="chip-interactive" data-bs-toggle="button" aria-pressed="false" type="button">
Quite long label
</button>
</li>
Expand Down
Loading