Fix nesting of Tools in Addon Panel

storybookjs · Jan 30, 2023 · 943bd6d · 943bd6d
1 parent dd4904d
commit 943bd6d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
@@ -87,6 +87,7 @@ export function useList(list: ChildrenList) {
               active={isAddonsActive}
               preActive={isTooltipVisible}
               style={{ visibility: invisibleList.length ? 'visible' : 'hidden' }}
+              aria-hidden={!invisibleList.length}
               className="tabbutton"
               type="button"
               role="tab"
@@ -103,6 +104,7 @@ export function useList(list: ChildrenList) {
               <TabButton
                 id={`tabbutton-${sanitize(title)}`}
                 style={{ visibility: 'hidden' }}
+                aria-hidden
                 tabIndex={-1}
                 ref={(ref: HTMLButtonElement) => {
                   tabRefs.current.set(id, ref);

diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
@@ -170,7 +170,7 @@ export const Tabs: FC<TabsProps> = memo(
             })}
             <AddonTab menuName={menuName} actions={actions} />
           </TabBar>
-          {tools ? <Side right>{tools}</Side> : null}
+          {tools}
         </FlexBar>
         <Content id="panel-tab-content" bordered={bordered} absolute={absolute}>
           {list.map(({ id, active, render }) => render({ key: id, active }))}