#5639 for TabMenu

primefaces · Dec 22, 2023 · e9b890a · e9b890a
1 parent 2d5c97b
commit e9b890a
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 14 deletions.
diff --git a/components/doc/tabmenu/basicdoc.js b/components/doc/tabmenu/basicdoc.js
@@ -16,7 +16,7 @@ export function BasicDoc(props) {
 <TabMenu model={items} />
         `,
         javascript: `
-import React from 'react'; 
+import React from 'react';
 import { TabMenu } from 'primereact/tabmenu';
 
 export default function BasicDemo() {
@@ -36,7 +36,7 @@ export default function BasicDemo() {
 }
         `,
         typescript: `
-import React from 'react'; 
+import React from 'react';
 import { TabMenu } from 'primereact/tabmenu';
 import { MenuItem } from 'primereact/menuitem';
 

diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
@@ -95,6 +95,107 @@ export const TabMenu = React.memo(
             updateInkBar();
         });
 
+        const onKeyDownItem = (event, item, index) => {
+            switch (event.code) {
+                case 'ArrowRight':
+                    navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Space':
+                case 'Enter':
+                    itemClick(event, item, index);
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    onTabKey();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const navigateToNextItem = (target) => {
+            const nextItem = findNextItem(target);
+
+            nextItem && setFocusToMenuitem(target, nextItem);
+        };
+
+        const navigateToPrevItem = (target) => {
+            const prevItem = findPrevItem(target);
+
+            prevItem && setFocusToMenuitem(target, prevItem);
+        };
+
+        const navigateToFirstItem = (target) => {
+            const firstItem = findFirstItem(target);
+
+            firstItem && setFocusToMenuitem(target, firstItem);
+        };
+
+        const navigateToLastItem = (target) => {
+            const lastItem = findLastItem(target);
+
+            lastItem && setFocusToMenuitem(target, lastItem);
+        };
+
+        const findNextItem = (item) => {
+            const nextItem = item.parentElement.nextElementSibling;
+
+            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? findNextItem(nextItem.children[0]) : nextItem.children[0]) : null;
+        };
+
+        const findPrevItem = (item) => {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;
+        };
+
+        const findFirstItem = () => {
+            const firstSibling = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+
+            return firstSibling ? firstSibling.children[0] : null;
+        };
+
+        const findLastItem = () => {
+            const siblings = DomHandler.find(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        };
+
+        const setFocusToMenuitem = (target, focusableItem) => {
+            target.tabIndex = '-1';
+            focusableItem.tabIndex = '0';
+            focusableItem.focus();
+        };
+
+        const onTabKey = () => {
+            const activeItem = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+            const focusedItem = DomHandler.findSingle(navRef.current, '[data-pc-section="action"][tabindex="0"]');
+
+            if (focusedItem !== activeItem.children[0]) {
+                activeItem && (activeItem.children[0].tabIndex = '0');
+                focusedItem.tabIndex = '-1';
+            }
+        };
+
         const createMenuItem = (item, index) => {
             if (item.visible === false) {
                 return null;
@@ -125,10 +226,11 @@ export const TabMenu = React.memo(
             const actionProps = mergeProps(
                 {
                     href: url || '#',
+                    role: 'menuitem',
+                    tabIndex: active ? '0' : '-1',
                     className: cx('action'),
                     target: target,
-                    onClick: (event) => itemClick(event, item, index),
-                    role: 'presentation'
+                    onClick: (event) => itemClick(event, item, index)
                 },
                 getPTOptions('action', item, index)
             );
@@ -162,11 +264,13 @@ export const TabMenu = React.memo(
                     ref: tabsRef.current[`tab_${index}`],
                     id: key,
                     key,
+                    onKeyDown: (event) => onKeyDownItem(event, item, index),
                     className: cx('menuitem', { _className, active, disabled }),
                     style: style,
-                    role: 'tab',
-                    'aria-selected': active,
-                    'aria-expanded': active,
+                    role: 'presentation',
+                    'aria-label': _label,
+                    'data-p-highlight': active,
+                    'data-p-disabled': disabled || false,
                     'aria-disabled': disabled
                 },
                 getPTOptions('menuitem', item, index)
@@ -185,15 +289,18 @@ export const TabMenu = React.memo(
             const inkbarProps = mergeProps(
                 {
                     ref: inkbarRef,
+                    role: 'none',
                     className: cx('inkbar')
                 },
                 ptm('inkbar')
             );
             const menuProps = mergeProps(
                 {
                     ref: navRef,
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
                     className: cx('menu'),
-                    role: 'tablist'
+                    role: 'menubar'
                 },
                 ptm('menu')
             );

diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js
@@ -24,15 +24,15 @@ const styles = `
     .p-tabmenu {
         overflow-x: auto;
     }
-    
+
     .p-tabmenu-nav {
         display: flex;
         margin: 0;
         padding: 0;
         list-style-type: none;
         flex-wrap: nowrap;
     }
-    
+
     .p-tabmenu-nav a {
         cursor: pointer;
         user-select: none;
@@ -43,20 +43,20 @@ const styles = `
         text-decoration: none;
         overflow: hidden;
     }
-    
+
     .p-tabmenu-nav a:focus {
         z-index: 1;
     }
-    
+
     .p-tabmenu-nav .p-menuitem-text {
         line-height: 1;
     }
-    
+
     .p-tabmenu-ink-bar {
         display: none;
         z-index: 1;
     }
-    
+
     .p-tabmenu::-webkit-scrollbar {
         display: none;
     }
@@ -69,6 +69,8 @@ export const TabMenuBase = ComponentBase.extend({
         id: null,
         model: null,
         activeIndex: 0,
+        ariaLabel: null,
+        ariaLabelledBy: null,
         style: null,
         className: null,
         onTabChange: null,