fix(components/tabs): tabs are read by screen readers in an industry …

…standard format (#1984)
blackbaud · Feb 7, 2024 · f4fba7c · f4fba7c
1 parent 8258a43
commit f4fba7c
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/libs/components/tabs/src/assets/locales/resources_en_US.json b/libs/components/tabs/src/assets/locales/resources_en_US.json
@@ -23,10 +23,6 @@
     "_description": "Label for the tab open button",
     "message": "Open tab"
   },
-  "skyux_tabs_sr_tab_order": {
-    "_description": "Text that describes which tab the user is on out of the total tabs",
-    "message": "Tab {0} of {1}: {2}"
-  },
   "skyux_vertical_tabs_show_tabs_text": {
     "_description": "The default text for the show tabs button in mobile",
     "message": "Tab list"

diff --git a/libs/components/tabs/src/lib/modules/shared/sky-tabs-resources.module.ts b/libs/components/tabs/src/lib/modules/shared/sky-tabs-resources.module.ts
@@ -25,7 +25,6 @@ const RESOURCES: { [locale: string]: SkyLibResources } = {
     skyux_tabs_navigator_next: { message: 'Next' },
     skyux_tabs_navigator_previous: { message: 'Previous' },
     skyux_tab_open: { message: 'Open tab' },
-    skyux_tabs_sr_tab_order: { message: 'Tab {0} of {1}: {2}' },
     skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
     skyux_wizard_sr_step_current: { message: 'Step {0} of {1}, current: {2}' },
     skyux_wizard_sr_step_completed: {

diff --git a/libs/components/tabs/src/lib/modules/tabs/tab-button.component.html b/libs/components/tabs/src/lib/modules/tabs/tab-button.component.html
@@ -14,11 +14,12 @@
     [attr.aria-selected]="active"
     [attr.href]="buttonHref"
     [attr.aria-label]="
-      (tabStyle === 'wizard'
-        ? 'skyux_wizard_sr_step_' + wizardStepState
-        : 'skyux_tabs_sr_tab_order'
-      ) | skyLibResources : tabNumber : totalTabsCount : buttonText
+      tabStyle === 'wizard'
+        ? ('skyux_wizard_sr_step_' + wizardStepState
+          | skyLibResources : tabNumber : totalTabsCount : buttonText)
+        : null
     "
+    [attr.aria-labelledby]="tabStyle === 'wizard' ? null : tabHeading.id"
     [id]="buttonId"
     [ngClass]="{
       'sky-btn-tab-wizard': tabStyle === 'wizard',
@@ -32,9 +33,14 @@
     (focus)="onFocus()"
   >
     <span class="sky-tab-heading" [attr.aria-hidden]="true">
-      {{ buttonText }}
-      <span *ngIf="buttonTextCount !== undefined" class="sky-tab-header-count">
-        {{ buttonTextCount }}
+      <span skyId #tabHeading="skyId">
+        {{ buttonText }}
+        <span
+          *ngIf="buttonTextCount !== undefined"
+          class="sky-tab-header-count"
+        >
+          {{ buttonTextCount }}
+        </span>
       </span>
       <span
         *ngIf="closeable"

diff --git a/libs/components/tabs/src/lib/modules/tabs/tabs.module.ts b/libs/components/tabs/src/lib/modules/tabs/tabs.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { SkyIdModule } from '@skyux/core';
 import { SkyIconModule } from '@skyux/indicators';
 import { SkyDropdownModule } from '@skyux/popovers';
 import { SkyThemeModule } from '@skyux/theme';
@@ -24,6 +25,7 @@ import { SkyTabsetComponent } from './tabset.component';
     CommonModule,
     SkyDropdownModule,
     SkyIconModule,
+    SkyIdModule,
     SkyTabsResourcesModule,
     SkyThemeModule,
   ],

diff --git a/libs/components/tabs/src/lib/modules/tabs/tabset.component.spec.ts b/libs/components/tabs/src/lib/modules/tabs/tabset.component.spec.ts
@@ -11,6 +11,7 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SkyAppTestUtility, expect, expectAsync } from '@skyux-sdk/testing';
 import {
+  SkyIdService,
   SkyLayoutHostService,
   SkyResizeObserverMediaQueryService,
 } from '@skyux/core';
@@ -1702,6 +1703,12 @@ describe('Tabset component', () => {
     });
 
     describe('button aria label', () => {
+      beforeEach(() => {
+        let uniqueId = 0;
+        const idSvc = TestBed.inject(SkyIdService);
+        spyOn(idSvc, 'generateId').and.callFake(() => `MOCK_ID_${++uniqueId}`);
+      });
+
       it('should indicate the current state of a wizard step', fakeAsync(() => {
         const wizardFixture = TestBed.createComponent(
           SkyWizardTestFormComponent,
@@ -1742,7 +1749,10 @@ describe('Tabset component', () => {
         const tabBtns = debugElement.queryAll(By.css('.sky-btn-tab'));
         const tabBtn1 = tabBtns[0]?.nativeElement;
 
-        expect(tabBtn1?.ariaLabel).toEqual('Tab 1 of 3: Tab 1');
+        expect(tabBtn1?.ariaLabel).toBeNull();
+        expect(tabBtn1?.getAttribute('aria-labelledby')).toEqual(
+          jasmine.stringMatching(/MOCK_ID_[0-9]/),
+        );
       }));
     });
   });

diff --git a/libs/components/tabs/testing/src/tabs/tabset-fixture.ts b/libs/components/tabs/testing/src/tabs/tabset-fixture.ts
@@ -65,7 +65,7 @@ export class SkyTabsetFixture {
     const active = this.activeTabIndex === tabIndex;
     const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');
     const tabHeading = this.#getTextContent(
-      tabLinkEl.querySelector('.sky-tab-heading')?.childNodes[0],
+      tabLinkEl.querySelector('.sky-tab-heading span')?.childNodes[0],
     );
     const tabHeaderCount = this.#getTextContent(
       tabLinkEl.querySelector('.sky-tab-header-count'),