From a68eb3d3426e5567dcea5ac758f63c778a502d27 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 16 Apr 2026 15:03:42 +0200 Subject: [PATCH 1/4] fix(docs): Update aria-pressed usage for toggle buttons in chips documentation --- site/src/content/docs/components/chips.mdx | 80 +++++++++++----------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/site/src/content/docs/components/chips.mdx b/site/src/content/docs/components/chips.mdx index fac5cbaa31..7257e4de09 100644 --- a/site/src/content/docs/components/chips.mdx +++ b/site/src/content/docs/components/chips.mdx @@ -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, `
  • -
    • @@ -246,7 +246,7 @@ The following example shows every possible renderings depending on the filter ch
  • -
  • -
  • -
  • -
  • -
  • -
  • -
    • @@ -492,37 +492,37 @@ Add `.flex-wrap` on the `.chips-container` element to display a wrapping list of
  • -
  • -
  • -
  • -
  • -
  • -
  • -
    • @@ -536,97 +536,97 @@ This layout combines wrapping and vertical scrolling, please note that a `style=
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
    • From b0802e1a35858979c86500dee3d956d3de234eec Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 16 Apr 2026 15:12:14 +0200 Subject: [PATCH 2/4] fix(docs): Update aria-pressed usage for toggle buttons in chips documentation --- site/src/content/docs/components/chips.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/chips.mdx b/site/src/content/docs/components/chips.mdx index 7257e4de09..44905af53e 100644 --- a/site/src/content/docs/components/chips.mdx +++ b/site/src/content/docs/components/chips.mdx @@ -154,7 +154,7 @@ 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, `
  • -
    • From 65cb5dd03577340133653078c65630e017ae8d25 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 5 May 2026 09:53:06 +0200 Subject: [PATCH 4/4] Update js to new version based first on aria-pressed and then on active class presence and removing active class (old pattern) --- js/src/button.js | 24 ++++++++++++++++++++++-- scss/_buttons.scss | 6 ++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/js/src/button.js b/js/src/button.js index a797f5050d..ade15a961d 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -34,8 +34,28 @@ class Button extends BaseComponent { // Public toggle() { - // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method - this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE)) + // OUDS mod: Determine current pressed state from aria-pressed attribute if present or active class as a fallback (deprecated pattern) + const ariaPressed = this._element.getAttribute('aria-pressed') + const hasActiveClass = this._element.classList.contains(CLASS_NAME_ACTIVE) + + // Determine new pressed state + let newPressedState + // eslint-disable-next-line unicorn/prefer-ternary + if (ariaPressed === 'true' || ariaPressed === 'false') { + // Toggle existing aria-pressed value + newPressedState = ariaPressed !== 'true' + } else { + // Convert active class presence to aria-pressed state + newPressedState = !hasActiveClass + } + + // Update aria-pressed attribute + this._element.setAttribute('aria-pressed', String(newPressedState)) + + // Remove active class (deprecated pattern) + if (hasActiveClass) { + this._element.classList.remove(CLASS_NAME_ACTIVE) + } } // Static diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 35d3a02337..c9c7c552b5 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -87,8 +87,7 @@ &:focus-visible, &.loading-indeterminate, &.loading-determinate, - &:active, - &.active { + &:active { padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-interaction-border-width)); border-width: var(--#{$prefix}btn-interaction-border-width); } @@ -118,8 +117,7 @@ // OUDS mod: no .btn-check:checked + &:active, // OUDS mod: no .btn-check:checked + &, // OUDS mod: no &.show, - &:active, - &.active { + &:active { color: var(--#{$prefix}btn-active-color); background-color: var(--#{$prefix}btn-active-bg); // Remove CSS gradients if they're enabled