Merge pull request #222 from storybookjs/fix-accessibility

Fixes some accessibility issues
storybookjs · Aug 28, 2024 · 63f76ae · 63f76ae
2 parents 2a91532 + 8edc61e
commit 63f76ae
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/apps/frontpage/components/docs/sidebar/version-selector.tsx b/apps/frontpage/components/docs/sidebar/version-selector.tsx
@@ -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) => (

diff --git a/packages/ui/src/code-snippets-wrapper/copy.tsx b/packages/ui/src/code-snippets-wrapper/copy.tsx
@@ -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>

diff --git a/packages/ui/src/footer/top-section.tsx b/packages/ui/src/footer/top-section.tsx
@@ -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>
@@ -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(
@@ -60,6 +74,7 @@ const Circle: FC<CircleProps> = ({ children, href, variant }) => {
  href={href}
  rel="noreferrer"
  target="_blank"
+ aria-label={name}
  >
  {children}
  </a>

diff --git a/packages/ui/src/header/index.tsx b/packages/ui/src/header/index.tsx
@@ -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="Home"
  >
  <StorybookLogo
  color={variant === 'home' ? 'white' : 'system'}