From fa7673f0f5070d0da03b762f89cd7b35a63b9571 Mon Sep 17 00:00:00 2001
From: Trevor Burch <Trevor.Burch@blackbaud.com>
Date: Fri, 2 Feb 2024 14:57:09 -0500
Subject: [PATCH] fix(components/tabs): tabs are read by screen readers in an
 industry standard format

---
 .../src/assets/locales/resources_en_US.json   |  4 ----
 .../shared/sky-tabs-resources.module.ts       |  1 -
 .../modules/tabs/tab-button.component.html    | 20 ++++++++++++-------
 .../tabs/src/lib/modules/tabs/tabs.module.ts  |  2 ++
 .../lib/modules/tabs/tabset.component.spec.ts | 12 ++++++++++-
 .../tabs/testing/src/tabs/tabset-fixture.ts   |  2 +-
 6 files changed, 27 insertions(+), 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
index a30e05e2ca..9364f97e47 100644
--- 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
index 35c83fd08c..c8fafaf468 100644
--- 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
index d17c318225..b4da67a6c7 100644
--- 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
index f1a4172083..390e9183c4 100644
--- 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
index 39bc879e8f..ef73593b6d 100644
--- 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
index 06808ec31f..1844d80329 100644
--- 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'),