include asociated component id with the options passed to a tab menu

finos · Aug 29, 2023 · 6faa7f1 · 6faa7f1
1 parent f9ee72c
commit 6faa7f1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
@@ -65,7 +65,6 @@ export const Stack = forwardRef(function Stack(
   ref: ForwardedRef<HTMLDivElement>
 ) {
   const id = useId(idProp);
-
   const { allowCloseTab, allowRenameTab } = TabstripProps;
 
   // TODO integrate with Tabstrip drag drop
@@ -93,6 +92,9 @@ export const Stack = forwardRef(function Stack(
   );
 
   const activeChild = () => {
+    //TODO need to inject an id if child does not have one, so we can
+    // establish the aria-controls relationship. In a Vuu layout, there
+    // will always be an id.
     if (React.isValidElement(children)) {
       return children;
     }
@@ -104,14 +106,14 @@ export const Stack = forwardRef(function Stack(
 
   const renderTabs = () =>
     getChildElements(children).map((child, idx) => {
-      const rootId = `${id}-${idx}`;
-      const { closeable = allowCloseTab, id: childId } = child.props;
+      const { closeable = allowCloseTab, id: childId = `${id}-${idx}` } =
+        child.props;
       return (
         <Tab
-          ariaControls={`${rootId}-tab`}
+          ariaControls={childId}
           data-icon={getTabIcon(child, idx)}
-          key={childId ?? idx}
-          id={rootId}
+          key={childId}
+          id={`${childId}-tab`}
           index={idx}
           label={getTabLabel(child, idx)}
           closeable={closeable}

diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
@@ -155,6 +155,7 @@ export const Tab = forwardRef(function Tab(
         <TabMenu
           allowClose={closeable}
           allowRename={editable}
+          controlledComponentId={ariaControls}
           location={location}
           onMenuAction={onMenuAction as MenuActionHandler}
           onMenuClose={onMenuClose}

diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
@@ -15,15 +15,20 @@ const classBase = "vuuTabMenu";
 export interface TabMenuProps {
   allowClose: boolean;
   allowRename: boolean;
+  index: number;
   location?: string;
   onMenuAction: MenuActionHandler;
   onMenuClose?: () => void;
-  index: number;
+  /**
+   * The id of associated component, if available
+   */
+  controlledComponentId?: string;
 }
 
 export const TabMenu = ({
   allowClose,
   allowRename,
+  controlledComponentId,
   location,
   onMenuAction,
   onMenuClose,
@@ -42,10 +47,11 @@ export const TabMenu = ({
         return menuItems;
       },
       {
+        controlledComponentId,
         tabIndex: index,
       },
     ],
-    [allowClose, allowRename, index]
+    [allowClose, allowRename, controlledComponentId, index]
   );
 
   return (