Merge pull request #888 from MyPureCloud/feature/COMUI-3309_dropdown-…

…multi_tabs_accessibility feat(tabs): disabled tab is not focusable
MyPureCloud · Feb 17, 2025 · 571cf02 · 571cf02
2 parents 6d2d8c2 + 42a525a
commit 571cf02
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 16 deletions.
diff --git a/...ges/genesys-spark-components/src/components/stable/gux-tabs/gux-tab-list/gux-tab-list.tsx b/...ges/genesys-spark-components/src/components/stable/gux-tabs/gux-tab-list/gux-tab-list.tsx
@@ -140,7 +140,9 @@ export class GuxTabList {
   }
 
   private setTabTriggers(): void {
-    this.tabTriggers = this.root.querySelectorAll('gux-tab');
+    this.tabTriggers = this.root.querySelectorAll(
+      'gux-tab:not([gux-disabled])'
+    );
     if (this.tabTriggers) {
       this.triggerIds = Array.from(this.tabTriggers)
         .map(trigger => `gux-${trigger.getAttribute('tab-id')}-tab`)

diff --git a/packages/genesys-spark-components/src/components/stable/gux-tabs/gux-tab/gux-tab.tsx b/packages/genesys-spark-components/src/components/stable/gux-tabs/gux-tab/gux-tab.tsx
@@ -78,6 +78,16 @@ export class GuxTab {
     return this.active;
   }
 
+  private getTabIndex(): number | null {
+    if (this.guxDisabled) {
+      return null;
+    }
+    if (this.active) {
+      return 0;
+    }
+    return -1;
+  }
+
   render(): JSX.Element {
     return (
       <button
@@ -87,12 +97,12 @@ export class GuxTab {
           'gux-active': this.active
         }}
         type="button"
-        aria-disabled={this.guxDisabled.toString()}
+        disabled={this.guxDisabled}
         id={`gux-${this.tabId}-tab`}
         role="tab"
         aria-controls={`gux-${this.tabId}-panel`}
         aria-selected={this.active.toString()}
-        tabIndex={this.active ? 0 : -1}
+        tabIndex={this.getTabIndex()}
         ref={el => (this.buttonElement = el)}
       >
         <gux-tooltip-title ref={el => (this.tooltipTitleElement = el)}>

diff --git a/...omponents/src/components/stable/gux-tabs/gux-tab/tests/__snapshots__/gux-tab.spec.ts.snap b/...omponents/src/components/stable/gux-tabs/gux-tab/tests/__snapshots__/gux-tab.spec.ts.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gux-tab should render 1`] = `
+GuxTab {
+  "buttonElement": <button aria-controls="gux-undefined-panel" aria-selected="false" class="gux-tab" id="gux-undefined-tab" role="tab" tabindex="-1" type="button">
+  <gux-tooltip-title>
+    <span></span>
+  </gux-tooltip-title>
+</button>,
+  "internalactivatetabpanel": {
+    "emit": [Function],
+  },
+  "tooltipTitleElement": <gux-tooltip-title>
+    <span></span>
+  </gux-tooltip-title>,
+}
+`;
+
+exports[`gux-tab should render disabled 1`] = `
+GuxTab {
+  "buttonElement": <button aria-controls="gux-undefined-panel" aria-selected="false" class="gux-disabled gux-tab" disabled="" id="gux-undefined-tab" role="tab" type="button">
+  <gux-tooltip-title>
+    <span></span>
+  </gux-tooltip-title>
+</button>,
+  "internalactivatetabpanel": {
+    "emit": [Function],
+  },
+  "tooltipTitleElement": <gux-tooltip-title>
+    <span></span>
+  </gux-tooltip-title>,
+}
+`;
diff --git a/...ges/genesys-spark-components/src/components/stable/gux-tabs/gux-tab/tests/gux-tab.spec.ts b/...ges/genesys-spark-components/src/components/stable/gux-tabs/gux-tab/tests/gux-tab.spec.ts
@@ -2,10 +2,11 @@ import { newSpecPage } from '@test/specTestUtils';
 import { GuxTab } from '../gux-tab';
 
 describe('gux-tab', () => {
+  let page: any;
   let component: GuxTab;
 
   beforeEach(async () => {
-    const page = await newSpecPage({
+    page = await newSpecPage({
       components: [GuxTab],
       html: `<gux-tab></gux-tab>`,
       language: 'en'
@@ -17,4 +18,15 @@ describe('gux-tab', () => {
   it('should build', async () => {
     expect(component).toBeInstanceOf(GuxTab);
   });
+
+  it('should render', async () => {
+    expect(component).toMatchSnapshot();
+  });
+
+  // it should render disabled
+  it('should render disabled', async () => {
+    page.root.setAttribute('gux-disabled', 'true');
+    await page.waitForChanges();
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/...spark-components/src/components/stable/gux-tabs/tests/__snapshots__/gux-tabs.spec.ts.snap b/...spark-components/src/components/stable/gux-tabs/tests/__snapshots__/gux-tabs.spec.ts.snap
@@ -14,10 +14,10 @@ exports[`gux-tabs #render should render as expected 1`] = `
     <!---->
     <div class="gux-tab-container">
       <div class="gux-scroll-button-container"></div>
-      <div aria-owns="gux-2-1-tab gux-2-2-tab gux-2-3-tab gux-2-4-tab gux-2-5-tab" class="gux-scrollable-section" role="tablist">
+      <div aria-owns="gux-2-1-tab gux-2-2-tab gux-2-3-tab" class="gux-scrollable-section" role="tablist">
         <gux-tab tab-id="2-1">
           <!---->
-          <button aria-controls="gux-2-1-panel" aria-disabled="false" aria-selected="false" class="gux-tab" id="gux-2-1-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-1-panel" aria-selected="false" class="gux-tab" id="gux-2-1-tab" role="tab" tabindex="-1" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 1
@@ -27,7 +27,7 @@ exports[`gux-tabs #render should render as expected 1`] = `
         </gux-tab>
         <gux-tab tab-id="2-2">
           <!---->
-          <button aria-controls="gux-2-2-panel" aria-disabled="false" aria-selected="false" class="gux-tab" id="gux-2-2-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-2-panel" aria-selected="false" class="gux-tab" id="gux-2-2-tab" role="tab" tabindex="-1" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 2
@@ -37,7 +37,7 @@ exports[`gux-tabs #render should render as expected 1`] = `
         </gux-tab>
         <gux-tab tab-id="2-3">
           <!---->
-          <button aria-controls="gux-2-3-panel" aria-disabled="false" aria-selected="false" class="gux-tab" id="gux-2-3-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-3-panel" aria-selected="false" class="gux-tab" id="gux-2-3-tab" role="tab" tabindex="-1" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 3
@@ -47,7 +47,7 @@ exports[`gux-tabs #render should render as expected 1`] = `
         </gux-tab>
         <gux-tab gux-disabled="" tab-id="2-4">
           <!---->
-          <button aria-controls="gux-2-4-panel" aria-disabled="true" aria-selected="false" class="gux-disabled gux-tab" id="gux-2-4-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-4-panel" aria-selected="false" class="gux-disabled gux-tab" disabled="" id="gux-2-4-tab" role="tab" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 4
@@ -57,7 +57,7 @@ exports[`gux-tabs #render should render as expected 1`] = `
         </gux-tab>
         <gux-tab gux-disabled="" tab-id="2-5">
           <!---->
-          <button aria-controls="gux-2-5-panel" aria-disabled="true" aria-selected="false" class="gux-disabled gux-tab" id="gux-2-5-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-5-panel" aria-selected="false" class="gux-disabled gux-tab" disabled="" id="gux-2-5-tab" role="tab" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 5
@@ -116,10 +116,10 @@ exports[`gux-tabs #render should render vertical tabs as expected 1`] = `
     <!---->
     <div class="gux-tab-container">
       <div class="gux-scroll-button-container"></div>
-      <div aria-owns="gux-2-1-tab gux-2-2-tab gux-2-3-tab gux-2-4-tab gux-2-5-tab" class="gux-scrollable-section" role="tablist">
+      <div aria-owns="gux-2-1-tab gux-2-2-tab gux-2-3-tab" class="gux-scrollable-section" role="tablist">
         <gux-tab tab-id="2-1">
           <!---->
-          <button aria-controls="gux-2-1-panel" aria-disabled="false" aria-selected="false" class="gux-tab" id="gux-2-1-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-1-panel" aria-selected="false" class="gux-tab" id="gux-2-1-tab" role="tab" tabindex="-1" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 1
@@ -129,7 +129,7 @@ exports[`gux-tabs #render should render vertical tabs as expected 1`] = `
         </gux-tab>
         <gux-tab tab-id="2-2">
           <!---->
-          <button aria-controls="gux-2-2-panel" aria-disabled="false" aria-selected="false" class="gux-tab" id="gux-2-2-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-2-panel" aria-selected="false" class="gux-tab" id="gux-2-2-tab" role="tab" tabindex="-1" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 2
@@ -139,7 +139,7 @@ exports[`gux-tabs #render should render vertical tabs as expected 1`] = `
         </gux-tab>
         <gux-tab tab-id="2-3">
           <!---->
-          <button aria-controls="gux-2-3-panel" aria-disabled="false" aria-selected="false" class="gux-tab" id="gux-2-3-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-3-panel" aria-selected="false" class="gux-tab" id="gux-2-3-tab" role="tab" tabindex="-1" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 3
@@ -149,7 +149,7 @@ exports[`gux-tabs #render should render vertical tabs as expected 1`] = `
         </gux-tab>
         <gux-tab gux-disabled="" tab-id="2-4">
           <!---->
-          <button aria-controls="gux-2-4-panel" aria-disabled="true" aria-selected="false" class="gux-disabled gux-tab" id="gux-2-4-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-4-panel" aria-selected="false" class="gux-disabled gux-tab" disabled="" id="gux-2-4-tab" role="tab" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 4
@@ -159,7 +159,7 @@ exports[`gux-tabs #render should render vertical tabs as expected 1`] = `
         </gux-tab>
         <gux-tab gux-disabled="" tab-id="2-5">
           <!---->
-          <button aria-controls="gux-2-5-panel" aria-disabled="true" aria-selected="false" class="gux-disabled gux-tab" id="gux-2-5-tab" role="tab" tabindex="-1" type="button">
+          <button aria-controls="gux-2-5-panel" aria-selected="false" class="gux-disabled gux-tab" disabled="" id="gux-2-5-tab" role="tab" type="button">
             <gux-tooltip-title>
               <span>
                 Tab Header 5