fix(tabs-extended): change anchor-based tabs to button-based tabs (#8365

) ### Related Ticket(s) Fixes #8357 ### Description Fixes an issue where iOS on tablet couldn't use tabs. ### Changelog **Changed** - changes `<a>` elements to `<button>` elements in tabs so iOS devices getting the desktop-style layout can navigate with voiceover
carbon-design-system · Mar 8, 2022 · 2225471 · 2225471
1 parent 876d190
commit 2225471
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 7 deletions.
diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
@@ -64,11 +64,30 @@
         height: auto;
         overflow: visible;
         white-space: normal;
+        background: none;
+        border: initial;
+        border-bottom: carbon--rem(2px) solid $ui-03;
+        display: inline-flex;
+        width: $spacing-13;
+        text-align: left;
 
         &[hasTooltip] {
           @include tooltip--trigger('definition', top);
           @include tooltip--placement('definition', 'bottom', 'start');
 
+          &::before,
+          &::after {
+            display: none;
+          }
+
+          &:hover,
+          &:focus {
+            &::before,
+            &::after {
+              display: flex;
+            }
+          }
+
           &:focus {
             @include focus-outline('outline');
           }
@@ -129,9 +148,6 @@
 
         .#{$prefix}--tabs__nav-link {
           width: auto;
-        }
-
-        a.#{$prefix}--tabs__nav-link {
           padding: 0;
           border-bottom: carbon--rem(2px) solid transparent;
         }
@@ -193,3 +209,64 @@
 @include exports('tabs-extended') {
   @include tabs-extended;
 }
+
+button.#{$prefix}--tabs__nav-link {
+  @include focus-outline('reset');
+
+  display: inline-block;
+  overflow: hidden;
+  width: calc(100% - #{$spacing-07});
+  height: rem(40px);
+  padding: $spacing-04 0;
+  border-bottom: 1px solid $ui-03;
+  margin: 0 $spacing-05;
+  color: $text-02;
+  font-weight: 400;
+  line-height: $spacing-05;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition: border $duration--fast-01 motion(standard, productive),
+    outline $duration--fast-01 motion(standard, productive);
+  white-space: nowrap;
+
+  &:focus,
+  &:active {
+    @include focus-outline('outline');
+
+    width: 100%;
+    padding-left: $spacing-05;
+    margin: 0;
+  }
+
+  @include carbon--breakpoint(md) {
+    width: rem(160px);
+    padding: $spacing-04 $spacing-05 $spacing-03;
+    border-bottom: $tab-underline-color;
+    margin: 0;
+    line-height: inherit;
+
+    &:focus,
+    &:active {
+      width: rem(160px);
+      border-bottom: carbon--rem(2px);
+    }
+  }
+}
+
+.#{$prefix}--tabs--container button.#{$prefix}--tabs__nav-link {
+  @include carbon--breakpoint(md) {
+    height: rem(48px);
+    padding: $spacing-03 $spacing-05;
+    border-bottom: none;
+  }
+}
+
+.#{$prefix}--tabs__nav-item--disabled button.#{$prefix}--tabs__nav-link:active {
+  border-bottom: $tab-underline-disabled;
+  outline: none;
+}
+
+.#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected)
+  button.#{$prefix}--tabs__nav-link:active {
+  color: $text-02;
+}
diff --git a/packages/web-components/src/components/tabs-extended/tabs-extended.ts b/packages/web-components/src/components/tabs-extended/tabs-extended.ts
@@ -219,18 +219,17 @@ class DDSTabsExtended extends StableSelectorMixin(LitElement) {
             });
             return html`
               <li class="${classes}" data-target=".tab-${index}-default" role="tab" ?disabled="${disabled}">
-                <a
+                <button
                   tabindex="${active ? '0' : '-1'}"
                   id="tab-link-${index}-default"
                   class="${prefix}--tabs__nav-link"
-                  href="javascript:void(0)"
-                  role="tab"
+                  type="button"
                   aria-controls="tab-panel-${index}-default"
                   aria-selected="${active}"
                   @click="${e => this._handleClick(index, e)}"
                 >
                   <div><p>${label}</p></div>
-                </a>
+                </button>
               </li>
             `;
           })}