fix(grid): Grid selection - missing selected state for single select

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

.changeset/vast-wombats-cut.md

@@ -0,0 +1,11 @@
+---
+'@sl-design-system/grid': patch
+---
+
+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.

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 ? { force } : {}) } })
+  );
 }

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,15 +55,24 @@ 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) {
-      const messageNode = document.createElement('li');
-      messageNode.innerText = event.detail.message;
+    const messageNode = document.createElement('li');
 
-      container?.appendChild(messageNode);
-      setTimeout(() => {
-        messageNode.remove();
-      }, 500);
+    if (event.detail.force) {
+      this.#forceCounter++;
+      // 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;
+    } else {
+      return;
     }
+
+    container?.appendChild(messageNode);
+    setTimeout(() => {
+      messageNode.remove();
+    }, 500);
   }
 }

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",

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-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-current');
+      });
+    });
   });
 
   describe('multiple select', () => {
@@ -418,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')
@@ -429,7 +450,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();
@@ -440,7 +460,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();
@@ -451,17 +470,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();
@@ -470,7 +486,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();
@@ -586,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 3 activated');
+      expect(event.detail.urgency).to.equal('polite');
+
+      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 3 deactivated');
+      expect(event.detail.urgency).to.equal('polite');
+
+      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 2');
+      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
@@ -718,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 2 activated');
+      expect(event.detail.urgency).to.equal('polite');
+
+      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 2 deactivated');
+      expect(event.detail.urgency).to.equal('polite');
+
+      document.body.removeEventListener('sl-announce', announceSpy);
+    });
   });
 
   describe('bulk actions', () => {