[Discover] Tabs - a11y improvements

Author: MiloszRadzynski

src/platform/packages/shared/kbn-unified-tabs/src/components/tab/tab.tsx

@@ -264,6 +264,7 @@ export const Tab: React.FC<TabProps> = (props) => {
                     item={item}
                     getTabMenuItems={getTabMenuItems}
                     isPopoverOpen={isActionPopoverOpen}
+                    isSelected={isSelected}
                     setPopover={onToggleActionsMenu}
                     onEnterRenaming={onEnterRenaming}
                   />
@@ -273,14 +274,14 @@ export const Tab: React.FC<TabProps> = (props) => {
             )}
             {!disableCloseButton && !!onClose && (
               <EuiFlexItem grow={false} className="unifiedTabs__closeTabBtn">
-                <EuiToolTip content={closeButtonLabel}>
+                <EuiToolTip content={closeButtonLabel} disableScreenReaderOutput>
                   <EuiButtonIcon
-                    // semantically role="tablist" does not allow other buttons in tabs
-                    aria-hidden={true}
+                    aria-label={closeButtonLabel}
                     color="text"
                     data-test-subj={`unifiedTabs_closeTabBtn_${item.id}`}
                     iconType="cross"
                     onClick={onCloseEvent}
+                    tabIndex={isSelected ? 0 : -1}
                   />
                 </EuiToolTip>
               </EuiFlexItem>

src/platform/packages/shared/kbn-unified-tabs/src/components/tab_menu/tab_menu.tsx

@@ -25,6 +25,7 @@ export interface TabMenuProps {
   item: TabItem;
   getTabMenuItems: GetTabMenuItems;
   isPopoverOpen: boolean;
+  isSelected: boolean;
   setPopover: (isOpen: boolean) => void;
   onEnterRenaming: () => void;
 }
@@ -33,6 +34,7 @@ export const TabMenu: React.FC<TabMenuProps> = ({
   item,
   getTabMenuItems,
   isPopoverOpen,
+  isSelected,
   setPopover,
   onEnterRenaming,
 }) => {
@@ -92,11 +94,10 @@ export const TabMenu: React.FC<TabMenuProps> = ({
       anchorPosition="downLeft"
       closePopover={closePopover}
       button={
-        <EuiToolTip content={menuButtonLabel}>
+        <EuiToolTip content={menuButtonLabel} disableScreenReaderOutput>
           <EuiButtonIcon
-            // semantically role="tablist" does not allow other buttons in tabs
-            aria-hidden={true}
-            tabIndex={-1}
+            aria-label={menuButtonLabel}
+            tabIndex={isSelected ? 0 : -1}
             color="text"
             data-test-subj={`unifiedTabs_tabMenuBtn_${item.id}`}
             iconType="boxesVertical"

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx

@@ -11,6 +11,7 @@ import type { KeyboardEvent } from 'react';
 import React, {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
   forwardRef,
@@ -264,6 +265,11 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
       [items, selectedItem, selectAndMoveFocusToItemIndex, onClose, emitOnKeyUsedEvent]
     );
 
+    const ariaOwnsValue = useMemo(
+      () => items.map((item) => getTabIdAttribute(item)).join(' '),
+      [items]
+    );
+
     const mainTabsBarContent = (
       <EuiFlexGroup
         responsive={false}
@@ -276,7 +282,13 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
         <EuiFlexItem ref={setTabsContainerWithPlusElement} grow css={growingFlexItemCss}>
           <EuiFlexGroup direction="row" gutterSize="s" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false} css={growingFlexItemCss}>
-              <div ref={setTabsContainerElement} role="tablist" css={tabsContainerCss}>
+              <div
+                aria-orientation="horizontal"
+                aria-owns={ariaOwnsValue}
+                ref={setTabsContainerElement}
+                role="tablist"
+                css={tabsContainerCss}
+              >
                 {/*
                   OptionalDroppable provides the drag-drop context wrapper.
                   When disableDragAndDrop=false, it sets up EuiDragDropContext and EuiDroppable.