feat: add title attribute to IconButton for enhanced accessibility

By adding a title attribute, we ensure that sighted users receive a tooltip on hover, enhancing the overall usability of the button. This change complements the existing aria-label attribute, making the button more accessible and informative to all users. --------- Co-authored-by: Igor Danchenko <[email protected]>
igordanchenko · Jul 2, 2024 · 46c779a · 46c779a
1 parent e6ab6e8
commit 46c779a
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -4,10 +4,7 @@ import { clsx, cssClass, label as translateLabel } from "../utils.js";
 import { useLightboxProps } from "../contexts/index.js";
 import { ELEMENT_BUTTON, ELEMENT_ICON } from "../consts.js";
 
-export type IconButtonProps = Omit<
-  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
-  "type" | "aria-label"
-> & {
+export type IconButtonProps = React.ComponentProps<"button"> & {
   label: string;
   icon: React.ElementType;
   renderIcon?: () => React.ReactNode;
@@ -18,12 +15,14 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(f
   ref,
 ) {
   const { styles, labels } = useLightboxProps();
+  const buttonLabel = translateLabel(labels, label);
 
   return (
     <button
       ref={ref}
       type="button"
-      aria-label={translateLabel(labels, label)}
+      title={buttonLabel}
+      aria-label={buttonLabel}
       className={clsx(cssClass(ELEMENT_BUTTON), className)}
       onClick={onClick}
       style={{ ...style, ...styles.button }}