From 0545f1f31803831c9a9bcc5e83ae7cd4dba29923 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 27 May 2026 12:45:48 +0200
Subject: [PATCH 01/18] fix(grid): Add aria-selected attribute handling for
 single select rows

---
 packages/components/grid/src/grid.spec.ts | 71 +++++++++++++++++++++++
 packages/components/grid/src/grid.ts      | 16 ++++-
 2 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index cd0e5fc356..089247f05f 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -105,6 +105,14 @@ describe('sl-grid', () => {
 
       expect(rowIndices).to.deep.equal(['1', '2']);
     });
+
+    it('should not have aria-selected when selects is not set', () => {
+      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
+
+      rows.forEach(row => {
+        expect(row).not.to.have.attribute('aria-selected');
+      });
+    });
   });
 
   describe('multiple select', () => {
@@ -517,6 +525,42 @@ describe('sl-grid', () => {
 
       expect(el.dataSource?.selects).to.equal('single');
     });
+
+    it('should have aria-selected="false" on all rows by default', () => {
+      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
+
+      rows.forEach(row => {
+        expect(row).to.have.attribute('aria-selected', 'false');
+      });
+    });
+
+    it('should set aria-selected="true" on the selected row', async () => {
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row).to.have.attribute('aria-selected', 'true');
+    });
+
+    it('should set aria-selected="false" on deselected rows when selection changes', async () => {
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:nth-of-type(2) td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const firstRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type'),
+        secondRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:nth-of-type(2)');
+
+      expect(firstRow).to.have.attribute('aria-selected', 'false');
+      expect(secondRow).to.have.attribute('aria-selected', 'true');
+    });
   });
 
   describe('row action activate', () => {
@@ -585,6 +629,33 @@ describe('sl-grid', () => {
       expect(onActiveRowChange).to.have.been.calledOnce;
       expect(onActiveRowChange.firstCall.args[0].detail).to.deep.equal(el.items!.at(1));
     });
+
+    it('should have aria-selected="false" on all rows by default', () => {
+      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
+
+      rows.forEach(row => {
+        expect(row).to.have.attribute('aria-selected', 'false');
+      });
+    });
+
+    it('should set aria-selected="true" on the active row', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+      expect(row).to.have.attribute('aria-selected', 'true');
+    });
+
+    it('should set aria-selected="false" when the row is deactivated', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+      expect(row).to.have.attribute('aria-selected', 'false');
+    });
   });
 
   describe('row action select', () => {
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index 89498877b3..4fec0ed052 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -594,15 +594,26 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
   renderItemRow(item: ListDataSourceDataItem<T>, index: number): TemplateResult {
     const rows = this.#headerRows,
+      active = this.activeRow === item.data,
       selected = this.dataSource?.isSelected(item),
       parts = [
         'row',
         index % 2 === 0 ? 'odd' : 'even',
         ...(selected ? ['selected'] : []),
-        ...(this.activeRow === item.data ? ['active'] : []),
+        ...(active ? ['active'] : []),
         ...(this.#dragItem === item ? ['dragging'] : []),
         ...(this.itemParts?.(item.data)?.split(' ') || [])
-      ];
+      ],
+      ariaSelected =
+        this.selects === 'single'
+          ? selected
+            ? 'true'
+            : 'false'
+          : this.rowAction === 'activate'
+            ? active
+              ? 'true'
+              : 'false'
+            : nothing;
 
     return html`
       <tr
@@ -613,6 +624,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
         @dragend=${(event: DragEvent) => this.#onDragEnd(event, item)}
         @drop=${(event: DragEvent) => this.#onDrop(event, item)}
         aria-rowindex=${index + 1}
+        aria-selected=${ariaSelected}
         index=${index}
         part=${parts.join(' ')}>
         ${rows[rows.length - 1].map(col => col.renderData(item))}

From 73f7e268af4a5550d88a5647e6560b1a64247dc6 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 28 May 2026 07:10:04 +0200
Subject: [PATCH 02/18] Changes after Copilot review

---
 packages/components/grid/src/grid.spec.ts | 39 +++++++++++++++++++++++
 packages/components/grid/src/grid.ts      |  2 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index 089247f05f..96ffd2a796 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -563,6 +563,45 @@ describe('sl-grid', () => {
     });
   });
 
+  describe('single select via data source', () => {
+    beforeEach(async () => {
+      const ds = new ArrayListDataSource(
+        [
+          { firstName: 'John', lastName: 'Doe' },
+          { firstName: 'Jane', lastName: 'Smith' }
+        ],
+        { selects: 'single' }
+      );
+
+      el = await fixture(html`
+        <sl-grid .dataSource=${ds} row-action="select">
+          <sl-grid-column path="firstName"></sl-grid-column>
+          <sl-grid-column path="lastName"></sl-grid-column>
+        </sl-grid>
+      `);
+
+      await waitForGridToRenderData(el);
+    });
+
+    it('should have aria-selected="false" on all rows by default', () => {
+      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
+
+      rows.forEach(row => {
+        expect(row).to.have.attribute('aria-selected', 'false');
+      });
+    });
+
+    it('should set aria-selected="true" on the selected row', async () => {
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row).to.have.attribute('aria-selected', 'true');
+    });
+  });
+
   describe('row action activate', () => {
     beforeEach(async () => {
       el = await fixture(html`
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index 4fec0ed052..6721daf1cb 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -605,7 +605,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
         ...(this.itemParts?.(item.data)?.split(' ') || [])
       ],
       ariaSelected =
-        this.selects === 'single'
+        (this.dataSource?.selects ?? this.selects) === 'single'
           ? selected
             ? 'true'
             : 'false'

From b8dd60b51dddc9447fb0afa0bcd91774fea7b75f Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 28 May 2026 10:11:25 +0200
Subject: [PATCH 03/18] remove unnecessary formatting changes

---
 packages/components/button/CHANGELOG.md      | 5 +++++
 packages/components/combobox/CHANGELOG.md    | 5 +++++
 packages/components/form/CHANGELOG.md        | 1 +
 packages/components/grid/CHANGELOG.md        | 6 ++++++
 packages/components/listbox/CHANGELOG.md     | 1 +
 packages/components/menu/CHANGELOG.md        | 2 ++
 packages/components/paginator/CHANGELOG.md   | 3 +++
 packages/components/shared/CHANGELOG.md      | 6 ++++++
 packages/components/text-field/CHANGELOG.md  | 2 ++
 packages/themes/bingel-dc/CHANGELOG.md       | 9 +++++++++
 packages/themes/bingel-int/CHANGELOG.md      | 9 +++++++++
 packages/themes/clickedu/CHANGELOG.md        | 9 +++++++++
 packages/themes/editorial-suite/CHANGELOG.md | 8 ++++++++
 packages/themes/itslearning/CHANGELOG.md     | 9 +++++++++
 packages/themes/kampus/CHANGELOG.md          | 9 +++++++++
 packages/themes/magister/CHANGELOG.md        | 9 +++++++++
 packages/themes/max/CHANGELOG.md             | 9 +++++++++
 packages/themes/my-digital-book/CHANGELOG.md | 8 ++++++++
 packages/themes/myvanin_onhold/CHANGELOG.md  | 4 ++++
 packages/themes/neon/CHANGELOG.md            | 9 +++++++++
 packages/themes/sanoma-learning/CHANGELOG.md | 8 ++++++++
 packages/themes/teas/CHANGELOG.md            | 9 +++++++++
 packages/themes/tig/CHANGELOG.md             | 2 ++
 23 files changed, 142 insertions(+)

diff --git a/packages/components/button/CHANGELOG.md b/packages/components/button/CHANGELOG.md
index e4b840d17d..dc65913741 100644
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@@ -9,10 +9,12 @@
 ### Patch Changes
 
 - [#3299](https://github.com/sl-design-system/components/pull/3299) [`78e7333`](https://github.com/sl-design-system/components/commit/78e733338fd67ef59797b3e02b22907fe0f5c638) - Minor style fixes:
+
   - fix icon-only size regression by using `box-sizing: content-box`
   - fix `<button>` growing larger than the host `<sl-button>`
 
 - [#3360](https://github.com/sl-design-system/components/pull/3360) [`7163d4e`](https://github.com/sl-design-system/components/commit/7163d4ee4cb47e4db591aceba2e3978f8f31b2c7) - Styling fixes:
+
   - Fix WebKit bug where the aspect-ratio of the inner button is ignored
   - Fix bug where the inner button doesn't grow with the host element
 
@@ -32,6 +34,7 @@
 ### Major Changes
 
 - [#3139](https://github.com/sl-design-system/components/pull/3139) [`50590de`](https://github.com/sl-design-system/components/commit/50590de476ff108cc28b865dbc96e3ca48399538) - Breaking changes:
+
   - The component now renders a native `<button>` inside the shadow DOM, changing the DOM structure
   - The `icon-only` attribute and `iconOnly` property have been removed in favor of the `:state(icon-only)` CSS custom state
 
@@ -86,6 +89,7 @@
 ### Minor Changes
 
 - [#2646](https://github.com/sl-design-system/components/pull/2646) [`f025c0f`](https://github.com/sl-design-system/components/commit/f025c0f3cbb83b72c80563e9d989402608add193) - Various improvements:
+
   - Fix missing inverted + disabled styling
   - Add support for `aria-disabled="true"`
 
@@ -142,6 +146,7 @@
 ### Minor Changes
 
 - [#1675](https://github.com/sl-design-system/components/pull/1675) [`389d0e2`](https://github.com/sl-design-system/components/commit/389d0e2a982dd40b4e3a04cf3b1d8b34204236a0) - Button improvements:
+
   - Added a new `shape` property that defaults to `square` but also accepts `pill` for rounded corners
   - Added a new `inverted` variant, to be used on dark/light background (depending on light/dark mode)
   - Removed default values of `fill`, `size`, `type` and `variant` properties
diff --git a/packages/components/combobox/CHANGELOG.md b/packages/components/combobox/CHANGELOG.md
index 0e43be126a..d5f11aba5f 100644
--- a/packages/components/combobox/CHANGELOG.md
+++ b/packages/components/combobox/CHANGELOG.md
@@ -20,9 +20,11 @@
 ### Patch Changes
 
 - [#3211](https://github.com/sl-design-system/components/pull/3211) [`20a1178`](https://github.com/sl-design-system/components/commit/20a1178f0f1548bd083df7d337ecba443daf579f) - Functional changes:
+
   - The popover opens when you click in the combobox, no longer when you enter the combobox with keyboard navigation.
 
   Accessibility improvements:
+
   - Forward ARIA attributes (`aria-label`, `aria-describedby`, `aria-labelledby`) from host element to the input element for proper screen reader support
   - Automatically associate label with input via `aria-labelledby` when a label is present
 
@@ -173,6 +175,7 @@
   ```
 
   You can customize the rendering of each option by using:
+
   - `optionLabelPath` to specify the path to the label in each option object
   - `optionValuePath` to specify the path to the value in each option object
 
@@ -182,6 +185,7 @@
   the options in both scenarios by using the `sl-option { ... }` selector.
 
 - [#1642](https://github.com/sl-design-system/components/pull/1642) [`cef2371`](https://github.com/sl-design-system/components/commit/cef2371d5868439edbba8156bf38c167b72f0f39) - Various combobox fixes:
+
   - Add `aria-owns` for linking the input to the listbox
   - Add `aria-posinset` and `aria-setsize` to the listbox options for virtual lists
   - Add focus style to tags
@@ -204,6 +208,7 @@
 ### Patch Changes
 
 - [#1599](https://github.com/sl-design-system/components/pull/1599) [`4714b36`](https://github.com/sl-design-system/components/commit/4714b36f1387d4d1731a310b621caf5a33be105b) - Various a11y related fixes/improvements:
+
   - The label was associated with the `<sl-combobox>` element instead of the `<input>` element
   - `aria-selected="false"` was missing on the non-selected options
   - `aria-multiselectable="true"` was missing on the listbox when the multiple property is set
diff --git a/packages/components/form/CHANGELOG.md b/packages/components/form/CHANGELOG.md
index 8300faeb7f..5aaff3415d 100644
--- a/packages/components/form/CHANGELOG.md
+++ b/packages/components/form/CHANGELOG.md
@@ -16,6 +16,7 @@
 ### Minor Changes
 
 - [#3248](https://github.com/sl-design-system/components/pull/3248) [`fc60898`](https://github.com/sl-design-system/components/commit/fc60898ea3c7b5b234a13c6bf157e89528f3a11f) - Standardized warning and error icons:
+
   - Changed `warning` icons from `octagon-exclamation-solid` to `triangle-exclamation-solid` in Callout, Inline message, and Progress bar.
   - Changed `circle-exclamation-solid` to `triangle-exclamation-solid` in validation messages in the Form field.
   - Changed `error/danger` icons from `diamond-exclamation-solid` or `octagon-exclamation-solid` to the new `octagon-xmark-solid` icon in Callout, Inline message, and Progress bar. Make sure to update your theme if you update any of these components.
diff --git a/packages/components/grid/CHANGELOG.md b/packages/components/grid/CHANGELOG.md
index f3e17de222..2b05594182 100644
--- a/packages/components/grid/CHANGELOG.md
+++ b/packages/components/grid/CHANGELOG.md
@@ -201,6 +201,7 @@
 ### Minor Changes
 
 - [#2034](https://github.com/sl-design-system/components/pull/2034) [`1072075`](https://github.com/sl-design-system/components/commit/1072075e3f1b5f0bf8b07dc1f89fd39b9f7103d0) - Big improvements:
+
   - New visual styles throughout all components
   - Refactored to use the new `ListDataSource` class and view model types
   - Removed `SelectionController` since that logic is now part of `ListDataSource`
@@ -223,6 +224,7 @@
   This change removes the `activatable-row` property and instead leaves it to the user to set the `activeRow` property on the `sl-grid` component. The examples in Storybook now also use a button with an avatar to activate the row, which is more accessible than using a checkbox. This fixes the issue we had before where we could not find a solution how to make the row activatable with the keyboard, while also keeping the checkbox for selection. Now, the row can be activated with the keyboard by focusing the button and pressing Enter or Space. And at the same time, the checkbox can still be used for selection.
 
 - [#2024](https://github.com/sl-design-system/components/pull/2024) [`a343e29`](https://github.com/sl-design-system/components/commit/a343e298d6b65966e04b3fbfc3598305a29bf1cc) - Grid improvements:
+
   - Add "Cancel selection" button to the bulk action toolbar
   - Add `column` argument to `GridColumnHeaderRenderer` type
   - Fix missing aria-label on a selection column checkbox
@@ -246,6 +248,7 @@
 ### Patch Changes
 
 - [#2077](https://github.com/sl-design-system/components/pull/2077) [`778e8a1`](https://github.com/sl-design-system/components/commit/778e8a1ae5dc7908e5c000a620b8143883c75a91) - - Adds option to have no skip table links
+
   - Fixes issue for Safari (an other browsers that don't support native anchor positioning) where to "Skip to start of table" link was positioned incorrectly
 
 - [#2072](https://github.com/sl-design-system/components/pull/2072) [`77b348d`](https://github.com/sl-design-system/components/commit/77b348d19a4869f9242d8ea1c70d32d1e6d04212) - Fix regression with basic drag and drop of rows within grid
@@ -346,6 +349,7 @@
 - [#1791](https://github.com/sl-design-system/components/pull/1791) [`133b883`](https://github.com/sl-design-system/components/commit/133b883234d911dabe37bd3c8acef26afea20fe9) - Replace `--sl-size-borderWidth-subtle` with `--sl-size-borderWidth-default`
 
 - [#1653](https://github.com/sl-design-system/components/pull/1653) [`f15d75c`](https://github.com/sl-design-system/components/commit/f15d75c6c3765b797f0bed57c5d1f2855cab4f7e) - Improve horizontal scrolling experience:
+
   - Add shadows to the left and right of the grid when it is scrollable
   - Add the new `<sl-scrollbar>` when the grid is horizontally scrollable
   - Make sure the scrollbar is always visible (sticky at the bottom of the grid)
@@ -371,6 +375,7 @@
 - [#1609](https://github.com/sl-design-system/components/pull/1609) [`515e2fb`](https://github.com/sl-design-system/components/commit/515e2fbbda7ecee92392b8ddf9f98c335fe32cf6) - Added tokens for grid
 
 - [#1616](https://github.com/sl-design-system/components/pull/1616) [`b1e3b74`](https://github.com/sl-design-system/components/commit/b1e3b741e78400e3755ddaa0c5c4fdeed2e3f960) - Improved accessibilty of the table;
+
   - Added aria-rowindex and aria-rowcount;
   - Improved keyboardnavigation, including skip table links
   - Changed the way selecting works; active row by clicking on the entire row and selecting a row by checking the checkbox
@@ -387,6 +392,7 @@
 
 - [#1693](https://github.com/sl-design-system/components/pull/1693) [`4e57f9c`](https://github.com/sl-design-system/components/commit/4e57f9c60835a07db45f74fde73a3bf13b6abe51) - Refactor existing data sources into list specific datasources, clearing
   the way to add `TreeDataSource` in the `@sl-design-system/tree` package.
+
   - The base `DataSource` class has support for sorting and filtering
   - Grouping and pagination has been moved to the `ListDataSource` class
   - `ArrayDataSource` and `FetchDataSource` have been renamed to `ArrayListDataSource` and `FetchListDataSource` respectively
diff --git a/packages/components/listbox/CHANGELOG.md b/packages/components/listbox/CHANGELOG.md
index 4cac633f1b..44194657af 100644
--- a/packages/components/listbox/CHANGELOG.md
+++ b/packages/components/listbox/CHANGELOG.md
@@ -62,6 +62,7 @@
 ### Patch Changes
 
 - [#1632](https://github.com/sl-design-system/components/pull/1632) [`e68df34`](https://github.com/sl-design-system/components/commit/e68df344917a8d0bdc6a4c92f59079a247c6e7a9) - Add ability to render grouped items using lit-virtualizer:
+
   - New `optionGroupPath` property to specify the path to the group name in the option object
   - New `<sl-option-group-header>` component to render the group header
   - Add `items` property for advanced customization of how options are rendered (used in combobox)
diff --git a/packages/components/menu/CHANGELOG.md b/packages/components/menu/CHANGELOG.md
index 8ff8ddb3af..250413032b 100644
--- a/packages/components/menu/CHANGELOG.md
+++ b/packages/components/menu/CHANGELOG.md
@@ -45,6 +45,7 @@
 - [#3001](https://github.com/sl-design-system/components/pull/3001) [`a7ac909`](https://github.com/sl-design-system/components/commit/a7ac90987881881bd0cb916c583e68c785b52622) - Improves accessibility of menu-groups with headers
 
 - [#3022](https://github.com/sl-design-system/components/pull/3022) [`a4a0c23`](https://github.com/sl-design-system/components/commit/a4a0c23a5341a2026c23e6e7fdf05cfdd44dc16c) - - `MenuButton` and `Button` now correctly block click/keyboard activation when `aria-disabled` is set, but remain focusable for improved accessibility and tooltip support.
+
   - Standalone `MenuButton` continues to use native `disabled` to remain non-focusable, while support for `aria-disabled` focusability has been improved.
 
 - [#3034](https://github.com/sl-design-system/components/pull/3034) [`fd4a0d7`](https://github.com/sl-design-system/components/commit/fd4a0d79b4c0d9a1438b437bc7a1122f03d08c11) - Changed styling so the hover and active state have an indicator. This makes it more accessible because we don't rely on only a subtle change in the background color.
@@ -153,6 +154,7 @@
 ### Patch Changes
 
 - [#1777](https://github.com/sl-design-system/components/pull/1777) [`67f5b81`](https://github.com/sl-design-system/components/commit/67f5b810558d124289f26e3cc3fb2c59da97bb5f) - Fixed several accessibility issues;
+
   - Improved VoiceOver in support Chrome
   - Fixed keyboard navigation in submenu
   - Applied new tokens to menu and menu item
diff --git a/packages/components/paginator/CHANGELOG.md b/packages/components/paginator/CHANGELOG.md
index 621f450c71..4e48466d19 100644
--- a/packages/components/paginator/CHANGELOG.md
+++ b/packages/components/paginator/CHANGELOG.md
@@ -145,12 +145,14 @@
 ### Patch Changes
 
 - [#1804](https://github.com/sl-design-system/components/pull/1804) [`7a0b48e`](https://github.com/sl-design-system/components/commit/7a0b48e981ad4c7cc1a34022625e6ae3ee55c977) - - Applied new tokens to the paginator,
+
   - Paginator component changes:
     - `size` property no longer controls the width of the layout of the entire paginator, but only the size of the components within the paginator,
     - new `width` property that controls the width of the layout of the entire paginator,
     - new `emphasis` property.
 
 - [#1690](https://github.com/sl-design-system/components/pull/1690) [`1a9604e`](https://github.com/sl-design-system/components/commit/1a9604e1fc70a6382a3545dafee527d7d674179d) - Various improvements:
+
   - Add missing dependencies (announcer & form)
   - Rename `<sl-paginator-size>` to `<sl-paginator-page-size>`
   - Remove `pageSizes` property from `<sl-paginator>`
@@ -167,6 +169,7 @@
 
 - [#1693](https://github.com/sl-design-system/components/pull/1693) [`4e57f9c`](https://github.com/sl-design-system/components/commit/4e57f9c60835a07db45f74fde73a3bf13b6abe51) - Refactor existing data sources into list specific datasources, clearing
   the way to add `TreeDataSource` in the `@sl-design-system/tree` package.
+
   - The base `DataSource` class has support for sorting and filtering
   - Grouping and pagination has been moved to the `ListDataSource` class
   - `ArrayDataSource` and `FetchDataSource` have been renamed to `ArrayListDataSource` and `FetchListDataSource` respectively
diff --git a/packages/components/shared/CHANGELOG.md b/packages/components/shared/CHANGELOG.md
index a446aac705..a50d7049d3 100644
--- a/packages/components/shared/CHANGELOG.md
+++ b/packages/components/shared/CHANGELOG.md
@@ -11,6 +11,7 @@
 ### Minor Changes
 
 - [#3139](https://github.com/sl-design-system/components/pull/3139) [`50590de`](https://github.com/sl-design-system/components/commit/50590de476ff108cc28b865dbc96e3ca48399538) - Add `ForwardAriaMixin` that forwards ARIA attributes from a custom element host to a target element inside its shadow DOM.
+
   - **Reference attributes** (`aria-labelledby`, `aria-describedby`, `aria-controls`, etc.) are resolved to DOM elements and set via element reference properties (e.g. `ariaLabelledByElements`) on the target.
   - **Value attributes** (`aria-label`, `aria-disabled`, etc.) are forwarded as regular attributes on the target.
   - **`ariaDisabled` property** is explicitly intercepted: setting it to `'true'` sets `aria-disabled="true"` on the target; setting it to `null` removes `aria-disabled` from the target. This fixes a bug where the `MutationObserver` path could not propagate attribute _removal_, leaving the target in a stale disabled state.
@@ -20,6 +21,7 @@
   `ForwardAriaMixin` is the successor to `ObserveAttributesMixin`; `ObserveAttributesMixin` remains exported for backwards compatibility and may be removed in a future release.
 
   Also add helper functions exported from `@sl-design-system/shared/helpers/forward-aria.js` for inspecting the accessible state of elements that use `ForwardAriaMixin`:
+
   - `getForwardedAccessibleName(host)` — resolves the accessible name via `aria-labelledby` → `aria-label` → slotted text content
   - `getForwardedDescription(host)` — resolves the accessible description via `aria-describedby` → `aria-description`
   - `isForwardedDisabled(host)` — returns `false`, `true`, or `'aria'`
@@ -27,6 +29,7 @@
   - `getForwardedAriaProperty(host, name)` — reads a forwarded ARIA element-reference property from the forwarding target
 
 - [#3142](https://github.com/sl-design-system/components/pull/3142) [`dd96d1b`](https://github.com/sl-design-system/components/commit/dd96d1b88f030a7b4a81b51d77a8461b5692909c) - Improved `MediaController` (used in `sl-dialog`):
+
   - Added `device` getter to query the current breakpoint
   - Added `MediaControllerConfig` with an `onChange` callback that fires when the viewport crosses a breakpoint
   - Added `MediaChangeEvent` interface with `previous` and `current` device info
@@ -64,6 +67,7 @@
 ### Minor Changes
 
 - [#2636](https://github.com/sl-design-system/components/pull/2636) [`e3eb2de`](https://github.com/sl-design-system/components/commit/e3eb2de61e86203aab22cd55bbad4cc058e66a2d) - New utilities:
+
   - `dateListConverter` added
   - `NewFocusGroupController` added
 
@@ -128,6 +132,7 @@
 - [#1836](https://github.com/sl-design-system/components/pull/1836) [`ab33cc8`](https://github.com/sl-design-system/components/commit/ab33cc86cc01480fb20206be689f9bbdb62bf0ad) - - Remove the `FocusTrapController` and related `focus-trap` dependency
 
   This was only used within `<sl-dialog>`. That component no longer uses this functionality. Because this was internal API, it's not seen as a breaking change.
+
   - Add new `MediaController` class to help manage media queries
 
 ## 0.6.0
@@ -227,6 +232,7 @@
 ### Patch Changes
 
 - [#1328](https://github.com/sl-design-system/components/pull/1328) [`a705c3f`](https://github.com/sl-design-system/components/commit/a705c3f7034207b19a10a819bccd85a3347e0204) - Various fixes:
+
   - Make it possible to close a tooltip with Escape key
   - Fix issue where the tooltip was broken after first show
   - Fix showing shared tooltip
diff --git a/packages/components/text-field/CHANGELOG.md b/packages/components/text-field/CHANGELOG.md
index 692de98346..0565a546f2 100644
--- a/packages/components/text-field/CHANGELOG.md
+++ b/packages/components/text-field/CHANGELOG.md
@@ -44,6 +44,7 @@
 - [#2547](https://github.com/sl-design-system/components/pull/2547) [`8f29a45`](https://github.com/sl-design-system/components/commit/8f29a4527d8fbe2bace08e32e31ba93aee0baf68) - Bump patch version of `@open-wc/scoped-elements` peer dependency
 
 - [#2086](https://github.com/sl-design-system/components/pull/2086) [`0b48907`](https://github.com/sl-design-system/components/commit/0b48907b54289cbfd37266d870a42baba071ba1a) - - Refactor internals to help fix `<sl-number-field>` behavior
+
   - Adding warning when `type="number"` is used that points to `<sl-number-field>`
 
 - [#2561](https://github.com/sl-design-system/components/pull/2561) [`0e2e426`](https://github.com/sl-design-system/components/commit/0e2e426041997a299f3e35bcde499909d62f7ce9) - Remove duplication of `observedAttributes` from the components and into the `ObserveAttributesMixin`
@@ -118,6 +119,7 @@
 ### Patch Changes
 
 - [#1785](https://github.com/sl-design-system/components/pull/1785) [`4e80437`](https://github.com/sl-design-system/components/commit/4e804374c3a02e88b04e4c1df662967740461f7c) - - Styling buttons improvements,
+
   - Formatting value changes - using `formattedValue` instead of `formatValue`.
 
 - [#1805](https://github.com/sl-design-system/components/pull/1805) [`94e2a7b`](https://github.com/sl-design-system/components/commit/94e2a7bf1ccaaa9d547654603554cc6bdfdf66fb) - Fix able to submit a parent form using the enter key in readonly mode
diff --git a/packages/themes/bingel-dc/CHANGELOG.md b/packages/themes/bingel-dc/CHANGELOG.md
index b2ad320c2c..8e00e925d3 100644
--- a/packages/themes/bingel-dc/CHANGELOG.md
+++ b/packages/themes/bingel-dc/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -145,9 +147,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -156,6 +160,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -199,6 +204,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -213,6 +219,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -258,6 +265,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -274,6 +282,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/bingel-int/CHANGELOG.md b/packages/themes/bingel-int/CHANGELOG.md
index 0a9adbbc36..e0dedde146 100644
--- a/packages/themes/bingel-int/CHANGELOG.md
+++ b/packages/themes/bingel-int/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -145,9 +147,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -156,6 +160,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -197,6 +202,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -211,6 +217,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -256,6 +263,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -272,6 +280,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/clickedu/CHANGELOG.md b/packages/themes/clickedu/CHANGELOG.md
index b65ed17eb6..5c2260a3be 100644
--- a/packages/themes/clickedu/CHANGELOG.md
+++ b/packages/themes/clickedu/CHANGELOG.md
@@ -27,12 +27,15 @@
 ### Patch Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - - adjusted color.border.accent.grey.bold value from {grey.200} to {grey.300} for increased border visibility.
+
   - updated color.blanket.plain transparency from {opacity.moderate} to {opacity.subtle} to align with updated design requirements for dialog overlays.
 
 - [#2982](https://github.com/sl-design-system/components/pull/2982) [`5784b96`](https://github.com/sl-design-system/components/commit/5784b9682e183391f842b10f1d194ceb137606f0) - Updated global.css so we have the opportunity to overwrite the link color from a component.
@@ -150,9 +153,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -161,6 +166,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -210,6 +216,7 @@
 - [#1473](https://github.com/sl-design-system/components/pull/1473) [`04b9ce2`](https://github.com/sl-design-system/components/commit/04b9ce28077255bfc516bce7b62bb7e4642060b3) - Fix/1470 space grotesk to open sans clickedu ds
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -224,6 +231,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -263,6 +271,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
diff --git a/packages/themes/editorial-suite/CHANGELOG.md b/packages/themes/editorial-suite/CHANGELOG.md
index b02f6027cc..2cd57c8e10 100644
--- a/packages/themes/editorial-suite/CHANGELOG.md
+++ b/packages/themes/editorial-suite/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -147,9 +149,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -158,6 +162,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -205,6 +210,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -219,6 +225,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -258,6 +265,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
diff --git a/packages/themes/itslearning/CHANGELOG.md b/packages/themes/itslearning/CHANGELOG.md
index 1fe806c54b..7598fb5af0 100644
--- a/packages/themes/itslearning/CHANGELOG.md
+++ b/packages/themes/itslearning/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -145,9 +147,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -156,6 +160,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -203,6 +208,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -217,6 +223,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -256,6 +263,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -272,6 +280,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/kampus/CHANGELOG.md b/packages/themes/kampus/CHANGELOG.md
index fa59b313ae..7502b9eb45 100644
--- a/packages/themes/kampus/CHANGELOG.md
+++ b/packages/themes/kampus/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -145,9 +147,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -156,6 +160,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -205,6 +210,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -219,6 +225,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -258,6 +265,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -274,6 +282,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/magister/CHANGELOG.md b/packages/themes/magister/CHANGELOG.md
index 54dda88c82..dbd1205008 100644
--- a/packages/themes/magister/CHANGELOG.md
+++ b/packages/themes/magister/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -162,9 +164,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -173,6 +177,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -230,6 +235,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -244,6 +250,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -289,6 +296,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -305,6 +313,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/max/CHANGELOG.md b/packages/themes/max/CHANGELOG.md
index ceee0f1aad..783beba8be 100644
--- a/packages/themes/max/CHANGELOG.md
+++ b/packages/themes/max/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -147,9 +149,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -158,6 +162,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -205,6 +210,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -219,6 +225,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -258,6 +265,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -274,6 +282,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/my-digital-book/CHANGELOG.md b/packages/themes/my-digital-book/CHANGELOG.md
index 623d8f3017..1f1a9ba848 100644
--- a/packages/themes/my-digital-book/CHANGELOG.md
+++ b/packages/themes/my-digital-book/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -145,9 +147,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -156,6 +160,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -203,6 +208,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -217,6 +223,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -256,6 +263,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
diff --git a/packages/themes/myvanin_onhold/CHANGELOG.md b/packages/themes/myvanin_onhold/CHANGELOG.md
index 76e2819738..e02970a6e1 100644
--- a/packages/themes/myvanin_onhold/CHANGELOG.md
+++ b/packages/themes/myvanin_onhold/CHANGELOG.md
@@ -105,9 +105,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -116,6 +118,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -177,6 +180,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
diff --git a/packages/themes/neon/CHANGELOG.md b/packages/themes/neon/CHANGELOG.md
index f87baff427..a7f725243d 100644
--- a/packages/themes/neon/CHANGELOG.md
+++ b/packages/themes/neon/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -147,9 +149,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -158,6 +162,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -205,6 +210,7 @@
 ### Patch Changes
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -219,6 +225,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -260,6 +267,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -276,6 +284,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/sanoma-learning/CHANGELOG.md b/packages/themes/sanoma-learning/CHANGELOG.md
index d459c3d991..af53b3b3cc 100644
--- a/packages/themes/sanoma-learning/CHANGELOG.md
+++ b/packages/themes/sanoma-learning/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -153,9 +155,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -164,6 +168,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -215,6 +220,7 @@
 - [#1422](https://github.com/sl-design-system/components/pull/1422) [`2833861`](https://github.com/sl-design-system/components/commit/28338611d0fccf175c3e22eb268fc5892522dc78) - Added tag tokens
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -227,6 +233,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -270,6 +277,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
diff --git a/packages/themes/teas/CHANGELOG.md b/packages/themes/teas/CHANGELOG.md
index 0f8e98f2df..112b72d888 100644
--- a/packages/themes/teas/CHANGELOG.md
+++ b/packages/themes/teas/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7
@@ -145,9 +147,11 @@
 - [#1710](https://github.com/sl-design-system/components/pull/1710) [`40cc538`](https://github.com/sl-design-system/components/commit/40cc538648e6ed5ac453fbe708bae8761caaab5e) - Overhaul of how (custom) icons are maintained in figma and exported to be used in the packages.
 
   The following icons have changed:
+
   - `circle` has been renamed to `circle-solid`
 
   The following icons have been added:
+
   - `badge-available`
   - `badge-away`
   - `badge-donotdisturb`
@@ -156,6 +160,7 @@
   - `info`
 
   The following items have been removed (mainly in cleaning up, they were never meant to be there)
+
   - `svg-sort`
   - `svg-sort-down`
   - `svg-sort-up`
@@ -207,6 +212,7 @@
 - [#1469](https://github.com/sl-design-system/components/pull/1469) [`7e31a0d`](https://github.com/sl-design-system/components/commit/7e31a0d63766e7efbdadffdd17b53bcdd1951515) - updated color default ghost button in TEAS
 
 - [#1454](https://github.com/sl-design-system/components/pull/1454) [`af62ce4`](https://github.com/sl-design-system/components/commit/af62ce4d0e65b1363b9cede48642bc22d1fc9365) - - Improve toggle button and group tokens
+
   - Add a `check-solid` icon for use in the `toggle-button` component
 
 - [#1414](https://github.com/sl-design-system/components/pull/1414) [`ff1618c`](https://github.com/sl-design-system/components/commit/ff1618cdfa4d0060465d993f656345ba1044f88c) - Update icons to the latest fontawesome release (6.6.0)
@@ -221,6 +227,7 @@
 ### Patch Changes
 
 - [#1389](https://github.com/sl-design-system/components/pull/1389) [`f03971b`](https://github.com/sl-design-system/components/commit/f03971b7b338a4248df292060b91b6b903b6c8ed) - Minor style fixes:
+
   - Fix the title and subtitle text being cutoff for certain characters due not enough line-height
   - Use a different color for the subtitle text
 
@@ -260,6 +267,7 @@
 - [#1251](https://github.com/sl-design-system/components/pull/1251) [`a3da76c`](https://github.com/sl-design-system/components/commit/a3da76c7df521c2241b565dc22025715f1231e9c) - New search icon
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - - Enhanced the color contrast of buttons when used on slightly darker backgrounds across all themes.
+
   - Enhanced the color contrast of inline messages to match our buttons.
 
 - [#1234](https://github.com/sl-design-system/components/pull/1234) [`fe047da`](https://github.com/sl-design-system/components/commit/fe047da265a3d657d74ee26df95ebd73f2d7ef7f) - Fix missing triangle-exclamation-solid icon
@@ -276,6 +284,7 @@
 - [#1242](https://github.com/sl-design-system/components/pull/1242) [`ab122ec`](https://github.com/sl-design-system/components/commit/ab122ec672a515ae2ca7dce88c7344c1b209d538) - Fix missing `calc()` functions in theme parts.
 
 - [#1225](https://github.com/sl-design-system/components/pull/1225) [`ad297ab`](https://github.com/sl-design-system/components/commit/ad297ab817ab998253b9c2a90033c72dcc686893) - Updated/added tokens:
+
   - Button bar available in all themes
   - Fixed accordion border
   - Button fixes
diff --git a/packages/themes/tig/CHANGELOG.md b/packages/themes/tig/CHANGELOG.md
index 296085f74e..3c481f33b8 100644
--- a/packages/themes/tig/CHANGELOG.md
+++ b/packages/themes/tig/CHANGELOG.md
@@ -23,9 +23,11 @@
 ### Minor Changes
 
 - [#3020](https://github.com/sl-design-system/components/pull/3020) [`738e4a7`](https://github.com/sl-design-system/components/commit/738e4a77005043de2f9977fab9fb04d4fce6369d) - Added
+
   - new elevation.surface.raised.primary token
 
   Fixed
+
   - form input interactive backgrounds (color.background.input.plain.interactive.plain) from plain to bold variants across all themes (e.g., accent.grey.interactive.bold) for better state contrast.
 
 - [#2970](https://github.com/sl-design-system/components/pull/2970) [`e92ebb1`](https://github.com/sl-design-system/components/commit/e92ebb16c596919aaa301be2604ab5f3539738a9) - Caret icons have been updated to implement the new alignment strategy used in Font Awesome 7

From dc980f42f74d4ca4b787d4c80260d86599bfeede Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 28 May 2026 10:26:10 +0200
Subject: [PATCH 04/18] changeset

---
 .changeset/vast-wombats-cut.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/vast-wombats-cut.md

diff --git a/.changeset/vast-wombats-cut.md b/.changeset/vast-wombats-cut.md
new file mode 100644
index 0000000000..7409eae7dd
--- /dev/null
+++ b/.changeset/vast-wombats-cut.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/grid': patch
+---
+
+Accessibility improvements: adds `aria-selected` to rows when the grid is in `single` select mode or when using `row-action="activate"`.

From d8c9f2fcea665968412863e18c6161a21dbcc7d0 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 28 May 2026 11:01:38 +0200
Subject: [PATCH 05/18] Changes after Copilot review

---
 packages/components/grid/src/grid.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index 6721daf1cb..0f65c8282a 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -605,12 +605,12 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
         ...(this.itemParts?.(item.data)?.split(' ') || [])
       ],
       ariaSelected =
-        (this.dataSource?.selects ?? this.selects) === 'single'
-          ? selected
+        this.rowAction === 'activate'
+          ? active || selected
             ? 'true'
             : 'false'
-          : this.rowAction === 'activate'
-            ? active
+          : (this.dataSource?.selects ?? this.selects) === 'single'
+            ? selected
               ? 'true'
               : 'false'
             : nothing;

From 50d9650a750018bce4e77fa9c3e87a20ae1e79f5 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 28 May 2026 11:48:45 +0200
Subject: [PATCH 06/18] Formatting changes

---
 packages/components/grid/src/grid.spec.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index 96ffd2a796..ea444b4bf3 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -541,6 +541,7 @@ describe('sl-grid', () => {
       await new Promise(resolve => setTimeout(resolve));
 
       const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+
       expect(row).to.have.attribute('aria-selected', 'true');
     });
 
@@ -598,6 +599,7 @@ describe('sl-grid', () => {
       await new Promise(resolve => setTimeout(resolve));
 
       const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+
       expect(row).to.have.attribute('aria-selected', 'true');
     });
   });
@@ -682,6 +684,7 @@ describe('sl-grid', () => {
       await new Promise(resolve => setTimeout(resolve));
 
       const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+
       expect(row).to.have.attribute('aria-selected', 'true');
     });
 
@@ -693,6 +696,7 @@ describe('sl-grid', () => {
       await new Promise(resolve => setTimeout(resolve));
 
       const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+
       expect(row).to.have.attribute('aria-selected', 'false');
     });
   });

From 02f10eb048a0cba7b832e518407e29e393a628f4 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Mon, 15 Jun 2026 15:54:58 +0200
Subject: [PATCH 07/18] fix(grid): announce row selection state (with
 announcer) for accessibility improvements

---
 .changeset/vast-wombats-cut.md            |   2 +-
 packages/components/grid/package.json     |   1 +
 packages/components/grid/src/grid.spec.ts | 112 ----------------------
 packages/components/grid/src/grid.ts      |  54 ++++++++++-
 4 files changed, 52 insertions(+), 117 deletions(-)

diff --git a/.changeset/vast-wombats-cut.md b/.changeset/vast-wombats-cut.md
index 7409eae7dd..c5c8768244 100644
--- a/.changeset/vast-wombats-cut.md
+++ b/.changeset/vast-wombats-cut.md
@@ -2,4 +2,4 @@
 '@sl-design-system/grid': patch
 ---
 
-Accessibility improvements: adds `aria-selected` to rows when the grid is in `single` select mode or when using `row-action="activate"`.
+Accessibility improvements: announces row selection state to screen readers via the announcer utility.
diff --git a/packages/components/grid/package.json b/packages/components/grid/package.json
index 202ec017f8..5b5c852811 100644
--- a/packages/components/grid/package.json
+++ b/packages/components/grid/package.json
@@ -40,6 +40,7 @@
     "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
   },
   "dependencies": {
+    "@sl-design-system/announcer": "^0.0.8",
     "@sl-design-system/button": "^2.1.0",
     "@sl-design-system/checkbox": "^2.1.10",
     "@sl-design-system/data-source": "^0.4.0",
diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index dbfb4693e7..7d95133721 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -437,7 +437,6 @@ describe('sl-grid', () => {
     });
 
     it('should allow only one row to be selected at a time', async () => {
-      // Select first row
       el.renderRoot
         .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
         ?.click();
@@ -448,7 +447,6 @@ describe('sl-grid', () => {
       );
       expect(selectedRows).to.have.lengthOf(1);
 
-      // Select second row - should deselect first row
       el.renderRoot
         .querySelector<HTMLTableCellElement>('tbody tr:nth-of-type(2) td:last-of-type')
         ?.click();
@@ -459,17 +457,14 @@ describe('sl-grid', () => {
       );
       expect(selectedRows).to.have.lengthOf(1);
 
-      // Verify first row is no longer selected
       const firstRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
       expect(firstRow?.part.contains('selected')).to.be.false;
 
-      // Verify second row is selected
       const secondRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:nth-of-type(2)');
       expect(secondRow?.part.contains('selected')).to.be.true;
     });
 
     it('should deselect a row when clicking it again', async () => {
-      // Select a row
       el.renderRoot
         .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
         ?.click();
@@ -478,7 +473,6 @@ describe('sl-grid', () => {
       let row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
       expect(row?.part.contains('selected')).to.be.true;
 
-      // Click again to deselect
       el.renderRoot
         .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
         ?.click();
@@ -525,83 +519,6 @@ describe('sl-grid', () => {
 
       expect(el.dataSource?.selects).to.equal('single');
     });
-
-    it('should have aria-selected="false" on all rows by default', () => {
-      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
-
-      rows.forEach(row => {
-        expect(row).to.have.attribute('aria-selected', 'false');
-      });
-    });
-
-    it('should set aria-selected="true" on the selected row', async () => {
-      el.renderRoot
-        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
-        ?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
-
-      expect(row).to.have.attribute('aria-selected', 'true');
-    });
-
-    it('should set aria-selected="false" on deselected rows when selection changes', async () => {
-      el.renderRoot
-        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
-        ?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      el.renderRoot
-        .querySelector<HTMLTableCellElement>('tbody tr:nth-of-type(2) td:last-of-type')
-        ?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      const firstRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type'),
-        secondRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:nth-of-type(2)');
-
-      expect(firstRow).to.have.attribute('aria-selected', 'false');
-      expect(secondRow).to.have.attribute('aria-selected', 'true');
-    });
-  });
-
-  describe('single select via data source', () => {
-    beforeEach(async () => {
-      const ds = new ArrayListDataSource(
-        [
-          { firstName: 'John', lastName: 'Doe' },
-          { firstName: 'Jane', lastName: 'Smith' }
-        ],
-        { selects: 'single' }
-      );
-
-      el = await fixture(html`
-        <sl-grid .dataSource=${ds} row-action="select">
-          <sl-grid-column path="firstName"></sl-grid-column>
-          <sl-grid-column path="lastName"></sl-grid-column>
-        </sl-grid>
-      `);
-
-      await waitForGridToRenderData(el);
-    });
-
-    it('should have aria-selected="false" on all rows by default', () => {
-      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
-
-      rows.forEach(row => {
-        expect(row).to.have.attribute('aria-selected', 'false');
-      });
-    });
-
-    it('should set aria-selected="true" on the selected row', async () => {
-      el.renderRoot
-        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
-        ?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
-
-      expect(row).to.have.attribute('aria-selected', 'true');
-    });
   });
 
   describe('row action activate', () => {
@@ -671,35 +588,6 @@ describe('sl-grid', () => {
       expect(onActiveRowChange.firstCall.args[0].detail).to.deep.equal(el.items!.at(1));
     });
 
-    it('should have aria-selected="false" on all rows by default', () => {
-      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
-
-      rows.forEach(row => {
-        expect(row).to.have.attribute('aria-selected', 'false');
-      });
-    });
-
-    it('should set aria-selected="true" on the active row', async () => {
-      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
-
-      expect(row).to.have.attribute('aria-selected', 'true');
-    });
-
-    it('should set aria-selected="false" when the row is deactivated', async () => {
-      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
-      await new Promise(resolve => setTimeout(resolve));
-
-      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
-
-      expect(row).to.have.attribute('aria-selected', 'false');
-    });
-
     it('should keep sticky active row cells opaque', async () => {
       el = await fixture(html`
         <sl-grid
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index 0f65c8282a..b27cef9921 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -10,6 +10,7 @@ import {
   type ScopedElementsMap,
   ScopedElementsMixin
 } from '@open-wc/scoped-elements/lit-element.js';
+import { announce } from '@sl-design-system/announcer';
 import { Button } from '@sl-design-system/button';
 import {
   ArrayListDataSource,
@@ -234,6 +235,9 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
   /** The virtualizer instance for the grid. */
   #virtualizer?: VirtualizerHostElement[typeof virtualizerRef];
 
+  /** The last row that was announced for focus-based announcements. */
+  #lastAnnouncedRow?: HTMLTableRowElement;
+
   /** The current active row. */
   @property({ attribute: false }) activeRow?: T;
 
@@ -406,6 +410,10 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
     this.#mutationObserver?.observe(this.tbody, { attributes: true, attributeFilter: ['style'] });
 
     this.tbody.addEventListener('scroll', () => this.#onScroll(), { passive: true });
+    this.tbody.addEventListener('focusin', (event: FocusEvent) => this.#onFocusIn(event));
+    this.tbody.addEventListener('focusout', () => {
+      this.#lastAnnouncedRow = undefined;
+    });
 
     // Workaround for https://github.com/lit/lit/issues/4232
     await new Promise(resolve => requestAnimationFrame(resolve));
@@ -604,15 +612,15 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
         ...(this.#dragItem === item ? ['dragging'] : []),
         ...(this.itemParts?.(item.data)?.split(' ') || [])
       ],
-      ariaSelected =
+      ariaCurrent =
         this.rowAction === 'activate'
           ? active || selected
             ? 'true'
-            : 'false'
+            : nothing
           : (this.dataSource?.selects ?? this.selects) === 'single'
             ? selected
               ? 'true'
-              : 'false'
+              : nothing
             : nothing;
 
     return html`
@@ -624,7 +632,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
         @dragend=${(event: DragEvent) => this.#onDragEnd(event, item)}
         @drop=${(event: DragEvent) => this.#onDrop(event, item)}
         aria-rowindex=${index + 1}
-        aria-selected=${ariaSelected}
+        aria-current=${ariaCurrent}
         index=${index}
         part=${parts.join(' ')}>
         ${rows[rows.length - 1].map(col => col.renderData(item))}
@@ -748,12 +756,50 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
       this.dataSource?.toggle(item);
       this.dataSource?.update();
     }
+
+    const index = (this.dataSource?.items.indexOf(item) ?? -1) + 1;
+
+    this.#announceSelection(item, index);
   }
 
   #onColumnUpdate(event: Event & { target: GridColumn<T> }): void {
     this.#addScopedElements(event.target.scopedElements);
   }
 
+  #announceSelection(item: ListDataSourceDataItem<T>, index: number): void {
+    const selected =
+      this.rowAction === 'activate' ? !!this.activeRow : !!this.dataSource?.isSelected(item);
+
+    announce(
+      selected
+        ? msg(str`Row ${index} selected`, { id: 'sl.grid.rowSelected' })
+        : msg(str`Row ${index} deselected`, { id: 'sl.grid.rowDeselected' }),
+      'assertive'
+    );
+  }
+
+  #onFocusIn(event: FocusEvent): void {
+    const row = (event.target as HTMLElement)?.closest?.('tr');
+
+    if (!row || !row.hasAttribute('aria-current')) {
+      this.#lastAnnouncedRow = undefined;
+      return;
+    }
+
+    // Don't re-announce if focus stays within the same row
+    if (row === this.#lastAnnouncedRow) {
+      return;
+    }
+
+    this.#lastAnnouncedRow = row;
+
+    const index = row.getAttribute('aria-rowindex');
+
+    if (index) {
+      announce(msg(str`Row ${index} selected`, { id: 'sl.grid.rowSelected' }), 'polite');
+    }
+  }
+
   #onDataSourceUpdate = () => {
     this.requestUpdate();
   };

From c5ac74b4b626a6884348b019ea8976d90f0181e5 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Tue, 16 Jun 2026 13:20:32 +0200
Subject: [PATCH 08/18] fix(grid): enhance row selection announcements with
 forced updates for accessibility, announcer changes

---
 packages/components/announcer/src/announce.ts |  7 ++--
 .../components/announcer/src/announcer.ts     | 23 ++++++++++--
 packages/components/grid/src/grid.ts          | 36 +++++++++----------
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/packages/components/announcer/src/announce.ts b/packages/components/announcer/src/announce.ts
index 33645197ff..7316ec2965 100644
--- a/packages/components/announcer/src/announce.ts
+++ b/packages/components/announcer/src/announce.ts
@@ -6,7 +6,10 @@
  *
  * @param message - The message to send to the live aria.
  * @param urgency - The urgency of the message. Default is 'polite'.
+ * @param force - If true, bypasses deduplication and always announces the message.
  */
-export function announce(message: string, urgency?: 'polite' | 'assertive'): void {
-  document.body.dispatchEvent(new CustomEvent('sl-announce', { detail: { message, urgency } }));
+export function announce(message: string, urgency?: 'polite' | 'assertive', force?: boolean): void {
+  document.body.dispatchEvent(
+    new CustomEvent('sl-announce', { detail: { message, urgency, force } })
+  );
 }
diff --git a/packages/components/announcer/src/announcer.ts b/packages/components/announcer/src/announcer.ts
index 17ee93d0b8..a1f46ead59 100644
--- a/packages/components/announcer/src/announcer.ts
+++ b/packages/components/announcer/src/announcer.ts
@@ -13,7 +13,11 @@ declare global {
   }
 }
 
-export type SlAnnounceEvent = CustomEvent<{ message: string; urgency?: 'polite' | 'assertive' }>;
+export type SlAnnounceEvent = CustomEvent<{
+  message: string;
+  urgency?: 'polite' | 'assertive';
+  force?: boolean;
+}>;
 
 /**
  * Utility that serves as a recipient for all live-aria notifications and supplies them for
@@ -30,6 +34,9 @@ export class Announcer extends LitElement {
 
   #events = new EventsController(this, {});
 
+  /** Counter used to make forced announcements unique for screen reader deduplication. */
+  #forceCounter = 0;
+
   override connectedCallback(): void {
     super.connectedCallback();
 
@@ -48,8 +55,18 @@ export class Announcer extends LitElement {
       `[aria-live="${event.detail.urgency || 'polite'}"]`
     );
 
-    // make sure the message is not already in the container
-    if (container?.textContent?.indexOf(event.detail.message) === -1) {
+    if (event.detail.force) {
+      this.#forceCounter++;
+
+      const messageNode = document.createElement('li');
+      // Append invisible zero width spaces to make each message unique for screen readers (to re-force the announcements)
+      messageNode.innerText = event.detail.message + '\u200B'.repeat((this.#forceCounter % 2) + 1);
+
+      container?.appendChild(messageNode);
+      setTimeout(() => {
+        messageNode.remove();
+      }, 500);
+    } else if (container?.textContent?.indexOf(event.detail.message) === -1) {
       const messageNode = document.createElement('li');
       messageNode.innerText = event.detail.message;
 
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index b27cef9921..d9b7185407 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -235,8 +235,8 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
   /** The virtualizer instance for the grid. */
   #virtualizer?: VirtualizerHostElement[typeof virtualizerRef];
 
-  /** The last row that was announced for focus-based announcements. */
-  #lastAnnouncedRow?: HTMLTableRowElement;
+  /** Flag to skip the next focus announcement (e.g. after a click that already announced). */
+  #skipNextFocusAnnounce = false;
 
   /** The current active row. */
   @property({ attribute: false }) activeRow?: T;
@@ -411,9 +411,6 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
     this.tbody.addEventListener('scroll', () => this.#onScroll(), { passive: true });
     this.tbody.addEventListener('focusin', (event: FocusEvent) => this.#onFocusIn(event));
-    this.tbody.addEventListener('focusout', () => {
-      this.#lastAnnouncedRow = undefined;
-    });
 
     // Workaround for https://github.com/lit/lit/issues/4232
     await new Promise(resolve => requestAnimationFrame(resolve));
@@ -625,7 +622,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
     return html`
       <tr
-        @click=${() => this.#onClickRow(item)}
+        @click=${() => this.#onClickRow(item, index + 1)}
         @dragstart=${(event: DragEvent) => this.#onDragStart(event, item)}
         @dragenter=${(event: DragEvent) => this.#onDragEnter(event, item)}
         @dragover=${(event: DragEvent) => this.#onDragOver(event, item)}
@@ -740,7 +737,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
     this.dataSource?.update();
   }
 
-  #onClickRow(item: ListDataSourceDataItem<T>): void {
+  #onClickRow(item: ListDataSourceDataItem<T>, index: number): void {
     if (this.rowAction === 'activate') {
       this.dataSource?.deselectAll();
       this.dataSource?.update();
@@ -755,11 +752,12 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
     } else if (this.rowAction === 'select') {
       this.dataSource?.toggle(item);
       this.dataSource?.update();
+    } else {
+      return;
     }
 
-    const index = (this.dataSource?.items.indexOf(item) ?? -1) + 1;
-
     this.#announceSelection(item, index);
+    this.#skipNextFocusAnnounce = true;
   }
 
   #onColumnUpdate(event: Event & { target: GridColumn<T> }): void {
@@ -779,24 +777,26 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
   }
 
   #onFocusIn(event: FocusEvent): void {
-    const row = (event.target as HTMLElement)?.closest?.('tr');
-
-    if (!row || !row.hasAttribute('aria-current')) {
-      this.#lastAnnouncedRow = undefined;
+    // Skip the focus announcement if it was triggered by a click that is already announced
+    if (this.#skipNextFocusAnnounce) {
+      this.#skipNextFocusAnnounce = false;
       return;
     }
 
-    // Don't re-announce if focus stays within the same row
-    if (row === this.#lastAnnouncedRow) {
+    const row = (event.target as HTMLElement)?.closest?.('tr');
+
+    if (!row || !row.hasAttribute('aria-current')) {
       return;
     }
 
-    this.#lastAnnouncedRow = row;
-
     const index = row.getAttribute('aria-rowindex');
 
     if (index) {
-      announce(msg(str`Row ${index} selected`, { id: 'sl.grid.rowSelected' }), 'polite');
+      announce(
+        msg(str`In selected row ${index}`, { id: 'sl.grid.inSelectedRow' }),
+        'assertive',
+        true
+      );
     }
   }
 

From b9bf026a32d1cbaf7d570ed2800fdfc6b66eb501 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Tue, 16 Jun 2026 14:08:58 +0200
Subject: [PATCH 09/18] update row activation announcements for improved
 accessibility, translations

---
 .../components/announcer/src/announcer.ts     | 24 ++++++++-----------
 packages/components/grid/src/grid.ts          |  6 ++---
 packages/locales/src/es-ES.ts                 |  3 +++
 packages/locales/src/es-ES.xlf                | 12 ++++++++++
 packages/locales/src/it.ts                    |  3 +++
 packages/locales/src/it.xlf                   | 12 ++++++++++
 packages/locales/src/nl.ts                    |  3 +++
 packages/locales/src/nl.xlf                   | 12 ++++++++++
 packages/locales/src/pl.ts                    |  3 +++
 packages/locales/src/pl.xlf                   | 12 ++++++++++
 yarn.lock                                     |  1 +
 11 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/packages/components/announcer/src/announcer.ts b/packages/components/announcer/src/announcer.ts
index a1f46ead59..b17862670f 100644
--- a/packages/components/announcer/src/announcer.ts
+++ b/packages/components/announcer/src/announcer.ts
@@ -55,25 +55,21 @@ export class Announcer extends LitElement {
       `[aria-live="${event.detail.urgency || 'polite'}"]`
     );
 
+    const messageNode = document.createElement('li');
+
     if (event.detail.force) {
       this.#forceCounter++;
-
-      const messageNode = document.createElement('li');
-      // Append invisible zero width spaces to make each message unique for screen readers (to re-force the announcements)
+      // Append invisible zero-width spaces to make each message unique for screen readers
       messageNode.innerText = event.detail.message + '\u200B'.repeat((this.#forceCounter % 2) + 1);
-
-      container?.appendChild(messageNode);
-      setTimeout(() => {
-        messageNode.remove();
-      }, 500);
     } else if (container?.textContent?.indexOf(event.detail.message) === -1) {
-      const messageNode = document.createElement('li');
       messageNode.innerText = event.detail.message;
-
-      container?.appendChild(messageNode);
-      setTimeout(() => {
-        messageNode.remove();
-      }, 500);
+    } else {
+      return;
     }
+
+    container?.appendChild(messageNode);
+    setTimeout(() => {
+      messageNode.remove();
+    }, 500);
   }
 }
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index d9b7185407..99e5c3880c 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -770,8 +770,8 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
     announce(
       selected
-        ? msg(str`Row ${index} selected`, { id: 'sl.grid.rowSelected' })
-        : msg(str`Row ${index} deselected`, { id: 'sl.grid.rowDeselected' }),
+        ? msg(str`Row ${index} activated`, { id: 'sl.grid.rowActivated' })
+        : msg(str`Row ${index} deactivated`, { id: 'sl.grid.rowDeactivated' }),
       'assertive'
     );
   }
@@ -793,7 +793,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
     if (index) {
       announce(
-        msg(str`In selected row ${index}`, { id: 'sl.grid.inSelectedRow' }),
+        msg(str`In activated row ${index}`, { id: 'sl.grid.inActivatedRow' }),
         'assertive',
         true
       );
diff --git a/packages/locales/src/es-ES.ts b/packages/locales/src/es-ES.ts
index 27755fdbca..9681959f6f 100644
--- a/packages/locales/src/es-ES.ts
+++ b/packages/locales/src/es-ES.ts
@@ -55,8 +55,11 @@ export const templates = {
   'sl.grid.blankFilterOption': 'Vacío',
   'sl.grid.cancelSelection': 'Cancelar selección',
   'sl.grid.filterByValue': str`Filtrar por ${0}`,
+  'sl.grid.inActivatedRow': str`En la fila activada ${0}`,
   'sl.grid.removeSort': 'Quitar orden',
   'sl.grid.reorder': 'Reordenar',
+  'sl.grid.rowActivated': str`Fila ${0} activada`,
+  'sl.grid.rowDeactivated': str`Fila ${0} desactivada`,
   'sl.grid.selectAllRows': 'Seleccionar todas las filas',
   'sl.grid.selectionStatusMessage': str`${0} de ${1} seleccionados`,
   'sl.grid.selectRow': 'Seleccionar fila',
diff --git a/packages/locales/src/es-ES.xlf b/packages/locales/src/es-ES.xlf
index 44c18375ef..e16b202cdc 100644
--- a/packages/locales/src/es-ES.xlf
+++ b/packages/locales/src/es-ES.xlf
@@ -462,6 +462,18 @@
   <source>More information</source>
   <target>Más información</target>
 </trans-unit>
+<trans-unit id="sl.grid.rowActivated">
+  <source>Row <x id="0" equiv-text="${index}"/> activated</source>
+  <target>Fila <x id="0" equiv-text="${index}"/> activada</target>
+</trans-unit>
+<trans-unit id="sl.grid.rowDeactivated">
+  <source>Row <x id="0" equiv-text="${index}"/> deactivated</source>
+  <target>Fila <x id="0" equiv-text="${index}"/> desactivada</target>
+</trans-unit>
+<trans-unit id="sl.grid.inActivatedRow">
+  <source>In activated row <x id="0" equiv-text="${index}"/></source>
+  <target>En la fila activada <x id="0" equiv-text="${index}"/></target>
+</trans-unit>
 </body>
 </file>
 </xliff>
diff --git a/packages/locales/src/it.ts b/packages/locales/src/it.ts
index d024ad7582..4743dc1b4b 100644
--- a/packages/locales/src/it.ts
+++ b/packages/locales/src/it.ts
@@ -55,8 +55,11 @@ export const templates = {
   'sl.grid.blankFilterOption': 'Vuoto',
   'sl.grid.cancelSelection': 'Annulla selezione',
   'sl.grid.filterByValue': str`Filtra per ${0}`,
+  'sl.grid.inActivatedRow': str`Nella riga attivata ${0}`,
   'sl.grid.removeSort': 'Rimuovi ordinamento',
   'sl.grid.reorder': 'Riordinare',
+  'sl.grid.rowActivated': str`Riga ${0} attivata`,
+  'sl.grid.rowDeactivated': str`Riga ${0} disattivata`,
   'sl.grid.selectAllRows': 'Seleziona tutte le righe',
   'sl.grid.selectionStatusMessage': str`${0} di ${1} selezionati`,
   'sl.grid.selectRow': 'Seleziona riga',
diff --git a/packages/locales/src/it.xlf b/packages/locales/src/it.xlf
index aba8f89b36..52babb3aa7 100644
--- a/packages/locales/src/it.xlf
+++ b/packages/locales/src/it.xlf
@@ -462,6 +462,18 @@
   <source>More information</source>
   <target>Più informazioni</target>
 </trans-unit>
+<trans-unit id="sl.grid.rowActivated">
+  <source>Row <x id="0" equiv-text="${index}"/> activated</source>
+  <target>Riga <x id="0" equiv-text="${index}"/> attivata</target>
+</trans-unit>
+<trans-unit id="sl.grid.rowDeactivated">
+  <source>Row <x id="0" equiv-text="${index}"/> deactivated</source>
+  <target>Riga <x id="0" equiv-text="${index}"/> disattivata</target>
+</trans-unit>
+<trans-unit id="sl.grid.inActivatedRow">
+  <source>In activated row <x id="0" equiv-text="${index}"/></source>
+  <target>Nella riga attivata <x id="0" equiv-text="${index}"/></target>
+</trans-unit>
 </body>
 </file>
 </xliff>
diff --git a/packages/locales/src/nl.ts b/packages/locales/src/nl.ts
index c9c241eb64..bfd17adfae 100644
--- a/packages/locales/src/nl.ts
+++ b/packages/locales/src/nl.ts
@@ -55,8 +55,11 @@ export const templates = {
   'sl.grid.blankFilterOption': 'Leeg',
   'sl.grid.cancelSelection': 'Annuleer selectie',
   'sl.grid.filterByValue': str`Filter op ${0}`,
+  'sl.grid.inActivatedRow': str`In geactiveerde rij ${0}`,
   'sl.grid.removeSort': 'Verwijder sortering',
   'sl.grid.reorder': 'Herschikken',
+  'sl.grid.rowActivated': str`Rij ${0} geactiveerd`,
+  'sl.grid.rowDeactivated': str`Rij ${0} gedeactiveerd`,
   'sl.grid.selectAllRows': 'Selecteer alle rijen',
   'sl.grid.selectionStatusMessage': str`${0} van ${1} geselecteerd`,
   'sl.grid.selectRow': 'Selecteer rij',
diff --git a/packages/locales/src/nl.xlf b/packages/locales/src/nl.xlf
index 4f0c394971..ec255fb5fd 100644
--- a/packages/locales/src/nl.xlf
+++ b/packages/locales/src/nl.xlf
@@ -462,6 +462,18 @@
   <source>Options</source>
   <target>Opties</target>
 </trans-unit>
+<trans-unit id="sl.grid.rowActivated">
+  <source>Row <x id="0" equiv-text="${index}"/> activated</source>
+  <target>Rij <x id="0" equiv-text="${index}"/> geactiveerd</target>
+</trans-unit>
+<trans-unit id="sl.grid.rowDeactivated">
+  <source>Row <x id="0" equiv-text="${index}"/> deactivated</source>
+  <target>Rij <x id="0" equiv-text="${index}"/> gedeactiveerd</target>
+</trans-unit>
+<trans-unit id="sl.grid.inActivatedRow">
+  <source>In activated row <x id="0" equiv-text="${index}"/></source>
+  <target>In geactiveerde rij <x id="0" equiv-text="${index}"/></target>
+</trans-unit>
 </body>
 </file>
 </xliff>
diff --git a/packages/locales/src/pl.ts b/packages/locales/src/pl.ts
index 462fc2b037..ed9be06347 100644
--- a/packages/locales/src/pl.ts
+++ b/packages/locales/src/pl.ts
@@ -55,8 +55,11 @@ export const templates = {
   'sl.grid.blankFilterOption': 'Puste',
   'sl.grid.cancelSelection': 'Anuluj wybór',
   'sl.grid.filterByValue': str`Filtruj według ${0}`,
+  'sl.grid.inActivatedRow': str`W aktywowanym wierszu ${0}`,
   'sl.grid.removeSort': 'Usuń sortowanie',
   'sl.grid.reorder': 'Zmień kolejność',
+  'sl.grid.rowActivated': str`Wiersz ${0} aktywowany`,
+  'sl.grid.rowDeactivated': str`Wiersz ${0} dezaktywowany`,
   'sl.grid.selectAllRows': 'Zaznacz wszystkie wiersze',
   'sl.grid.selectionStatusMessage': str`${0} z ${1} wybranych`,
   'sl.grid.selectRow': 'Zaznacz wiersz',
diff --git a/packages/locales/src/pl.xlf b/packages/locales/src/pl.xlf
index 7b71b2c524..788b1b0b17 100644
--- a/packages/locales/src/pl.xlf
+++ b/packages/locales/src/pl.xlf
@@ -462,6 +462,18 @@
   <source>More information</source>
   <target>Więcej informacji</target>
 </trans-unit>
+<trans-unit id="sl.grid.rowActivated">
+  <source>Row <x id="0" equiv-text="${index}"/> activated</source>
+  <target>Wiersz <x id="0" equiv-text="${index}"/> aktywowany</target>
+</trans-unit>
+<trans-unit id="sl.grid.rowDeactivated">
+  <source>Row <x id="0" equiv-text="${index}"/> deactivated</source>
+  <target>Wiersz <x id="0" equiv-text="${index}"/> dezaktywowany</target>
+</trans-unit>
+<trans-unit id="sl.grid.inActivatedRow">
+  <source>In activated row <x id="0" equiv-text="${index}"/></source>
+  <target>W aktywowanym wierszu <x id="0" equiv-text="${index}"/></target>
+</trans-unit>
 </body>
 </file>
 </xliff>
diff --git a/yarn.lock b/yarn.lock
index ffce67dc3e..a537e8815f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5922,6 +5922,7 @@ __metadata:
     "@lit-labs/virtualizer": "npm:^2.1.1"
     "@lit/localize": "npm:^0.12.2"
     "@open-wc/scoped-elements": "npm:^3.0.6"
+    "@sl-design-system/announcer": "npm:^0.0.8"
     "@sl-design-system/button": "npm:^2.1.0"
     "@sl-design-system/checkbox": "npm:^2.1.10"
     "@sl-design-system/data-source": "npm:^0.4.0"

From 2c23d4f2d1bae8cbca4cc563f021f6e7caa2587e Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Tue, 16 Jun 2026 15:54:31 +0200
Subject: [PATCH 10/18] fix(grid): add accessibility attributes to row
 activation buttons (stories changes)

---
 .../grid/src/stories/selection.stories.ts     | 57 +++++++++++++++++--
 .../inline-message/src/inline-message.spec.ts |  1 +
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/packages/components/grid/src/stories/selection.stories.ts b/packages/components/grid/src/stories/selection.stories.ts
index e02c6c0556..c2a3d5d31d 100644
--- a/packages/components/grid/src/stories/selection.stories.ts
+++ b/packages/components/grid/src/stories/selection.stories.ts
@@ -36,7 +36,10 @@ Icon.register(faCopy, faRightToLine, faTrash);
 
 export const Activate: Story = {
   render: (_, { loaded: { students } }) => {
+    let activeStudent: Student | undefined;
+
     const onActiveRowChange = ({ detail: student }: SlActiveRowChangeEvent<Student>): void => {
+      activeStudent = student;
       document.getElementById('selection')!.innerText = student
         ? `You have activated ${student.fullName}.`
         : 'You have not activated anybody yet.';
@@ -51,6 +54,15 @@ export const Activate: Story = {
         <code>sl-grid-active-row-change</code> event is dispatched when the active row changes,
         which you can use to update the UI or perform other actions based on the active row.
       </p>
+      <p>
+        <strong>Note:</strong> For accessibility, you should add <code>aria-pressed</code> and
+        <code>aria-description</code> to the button that activates the row. Set
+        <code>aria-pressed</code> to <code>"true"</code> when the row is active and
+        <code>"false"</code> when it is not. Set <code>aria-description</code> to "Activate row" or
+        "Deactivate row" depending on the state. The grid does not set these attributes for you, so
+        you need to track the active row using the <code>sl-grid-active-row-change</code> event and
+        update your renderer accordingly. See the code below for an example.
+      </p>
       <p id="selection">You have not activated anybody yet.</p>
       <sl-grid
         @sl-grid-active-row-change=${onActiveRowChange}
@@ -59,9 +71,19 @@ export const Activate: Story = {
         <sl-grid-column
           grow="3"
           header="Student"
-          .renderer=${(student: Student) => html`
-            <sl-button fill="link" variant="primary">${avatarRenderer(student)}</sl-button>
-          `}
+          .renderer=${(student: Student) => {
+            const isActive = activeStudent === student;
+
+            return html`
+              <sl-button
+                aria-description=${isActive ? 'Deactivate row' : 'Activate row'}
+                aria-pressed=${isActive ? 'true' : 'false'}
+                fill="link"
+                variant="primary"
+                >${avatarRenderer(student)}</sl-button
+              >
+            `;
+          }}
           .scopedElements=${{ 'sl-avatar': Avatar, 'sl-button': Button }}></sl-grid-column>
         <sl-grid-column path="email"></sl-grid-column>
       </sl-grid>
@@ -446,7 +468,10 @@ export const WithFiltering: Story = {
 
 export const WithLinks: Story = {
   render: (_, { loaded: { students } }) => {
+    let activeStudent: Student | undefined;
+
     const onActiveRowChange = ({ detail: student }: SlActiveRowChangeEvent<Student>): void => {
+      activeStudent = student;
       document.getElementById('selection')!.innerText = student
         ? `You have activated ${student.fullName}.`
         : 'You have not activated or selected anybody yet.';
@@ -458,6 +483,7 @@ export const WithLinks: Story = {
 
       if (selected > 0) {
         grid.activeRow = undefined; // Reset selected student when selection changes
+        activeStudent = undefined;
 
         selection.innerText = `You have selected ${selected} ${selected > 1 ? 'students' : 'student'}.`;
       } else {
@@ -471,6 +497,15 @@ export const WithLinks: Story = {
         checkbox in the selection column while at the same time clicking anywhere else to activate
         the row. Using keyboard, you can do both.
       </p>
+      <p>
+        <strong>Note:</strong> For accessibility, you should add <code>aria-pressed</code> and
+        <code>aria-description</code> to the button that activates the row. Set
+        <code>aria-pressed</code> to <code>"true"</code> when the row is active and
+        <code>"false"</code> when it is not. Set <code>aria-description</code> to "Activate row" or
+        "Deactivate row" depending on the state. The grid does not set these attributes for you, so
+        you need to track the active row using the <code>sl-grid-active-row-change</code> event and
+        update your renderer accordingly. See the code below for an example.
+      </p>
       <p id="selection">You have not activated or selected anybody yet.</p>
       <sl-grid
         @sl-grid-active-row-change=${onActiveRowChange}
@@ -481,9 +516,19 @@ export const WithLinks: Story = {
         <sl-grid-column
           grow="3"
           header="Student"
-          .renderer=${(student: Student) => html`
-            <sl-button fill="link" variant="primary">${avatarRenderer(student)}</sl-button>
-          `}
+          .renderer=${(student: Student) => {
+            const isActive = activeStudent === student;
+
+            return html`
+              <sl-button
+                aria-description=${isActive ? 'Deactivate row' : 'Activate row'}
+                aria-pressed=${isActive ? 'true' : 'false'}
+                fill="link"
+                variant="primary"
+                >${avatarRenderer(student)}</sl-button
+              >
+            `;
+          }}
           .scopedElements=${{ 'sl-avatar': Avatar, 'sl-button': Button }}></sl-grid-column>
         <sl-grid-column path="email"></sl-grid-column>
 
diff --git a/packages/components/inline-message/src/inline-message.spec.ts b/packages/components/inline-message/src/inline-message.spec.ts
index fd39267458..adf1bc7601 100644
--- a/packages/components/inline-message/src/inline-message.spec.ts
+++ b/packages/components/inline-message/src/inline-message.spec.ts
@@ -215,6 +215,7 @@ describe('sl-inline-message', () => {
       const announcement = announce.lastCall.firstArg as SlAnnounceEvent;
 
       expect(announcement.detail).to.deep.equal({
+        force: undefined,
         message: 'Title  Inline message',
         urgency: 'polite'
       });

From 4e8962fbc6b2438d772399b334e6bdaec08e178d Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 10:55:39 +0200
Subject: [PATCH 11/18] Changes after Copilot review

---
 .../components/announcer/src/announcer.ts     |   1 +
 packages/components/grid/src/grid.spec.ts     | 163 +++++++++++++++++-
 packages/components/grid/src/grid.ts          |   4 +-
 3 files changed, 164 insertions(+), 4 deletions(-)

diff --git a/packages/components/announcer/src/announcer.ts b/packages/components/announcer/src/announcer.ts
index b17862670f..105eb5a84f 100644
--- a/packages/components/announcer/src/announcer.ts
+++ b/packages/components/announcer/src/announcer.ts
@@ -62,6 +62,7 @@ export class Announcer extends LitElement {
       // Append invisible zero-width spaces to make each message unique for screen readers
       messageNode.innerText = event.detail.message + '\u200B'.repeat((this.#forceCounter % 2) + 1);
     } else if (container?.textContent?.indexOf(event.detail.message) === -1) {
+      // make sure the message is not already in the container
       messageNode.innerText = event.detail.message;
     } else {
       return;
diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index 7d95133721..8af5bf9539 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -106,11 +106,11 @@ describe('sl-grid', () => {
       expect(rowIndices).to.deep.equal(['1', '2']);
     });
 
-    it('should not have aria-selected when selects is not set', () => {
+    it('should not have aria-current when no row action or selection is configured', () => {
       const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
 
       rows.forEach(row => {
-        expect(row).not.to.have.attribute('aria-selected');
+        expect(row).not.to.have.attribute('aria-current');
       });
     });
   });
@@ -426,6 +426,19 @@ describe('sl-grid', () => {
       expect(el.dataSource?.selects).to.equal('single');
     });
 
+    it('should set aria-current="true" on the selected row', async () => {
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type'),
+        otherRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:nth-of-type(2)');
+
+      expect(row).to.have.attribute('aria-current', 'true');
+      expect(otherRow).not.to.have.attribute('aria-current');
+    });
+
     it('should toggle the "selected" part of the row when clicking in the row', async () => {
       el.renderRoot
         .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
@@ -588,6 +601,105 @@ describe('sl-grid', () => {
       expect(onActiveRowChange.firstCall.args[0].detail).to.deep.equal(el.items!.at(1));
     });
 
+    it('should set aria-current="true" on the active row', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type'),
+        otherRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+
+      expect(row).to.have.attribute('aria-current', 'true');
+      expect(otherRow).not.to.have.attribute('aria-current');
+    });
+
+    it('should remove aria-current when deactivating', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      let row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+
+      expect(row).to.have.attribute('aria-current', 'true');
+
+      row?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+
+      expect(row).not.to.have.attribute('aria-current');
+    });
+
+    it('should dispatch sl-announce event when activating a row', async () => {
+      const announceSpy = spy();
+      document.body.addEventListener('sl-announce', announceSpy);
+
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(announceSpy).to.have.been.calledOnce;
+
+      const event = announceSpy.firstCall.args[0] as CustomEvent<{
+        message: string;
+        urgency: string;
+      }>;
+
+      expect(event.detail.message).to.equal('Row 2 activated');
+      expect(event.detail.urgency).to.equal('assertive');
+
+      document.body.removeEventListener('sl-announce', announceSpy);
+    });
+
+    it('should dispatch sl-announce event when deactivating a row', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const announceSpy = spy();
+      document.body.addEventListener('sl-announce', announceSpy);
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(announceSpy).to.have.been.calledOnce;
+
+      const event = announceSpy.firstCall.args[0] as CustomEvent<{
+        message: string;
+        urgency: string;
+      }>;
+
+      expect(event.detail.message).to.equal('Row 2 deactivated');
+      expect(event.detail.urgency).to.equal('assertive');
+
+      document.body.removeEventListener('sl-announce', announceSpy);
+    });
+
+    it('should dispatch sl-announce with force=true when focusing into an active row', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const tbody = el.renderRoot.querySelector('tbody')!;
+      tbody.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+      await new Promise(resolve => setTimeout(resolve));
+
+      const announceSpy = spy();
+      document.body.addEventListener('sl-announce', announceSpy);
+
+      const td = el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td');
+      td?.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(announceSpy).to.have.been.calledOnce;
+
+      const event = announceSpy.firstCall.args[0] as CustomEvent<{
+        message: string;
+        urgency: string;
+        force: boolean;
+      }>;
+
+      expect(event.detail.message).to.equal('In activated row 1');
+      expect(event.detail.urgency).to.equal('assertive');
+      expect(event.detail.force).to.be.true;
+
+      document.body.removeEventListener('sl-announce', announceSpy);
+    });
+
     it('should keep sticky active row cells opaque', async () => {
       el = await fixture(html`
         <sl-grid
@@ -720,6 +832,53 @@ describe('sl-grid', () => {
       expect(toggleSpy).to.have.been.calledOnce;
       expect(toggleSpy.firstCall.args[0]).to.have.property('data', el.items?.at(0));
     });
+
+    it('should dispatch sl-announce event when selecting a row', async () => {
+      const announceSpy = spy();
+      document.body.addEventListener('sl-announce', announceSpy);
+
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(announceSpy).to.have.been.calledOnce;
+
+      const event = announceSpy.firstCall.args[0] as CustomEvent<{
+        message: string;
+        urgency: string;
+      }>;
+      expect(event.detail.message).to.equal('Row 1 activated');
+      expect(event.detail.urgency).to.equal('assertive');
+
+      document.body.removeEventListener('sl-announce', announceSpy);
+    });
+
+    it('should dispatch sl-announce event when deselecting a row', async () => {
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const announceSpy = spy();
+      document.body.addEventListener('sl-announce', announceSpy);
+
+      el.renderRoot
+        .querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')
+        ?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(announceSpy).to.have.been.calledOnce;
+
+      const event = announceSpy.firstCall.args[0] as CustomEvent<{
+        message: string;
+        urgency: string;
+      }>;
+      expect(event.detail.message).to.equal('Row 1 deactivated');
+      expect(event.detail.urgency).to.equal('assertive');
+
+      document.body.removeEventListener('sl-announce', announceSpy);
+    });
   });
 
   describe('bulk actions', () => {
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index 99e5c3880c..d1997ed7ab 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -611,7 +611,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
       ],
       ariaCurrent =
         this.rowAction === 'activate'
-          ? active || selected
+          ? active
             ? 'true'
             : nothing
           : (this.dataSource?.selects ?? this.selects) === 'single'
@@ -785,7 +785,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
     const row = (event.target as HTMLElement)?.closest?.('tr');
 
-    if (!row || !row.hasAttribute('aria-current')) {
+    if (!row || this.rowAction !== 'activate' || !row.part.contains('active')) {
       return;
     }
 

From bb65092b3c3bdfa617d13b7c511cfdaff9ee5b93 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 12:17:20 +0200
Subject: [PATCH 12/18] Changes after Copilot review

---
 packages/components/announcer/src/announce.ts        |  2 +-
 packages/components/grid/src/grid.ts                 |  3 +++
 .../components/grid/src/stories/selection.stories.ts | 12 ++++++------
 .../inline-message/src/inline-message.spec.ts        |  1 -
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/components/announcer/src/announce.ts b/packages/components/announcer/src/announce.ts
index 7316ec2965..6505aa9942 100644
--- a/packages/components/announcer/src/announce.ts
+++ b/packages/components/announcer/src/announce.ts
@@ -10,6 +10,6 @@
  */
 export function announce(message: string, urgency?: 'polite' | 'assertive', force?: boolean): void {
   document.body.dispatchEvent(
-    new CustomEvent('sl-announce', { detail: { message, urgency, force } })
+    new CustomEvent('sl-announce', { detail: { message, urgency, ...(force ? { force } : {}) } })
   );
 }
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index d1997ed7ab..c1429b77a7 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -758,6 +758,9 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
 
     this.#announceSelection(item, index);
     this.#skipNextFocusAnnounce = true;
+
+    // Reset the flag soon so it only skips focus events from this click (e.g. focus moving to a button in the row)
+    setTimeout(() => (this.#skipNextFocusAnnounce = false));
   }
 
   #onColumnUpdate(event: Event & { target: GridColumn<T> }): void {
diff --git a/packages/components/grid/src/stories/selection.stories.ts b/packages/components/grid/src/stories/selection.stories.ts
index c2a3d5d31d..3a82b45605 100644
--- a/packages/components/grid/src/stories/selection.stories.ts
+++ b/packages/components/grid/src/stories/selection.stories.ts
@@ -79,9 +79,9 @@ export const Activate: Story = {
                 aria-description=${isActive ? 'Deactivate row' : 'Activate row'}
                 aria-pressed=${isActive ? 'true' : 'false'}
                 fill="link"
-                variant="primary"
-                >${avatarRenderer(student)}</sl-button
-              >
+                variant="primary">
+                ${avatarRenderer(student)}
+              </sl-button>
             `;
           }}
           .scopedElements=${{ 'sl-avatar': Avatar, 'sl-button': Button }}></sl-grid-column>
@@ -524,9 +524,9 @@ export const WithLinks: Story = {
                 aria-description=${isActive ? 'Deactivate row' : 'Activate row'}
                 aria-pressed=${isActive ? 'true' : 'false'}
                 fill="link"
-                variant="primary"
-                >${avatarRenderer(student)}</sl-button
-              >
+                variant="primary">
+                ${avatarRenderer(student)}
+              </sl-button>
             `;
           }}
           .scopedElements=${{ 'sl-avatar': Avatar, 'sl-button': Button }}></sl-grid-column>
diff --git a/packages/components/inline-message/src/inline-message.spec.ts b/packages/components/inline-message/src/inline-message.spec.ts
index adf1bc7601..fd39267458 100644
--- a/packages/components/inline-message/src/inline-message.spec.ts
+++ b/packages/components/inline-message/src/inline-message.spec.ts
@@ -215,7 +215,6 @@ describe('sl-inline-message', () => {
       const announcement = announce.lastCall.firstArg as SlAnnounceEvent;
 
       expect(announcement.detail).to.deep.equal({
-        force: undefined,
         message: 'Title  Inline message',
         urgency: 'polite'
       });

From 3ea96c3faec648540cdf0f02998f2c9e81781ab6 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 12:35:53 +0200
Subject: [PATCH 13/18] Changeset

---
 .changeset/short-nails-attend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/short-nails-attend.md

diff --git a/.changeset/short-nails-attend.md b/.changeset/short-nails-attend.md
new file mode 100644
index 0000000000..2bb3e9c680
--- /dev/null
+++ b/.changeset/short-nails-attend.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/announcer': minor
+---
+
+Added a `force` option to the `announce()` function to allow repeated announcements of the same message (e.g. when re-focusing an active row in the grid).

From 55f182b6f45cceb296d02a32c33b5c1a50a1171e Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 12:57:55 +0200
Subject: [PATCH 14/18] Changeset update

---
 .changeset/vast-wombats-cut.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.changeset/vast-wombats-cut.md b/.changeset/vast-wombats-cut.md
index c5c8768244..b3530863cb 100644
--- a/.changeset/vast-wombats-cut.md
+++ b/.changeset/vast-wombats-cut.md
@@ -2,4 +2,10 @@
 '@sl-design-system/grid': patch
 ---
 
-Accessibility improvements: announces row selection state to screen readers via the announcer utility.
+Accessibility improvements for row activation and selection:
+
+- Added `aria-current` to the active/selected row in activate and single-select modes.
+- The grid now announces row activation and deactivation to screen readers.
+- When you focus an already active row with the keyboard, the grid reannounces it (using `force`).
+
+**Note:** If you use a button to trigger row activation, you should add `aria-pressed` and `aria-description` to it yourself. The grid does not set these for you. See the `'Activate'` story for an example of how to do this.

From 193220ea02f907ef52a1683f1220f2fa684d9ca2 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 13:48:53 +0200
Subject: [PATCH 15/18] remove unnecessay change

---
 .storybook/stories/links.stories.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.storybook/stories/links.stories.ts b/.storybook/stories/links.stories.ts
index 1dcdba72b6..c5dca32eaf 100644
--- a/.storybook/stories/links.stories.ts
+++ b/.storybook/stories/links.stories.ts
@@ -14,9 +14,7 @@ export default {
     In the theme is a global.css file containing styling for links. This works as a global style for
     links in your application and links in the light dom of SLDS components.
     <br />
-    <a href="https://sanomalearning.design" target="_blank" rel="noopener noreferrer"
-      >Sanoma Learning Design system</a
-    >
+    <a href="https://sanomalearning.design" target="_blank" rel="noopener noreferrer">Sanoma Learning Design system</a>
   `
 } satisfies Meta<Props>;
 

From 3cc6f8ff8884bab4af12145b5d0166045dd0bb7b Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 14:43:28 +0200
Subject: [PATCH 16/18] update urgency level in grid announcements from
 'assertive' to 'polite'

---
 packages/components/grid/src/grid.spec.ts | 8 ++++----
 packages/components/grid/src/grid.ts      | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index 8af5bf9539..ed96f9f87e 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -643,7 +643,7 @@ describe('sl-grid', () => {
       }>;
 
       expect(event.detail.message).to.equal('Row 2 activated');
-      expect(event.detail.urgency).to.equal('assertive');
+      expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
     });
@@ -665,7 +665,7 @@ describe('sl-grid', () => {
       }>;
 
       expect(event.detail.message).to.equal('Row 2 deactivated');
-      expect(event.detail.urgency).to.equal('assertive');
+      expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
     });
@@ -849,7 +849,7 @@ describe('sl-grid', () => {
         urgency: string;
       }>;
       expect(event.detail.message).to.equal('Row 1 activated');
-      expect(event.detail.urgency).to.equal('assertive');
+      expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
     });
@@ -875,7 +875,7 @@ describe('sl-grid', () => {
         urgency: string;
       }>;
       expect(event.detail.message).to.equal('Row 1 deactivated');
-      expect(event.detail.urgency).to.equal('assertive');
+      expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
     });
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index c1429b77a7..4fb4806a35 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -775,7 +775,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
       selected
         ? msg(str`Row ${index} activated`, { id: 'sl.grid.rowActivated' })
         : msg(str`Row ${index} deactivated`, { id: 'sl.grid.rowDeactivated' }),
-      'assertive'
+      'polite'
     );
   }
 
@@ -795,6 +795,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
     const index = row.getAttribute('aria-rowindex');
 
     if (index) {
+      // Use 'assertive' so the user knows right away which row they are in
       announce(
         msg(str`In activated row ${index}`, { id: 'sl.grid.inActivatedRow' }),
         'assertive',

From e1ac05f416545bd831e4bd15c75f7e0af07dbb3a Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 15:05:25 +0200
Subject: [PATCH 17/18] Changes after Copilot review

---
 packages/components/announcer/src/announcer.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/announcer/src/announcer.ts b/packages/components/announcer/src/announcer.ts
index 105eb5a84f..216b4319a1 100644
--- a/packages/components/announcer/src/announcer.ts
+++ b/packages/components/announcer/src/announcer.ts
@@ -59,8 +59,10 @@ export class Announcer extends LitElement {
 
     if (event.detail.force) {
       this.#forceCounter++;
-      // Append invisible zero-width spaces to make each message unique for screen readers
-      messageNode.innerText = event.detail.message + '\u200B'.repeat((this.#forceCounter % 2) + 1);
+      // Append invisible zero width spaces to make each message unique for screen readers.
+      // We use % 4 so the suffix cycles through 1 – 4 characters, which is enough to avoid
+      // duplicates while messages are still in the live region (removed after 500ms).
+      messageNode.innerText = event.detail.message + '\u200B'.repeat((this.#forceCounter % 4) + 1);
     } else if (container?.textContent?.indexOf(event.detail.message) === -1) {
       // make sure the message is not already in the container
       messageNode.innerText = event.detail.message;

From e09901570edcea7796753da99f2cb969475b53a4 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 17 Jun 2026 16:18:08 +0200
Subject: [PATCH 18/18] update grid row announcements to reflect correct row
 numbers

---
 packages/components/grid/src/grid.spec.ts | 10 +++++-----
 packages/components/grid/src/grid.ts      | 12 +++++++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/components/grid/src/grid.spec.ts b/packages/components/grid/src/grid.spec.ts
index ed96f9f87e..871f1329d6 100644
--- a/packages/components/grid/src/grid.spec.ts
+++ b/packages/components/grid/src/grid.spec.ts
@@ -642,7 +642,7 @@ describe('sl-grid', () => {
         urgency: string;
       }>;
 
-      expect(event.detail.message).to.equal('Row 2 activated');
+      expect(event.detail.message).to.equal('Row 3 activated');
       expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
@@ -664,7 +664,7 @@ describe('sl-grid', () => {
         urgency: string;
       }>;
 
-      expect(event.detail.message).to.equal('Row 2 deactivated');
+      expect(event.detail.message).to.equal('Row 3 deactivated');
       expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
@@ -693,7 +693,7 @@ describe('sl-grid', () => {
         force: boolean;
       }>;
 
-      expect(event.detail.message).to.equal('In activated row 1');
+      expect(event.detail.message).to.equal('In activated row 2');
       expect(event.detail.urgency).to.equal('assertive');
       expect(event.detail.force).to.be.true;
 
@@ -848,7 +848,7 @@ describe('sl-grid', () => {
         message: string;
         urgency: string;
       }>;
-      expect(event.detail.message).to.equal('Row 1 activated');
+      expect(event.detail.message).to.equal('Row 2 activated');
       expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
@@ -874,7 +874,7 @@ describe('sl-grid', () => {
         message: string;
         urgency: string;
       }>;
-      expect(event.detail.message).to.equal('Row 1 deactivated');
+      expect(event.detail.message).to.equal('Row 2 deactivated');
       expect(event.detail.urgency).to.equal('polite');
 
       document.body.removeEventListener('sl-announce', announceSpy);
diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts
index 4fb4806a35..c22adfcbb0 100644
--- a/packages/components/grid/src/grid.ts
+++ b/packages/components/grid/src/grid.ts
@@ -771,10 +771,13 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
     const selected =
       this.rowAction === 'activate' ? !!this.activeRow : !!this.dataSource?.isSelected(item);
 
+    // Add 1 to account for the header row
+    const rowNumber = index + 1;
+
     announce(
       selected
-        ? msg(str`Row ${index} activated`, { id: 'sl.grid.rowActivated' })
-        : msg(str`Row ${index} deactivated`, { id: 'sl.grid.rowDeactivated' }),
+        ? msg(str`Row ${rowNumber} activated`, { id: 'sl.grid.rowActivated' })
+        : msg(str`Row ${rowNumber} deactivated`, { id: 'sl.grid.rowDeactivated' }),
       'polite'
     );
   }
@@ -795,9 +798,12 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
     const index = row.getAttribute('aria-rowindex');
 
     if (index) {
+      // Add 1 to account for the header row
+      const rowNumber = Number(index) + 1;
+
       // Use 'assertive' so the user knows right away which row they are in
       announce(
-        msg(str`In activated row ${index}`, { id: 'sl.grid.inActivatedRow' }),
+        msg(str`In activated row ${rowNumber}`, { id: 'sl.grid.inActivatedRow' }),
         'assertive',
         true
       );