Some accessibility fixes

storybookjs · Aug 28, 2024 · 2541a61 · 2541a61
1 parent 2a91532
commit 2541a61
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={`Got to ${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="Go to Storybook home"
             >
               <StorybookLogo
                 color={variant === 'home' ? 'white' : 'system'}