GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show rule IDs in a11y report

Browse Source
This commit is contained in:
Gert Hengeveld 2025-03-26 22:38:06 +01:00
parent ee47d66738
commit 3f0736377e
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
code/addons/a11y/src/components/Report/Report.tsx
View File

@ -1,7 +1,7 @@
import type { FC } from 'react'; import type { FC } from 'react';
import React from 'react'; import React from 'react';
import { EmptyTabContent, IconButton } from 'storybook/internal/components'; import { Badge, EmptyTabContent, IconButton } from 'storybook/internal/components';
import { ChevronSmallDownIcon } from '@storybook/icons'; import { ChevronSmallDownIcon } from '@storybook/icons';
@ -26,8 +26,8 @@ const HeaderBar = styled.div(({ theme }) => ({
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: 5, gap: 4,
paddingLeft: 15, padding: '6px 5px 6px 15px',
minHeight: 40, minHeight: 40,
background: 'none', background: 'none',
color: 'inherit', color: 'inherit',
@ -39,6 +39,16 @@ const HeaderBar = styled.div(({ theme }) => ({
}, },
})); }));
const Title = styled.div(({ theme }) => ({
flexGrow: 1,
fontWeight: theme.typography.weight.bold,
}));
const RuleId = styled(Badge)<{ onClick: (event: React.SyntheticEvent<Element>) => void }>({
whiteSpace: 'nowrap',
cursor: 'text',
});
export interface ReportProps { export interface ReportProps {
items: Result[]; items: Result[];
empty: string; empty: string;
@ -64,12 +74,15 @@ export const Report: FC<ReportProps> = ({
return ( return (
<Wrapper key={id}> <Wrapper key={id}>
<HeaderBar <HeaderBar
onClick={(e) => toggleOpen(e, type, item)} onClick={(event) => toggleOpen(event, type, item)}
role="button" role="button"
data-active={!!selection} data-active={!!selection}
> >
<strong>{item.help}</strong> <Title>{item.help}</Title>
<IconButton onClick={(ev) => toggleOpen(ev, type, item)}> <RuleId status="neutral" onClick={(event) => event.stopPropagation()}>
{item.id}
</RuleId>
<IconButton onClick={(event) => toggleOpen(event, type, item)}>
<Icon style={{ transform: `rotate(${selection ? -180 : 0}deg)` }} /> <Icon style={{ transform: `rotate(${selection ? -180 : 0}deg)` }} />
</IconButton> </IconButton>
</HeaderBar> </HeaderBar>