Skip to content

Commit

Permalink
Some accessibility fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
cdedreuille committed Aug 28, 2024
1 parent 2a91532 commit 2541a61
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 6 deletions.
7 changes: 5 additions & 2 deletions apps/frontpage/components/docs/sidebar/version-selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,13 @@ export const VersionSelector: FC<VersionSelectorProps> = ({
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="flex items-center justify-between w-full h-10 px-2 mt-6 text-sm transition-all border-b cursor-pointer select-none border-zinc-200 text-zinc-600 hover:border-zinc-300 hover:text-zinc-900 dark:border-slate-700 dark:text-white">
<button
type="button"
className="mt-6 flex h-10 w-full cursor-pointer select-none items-center justify-between border-b border-zinc-200 px-2 text-sm text-zinc-600 transition-all hover:border-zinc-300 hover:text-zinc-900 dark:border-slate-700 dark:text-white"
>
{activeVersion.label}
<ChevronSmallDownIcon />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-40">
{docsVersions.map((version) => (
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/code-snippets-wrapper/copy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const Copy: FC<{ content: ReactNode }> = ({ content }) => {
className="ui-flex ui-h-8 ui-select-none ui-items-center ui-justify-between ui-gap-1 ui-rounded ui-px-2 ui-text-sm ui-text-slate-600 ui-transition-all hover:ui-border-zinc-300 hover:ui-bg-slate-200 hover:ui-text-slate-900 dark:ui-text-slate-400 dark:ui-hover:bg-slate-800"
onClick={onClick}
type="button"
aria-label="Copy"
>
{state === 'idle' ? <CopyIcon /> : <CheckIcon />}
</button>
Expand Down
23 changes: 19 additions & 4 deletions packages/ui/src/footer/top-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,31 @@ export function TopSection({ variant }: TopSectionProps): JSX.Element {
</div>
</div>
<div className="ui-flex ui-items-center ui-gap-4">
<Circle href="http://github.com/storybookjs" variant={variant}>
<Circle
href="http://github.com/storybookjs"
variant={variant}
name="GitHub"
>
<GithubIcon size={18} />
</Circle>
<Circle href="https://twitter.com/storybookjs" variant={variant}>
<Circle
href="https://twitter.com/storybookjs"
variant={variant}
name="Twitter"
>
<XIcon size={18} />
</Circle>
<Circle href="https://discord.gg/storybook" variant={variant}>
<Circle
href="https://discord.gg/storybook"
variant={variant}
name="Storybook"
>
<DiscordIcon size={18} />
</Circle>
<Circle
href="https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg"
variant={variant}
name="Youtube"
>
<YoutubeIcon size={18} />
</Circle>
Expand All @@ -45,9 +58,10 @@ interface CircleProps {
children: ReactNode;
href: string;
variant?: FooterProps['variant'];
name: string;
}

const Circle: FC<CircleProps> = ({ children, href, variant }) => {
const Circle: FC<CircleProps> = ({ children, href, variant, name }) => {
return (
<a
className={cn(
Expand All @@ -60,6 +74,7 @@ const Circle: FC<CircleProps> = ({ children, href, variant }) => {
href={href}
rel="noreferrer"
target="_blank"
aria-label={`Got to ${name}`}
>
{children}
</a>
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const Header: FC<HeaderProps> = ({
<a
className="ui-pl-2 md:ui-px-3 ui-h-8 ui-flex ui-items-center"
href="/"
aria-label="Go to Storybook home"
>
<StorybookLogo
color={variant === 'home' ? 'white' : 'system'}
Expand Down

0 comments on commit 2541a61

Please sign in to comment.