Merge pull request #32238 from storybookjs/sidnioulz/issue-31436-table

Docs: Move button in ArgsTable heading to fix screenreader announcements

Author: valentinpalkovic

code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx

@@ -167,13 +167,14 @@ export const TableWrapper = styled.table<{
   },
 }));
 
-const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
-  margin: '-4px -12px -4px 0',
-}));
+const TablePositionWrapper = styled.div({
+  position: 'relative',
+});
 
-const ControlHeadingWrapper = styled.span({
-  display: 'flex',
-  justifyContent: 'space-between',
+const ButtonPositionWrapper = styled.div({
+  position: 'absolute',
+  right: 8,
+  top: 6,
 });
 
 export enum ArgsTableError {
@@ -380,82 +381,94 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
 
   return (
     <ResetWrapper>
-      <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable sb-unstyled">
-        <thead className="docblock-argstable-head">
-          <tr>
-            <th>
-              <span>Name</span>
-            </th>
-            {compact ? null : (
-              <th>
-                <span>Description</span>
-              </th>
-            )}
-            {compact ? null : (
-              <th>
-                <span>Default</span>
-              </th>
-            )}
-            {updateArgs ? (
+      <TablePositionWrapper>
+        {updateArgs && !isLoading && resetArgs && (
+          <ButtonPositionWrapper>
+            <IconButton
+              onClick={() => resetArgs()}
+              aria-label="Reset controls"
+              title="Reset controls"
+            >
+              <UndoIcon />
+            </IconButton>
+          </ButtonPositionWrapper>
+        )}
+
+        <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable sb-unstyled">
+          <thead className="docblock-argstable-head">
+            <tr>
               <th>
-                <ControlHeadingWrapper>
-                  Control{' '}
-                  {!isLoading && resetArgs && (
-                    <StyledIconButton onClick={() => resetArgs()} title="Reset controls">
-                      <UndoIcon aria-hidden />
-                    </StyledIconButton>
-                  )}
-                </ControlHeadingWrapper>
+                <span>Name</span>
               </th>
-            ) : null}
-          </tr>
-        </thead>
-        <tbody className="docblock-argstable-body">
-          {groups.ungrouped.map((row) => (
-            <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
-          ))}
-
-          {Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => (
-            <SectionRow key={subcategory} label={subcategory} level="subsection" colSpan={colSpan}>
-              {subsection.map((row) => (
-                <ArgRow
-                  key={row.key}
-                  row={row}
-                  arg={args && args[row.key]}
-                  expandable={expandable}
-                  {...common}
-                />
-              ))}
-            </SectionRow>
-          ))}
-
-          {Object.entries(groups.sections).map(([category, section]) => (
-            <SectionRow key={category} label={category} level="section" colSpan={colSpan}>
-              {section.ungrouped.map((row) => (
-                <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
-              ))}
-              {Object.entries(section.subsections).map(([subcategory, subsection]) => (
-                <SectionRow
-                  key={subcategory}
-                  label={subcategory}
-                  level="subsection"
-                  colSpan={colSpan}
-                >
-                  {subsection.map((row) => (
-                    <ArgRow
-                      key={row.key}
-                      row={row}
-                      arg={args && args[row.key]}
-                      expandable={expandable}
-                      {...common}
-                    />
-                  ))}
-                </SectionRow>
-              ))}
-            </SectionRow>
-          ))}
-        </tbody>
-      </TableWrapper>
+              {compact ? null : (
+                <th>
+                  <span>Description</span>
+                </th>
+              )}
+              {compact ? null : (
+                <th>
+                  <span>Default</span>
+                </th>
+              )}
+              {updateArgs ? (
+                <th>
+                  <span>Control</span>
+                </th>
+              ) : null}
+            </tr>
+          </thead>
+          <tbody className="docblock-argstable-body">
+            {groups.ungrouped.map((row) => (
+              <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
+            ))}
+
+            {Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => (
+              <SectionRow
+                key={subcategory}
+                label={subcategory}
+                level="subsection"
+                colSpan={colSpan}
+              >
+                {subsection.map((row) => (
+                  <ArgRow
+                    key={row.key}
+                    row={row}
+                    arg={args && args[row.key]}
+                    expandable={expandable}
+                    {...common}
+                  />
+                ))}
+              </SectionRow>
+            ))}
+
+            {Object.entries(groups.sections).map(([category, section]) => (
+              <SectionRow key={category} label={category} level="section" colSpan={colSpan}>
+                {section.ungrouped.map((row) => (
+                  <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
+                ))}
+                {Object.entries(section.subsections).map(([subcategory, subsection]) => (
+                  <SectionRow
+                    key={subcategory}
+                    label={subcategory}
+                    level="subsection"
+                    colSpan={colSpan}
+                  >
+                    {subsection.map((row) => (
+                      <ArgRow
+                        key={row.key}
+                        row={row}
+                        arg={args && args[row.key]}
+                        expandable={expandable}
+                        {...common}
+                      />
+                    ))}
+                  </SectionRow>
+                ))}
+              </SectionRow>
+            ))}
+          </tbody>
+        </TableWrapper>
+      </TablePositionWrapper>
     </ResetWrapper>
   );
 };