♿ a11y(tab-component): Keyboard interaction of tabs

.changeset/sweet-boxes-judge.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**tabs**: tabs with links are rendered as a navigation element(link list)

packages/core/src/components.d.ts

@@ -721,6 +721,10 @@ export namespace Components {
           * If `true`, in Angular reactive forms the control will not be set invalid
          */
         "autoInvalidOff": boolean;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": BalProps.BalInputAutocomplete;
         /**
           * Closes the accordion
          */
@@ -3161,6 +3165,10 @@ export namespace Components {
           * If `true` the tab items can be open and closed
          */
         "accordion": boolean;
+        /**
+          * Defines the aria label of the nav element
+         */
+        "ariaNavLabel": string;
         /**
           * If `true` a light border is shown for the tabs.
          */
@@ -3328,6 +3336,10 @@ export namespace Components {
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          */
         "autocapitalize": string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": BalProps.BalInputAutocomplete;
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
@@ -5792,6 +5804,10 @@ declare namespace LocalJSX {
           * If `true`, in Angular reactive forms the control will not be set invalid
          */
         "autoInvalidOff"?: boolean;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: BalProps.BalInputAutocomplete;
         /**
           * Closes the datepicker popover after selection
          */
@@ -8226,6 +8242,10 @@ declare namespace LocalJSX {
           * If `true` the tab items can be open and closed
          */
         "accordion"?: boolean;
+        /**
+          * Defines the aria label of the nav element
+         */
+        "ariaNavLabel"?: string;
         /**
           * If `true` a light border is shown for the tabs.
          */
@@ -8398,6 +8418,10 @@ declare namespace LocalJSX {
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          */
         "autocapitalize"?: string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: BalProps.BalInputAutocomplete;
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */

packages/core/src/components/bal-tabs/bal-tabs.tsx

@@ -129,6 +129,11 @@ export class Tabs
    */
   @Prop() iconPosition: BalProps.BalTabsIconPosition = 'horizontal'
 
+  /**
+   * Defines the aria label of the nav element
+   */
+  @Prop() ariaNavLabel = ''
+
   /**
    * If `true` the field expands over the whole width.
    */
@@ -365,6 +370,10 @@ export class Tabs
    * ------------------------------------------------------
    */
 
+  /**
+   * Tells if the component acts as a tab or link list.
+   * If only one link is in the list it will be a link list.
+   */
   private get isTabList(): boolean {
     return this.store.filter(tab => !!tab.href).length === 0
   }
@@ -868,6 +877,7 @@ export class Tabs
             hasCarousel={hasCarousel}
             iconPosition={this.iconPosition}
             verticalColSize={this.verticalColSize}
+            ariaNavLabel={this.ariaNavLabel}
             onSelectTab={this.onSelectTab}
           ></TabNav>
         )}

packages/core/src/components/bal-tabs/components/tab-button.tsx

@@ -69,7 +69,7 @@ export const TabButton: FunctionalComponent<TabButtonProps> = ({
   const attrs = isTabButton
     ? {
         'type': 'button',
-        'role': 'tab',
+        'role': isLinkList ? undefined : 'tab',
         'aria-controls': item.aria?.controls || item.tabPanelID || undefined,
         'aria-expanded': item.active ? 'true' : 'false',
         'aria-disabled': `${item.disabled}`,

packages/core/src/components/bal-tabs/components/tab-nav.tsx

@@ -22,6 +22,7 @@ export interface TabNavProps {
   spaceless: boolean
   expanded: boolean
   isLinkList: boolean
+  ariaNavLabel: string
   verticalColSize: BalProps.BalTabsColSize
   iconPosition: BalProps.BalTabsIconPosition
   context?: BalProps.BalTabsContext
@@ -49,6 +50,7 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
   verticalColSize,
   iconPosition,
   context,
+  ariaNavLabel,
   onSelectTab,
 }) => {
   const bemEl = BEM.block('tabs').element('nav')
@@ -77,9 +79,12 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
     ></TabButton>
   )
 
+  const HostEl = isLinkList ? 'nav' : 'div'
+
   return (
-    <div
+    <HostEl
       id={`${tabsId}-nav`}
+      aria-label={ariaNavLabel}
       class={{
         ...bemEl.class(),
         ...bemEl.modifier(`full-height`).class(isFullHeight),
@@ -96,7 +101,7 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
           class={{
             ...bemEl.element('carousel').class(),
           }}
-          htmlRole={'tablist'}
+          htmlRole={isLinkList ? undefined : 'tablist'}
           fullHeight={isFullHeight}
           border={border}
           inverted={inverted}
@@ -107,7 +112,7 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
         >
           {tabs.map((tab, index) => (
             <bal-carousel-item
-              htmlRole={''}
+              htmlRole={isLinkList ? 'listitem' : undefined}
               class={{
                 ...bemEl.element('carousel').element('item').class(),
                 ...bemEl.element('carousel').element('item').modifier('expanded').class(expanded),
@@ -156,6 +161,6 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
       ) : (
         ''
       )}
-    </div>
+    </HostEl>
   )
 }

packages/core/src/components/bal-tabs/test/bal-tabs.cy.html

@@ -183,6 +183,18 @@
           <bal-tab-item value="tab-c" label="My Tab C" bubble>Content of Tab C</bal-tab-item>
           <bal-tab-item value="tab-d" label="Disabled Tab D" disabled>Content of Tab D</bal-tab-item>
         </bal-tabs>
+
+        <bal-heading>Tabs & Links</bal-heading>
+        <bal-tabs data-testid="tabs-and-links" value="tab-c" border aria-nav-label="Navigation">
+          <bal-tab-item value="tab-a" label="Tab A">Content of Tab A</bal-tab-item>
+          <bal-tab-item value="tab-b" label="Tab B">Content of Tab B</bal-tab-item>
+          <bal-tab-item value="tab-c" label="Tab C">Content of Tab C</bal-tab-item>
+          <bal-tab-item
+            value="tab-d"
+            label="Link"
+            href="http://localhost:4000/components/bal-tabs/test/bal-tabs.cy.html"
+          ></bal-tab-item>
+        </bal-tabs>
       </main>
     </bal-doc-app>
   </body>