fix(tab-nav): content clickable for screen readers

telekom · Mar 24, 2023 · 077d608 · 077d608
1 parent b6e2be8
commit 077d608
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 30 deletions.
diff --git a/packages/components/src/components/tab-header/tab-header.tsx b/packages/components/src/components/tab-header/tab-header.tsx
@@ -9,7 +9,18 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Prop, Host, Watch, State, Element } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import classNames from 'classnames';
 import { ScaleIcon, isScaleIcon } from '../../utils/utils';
 import statusNote from '../../utils/status-note';
@@ -34,15 +45,27 @@ export class TabHeader {
   /** @deprecated - size should replace small */
   @Prop() small?: boolean = false;
   /** (optional) size  */
-  @Prop() size: 'small' | 'large' = 'small';
+  @Prop() size?: 'small' | 'large' = 'small';
   /** (optional) autoFocus  */
   @Prop() autoFocus?: boolean;
+  /** (optional) Whether the tab is selected */
+  @Prop() selected?: boolean;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
-  @Prop() selected: boolean;
 
   @State() hasFocus: boolean = false;
 
+  @Event({ eventName: 'scale-select' }) scaleSelect: EventEmitter;
+
+  @Listen('click')
+  handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    if (this.disabled) {
+      return;
+    }
+    this.scaleSelect.emit();
+  }
+
   @Watch('selected')
   selectedChanged(newValue: boolean) {
     if (!this.hostElement.isConnected) {

diff --git a/packages/components/src/components/tab-nav/tab-nav.tsx b/packages/components/src/components/tab-nav/tab-nav.tsx
@@ -40,33 +40,12 @@ export class TabNav {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
-  @Listen('click')
-  handleClick(event: MouseEvent) {
-    // To provent event bubbling.
-    event.stopPropagation();
-
-    // workaround for slotted icons
-    const targetHTMLElement = event.target as HTMLElement;
-    const targetTag = targetHTMLElement.tagName.toLowerCase();
-    const svgTags = ['svg', 'g', 'path'];
-    let nextTab: HTMLScaleTabHeaderElement;
-
-    if (svgTags.includes(targetTag)) {
-      const closestNextTab = targetHTMLElement.closest(
-        `scale-tab-header[role="tab"]`
-      ) as HTMLScaleTabHeaderElement;
-      if (closestNextTab) {
-        nextTab = closestNextTab;
-        this.selectTab(nextTab);
-      }
-    } else {
-      if (
-        (event.target as HTMLScaleTabHeaderElement).getAttribute('role') ===
-        'tab'
-      ) {
-        nextTab = event.target as HTMLScaleTabHeaderElement;
-        this.selectTab(nextTab);
-      }
+  @Listen('scale-select')
+  handleSelect(event) {
+    const nextTab = event.target as HTMLScaleTabHeaderElement;
+    // Act only if it's a direct child
+    if (this.getAllEnabledTabs().includes(nextTab)) {
+      this.selectTab(nextTab);
     }
   }