Add labels to icon buttons

NotWoods · May 10, 2024 · ca47b78 · ca47b78
1 parent c2a84e7
commit ca47b78
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 0 deletions.
diff --git a/packages/client/components/Button/CloseButton.tsx b/packages/client/components/Button/CloseButton.tsx
@@ -11,6 +11,7 @@ export function CloseButton(props: Props) {
   return (
     <IconButton
       class={props.class}
+      title="Close"
       onClick={props.onClick}
       style={{ gridArea: 'close' }}
     >

diff --git a/packages/client/components/Button/FloatingActionButton.tsx b/packages/client/components/Button/FloatingActionButton.tsx
@@ -9,6 +9,7 @@ export function FloatingActionButton({ mini, ...props }: Props) {
   return (
     <button
       type="button"
+      aria-label={props.title}
       {...props}
       class={clsx(
         'group text-white focus:ring-cyan',

diff --git a/packages/client/components/Button/IconButton.tsx b/packages/client/components/Button/IconButton.tsx
@@ -3,6 +3,7 @@ import type { JSX } from 'preact';
 import { forwardRef } from 'preact/compat';
 
 interface Props extends JSX.HTMLAttributes<HTMLButtonElement> {
+  title?: string;
   forceDark?: boolean;
 }
 
@@ -17,6 +18,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
     return (
       <button
         type="button"
+        aria-label={props.title}
         {...props}
         class={clsx(
           'block flex-shrink-0 rounded-full w-12 h-12 p-3 focus:ring-cyan focus:border-cyan border-transparent bg-opacity-0 dark:bg-opacity-0 hover:bg-opacity-10 motion-safe:transition-colors',

diff --git a/packages/client/page/overlay/BaseOverlay.tsx b/packages/client/page/overlay/BaseOverlay.tsx
@@ -55,6 +55,7 @@ export function BaseOverlay({ children, title, logo, onNavigate }: Props) {
               onClick={onNavigate}
               forceDark
               accessKey="s"
+              title="Up"
             >
               <UpIcon />
             </IconButton>