From 8f3ae96d7cd4edc18341305185e450a8432be061 Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Tue, 27 Apr 2021 16:35:45 -0700
Subject: [PATCH] fix(tabs-extended): update aria-selected label and disabled
 tab (#5917)

### Related Ticket(s)

#5814 #5815

### Description

Use `active` state to set `aria-selected` label. Adjust `tabindex` for `disabled` state

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../src/components/tabs-extended/tabs-extended.ts            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/components/tabs-extended/tabs-extended.ts b/packages/web-components/src/components/tabs-extended/tabs-extended.ts
index b1dce24e7b6..a718030e977 100644
--- a/packages/web-components/src/components/tabs-extended/tabs-extended.ts
+++ b/packages/web-components/src/components/tabs-extended/tabs-extended.ts
@@ -124,14 +124,15 @@ class DDSTabsExtended extends StableSelectorMixin(LitElement) {
               'bx--tabs__nav-item--disabled': disabled,
             });
             return html`
-              <li class="${classes}" data-target=".tab-${index}-default" role="tab" aria-selected="true" ?disabled="${disabled}">
+              <li class="${classes}" data-target=".tab-${index}-default" role="tab" ?disabled="${disabled}">
                 <a
-                  tabindex="${index + 1}"
+                  tabindex="${disabled ? -1 : index + 1}"
                   id="tab-link-${index}-default"
                   class="${prefix}--tabs__nav-link"
                   href="javascript:void(0)"
                   role="tab"
                   aria-controls="tab-panel-${index}-default"
+                  aria-selected="${active}"
                   @click="${e => this._handleClick(index, e)}"
                   >${label}</a
                 >