add aria-label

reearth · Oct 16, 2024 · b14b6ae · b14b6ae
1 parent ee2aae1
commit b14b6ae
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx
@@ -71,7 +71,7 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
           >
             <CompassIconWrapper
               icon="compass"
-              aria-label={t("aria-label-compass")}
+              ariaLabel={t("aria-label-compass")}
               compassDegree={compassDegree}
               size={64}
             />
@@ -92,7 +92,7 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
           >
             <Icon
               icon="navigatorAngle"
-              aria-label={t("aria-label-adjust-angle")}
+              ariaLabel={t("aria-label-adjust-angle")}
               size={32}
             />
           </AngleIcon>
@@ -101,16 +101,16 @@ const NavigatorUI: React.FC<Props> = memo(function NavigatorPresenterMemo({
       </CompassContainer>
       <Tool publishedTheme={theme}>
         <ToolIconButton onClick={onZoomIn} publishedTheme={theme}>
-          <Icon icon="plus" aria-label={t("aria-label-zoom-in")} />
+          <Icon icon="plus" ariaLabel={t("aria-label-zoom-in")} />
         </ToolIconButton>
         <ToolIconButton onClick={onRestoreRotate} publishedTheme={theme}>
           <Icon
             icon="home"
-            aria-label={t("aria-label-Go-to-the-home-position")}
+            ariaLabel={t("aria-label-Go-to-the-home-position")}
           />
         </ToolIconButton>
         <ToolIconButton onClick={onZoomOut} publishedTheme={theme}>
-          <Icon icon="minus" aria-label={t("aria-label-zoom-out")} />
+          <Icon icon="minus" ariaLabel={t("aria-label-zoom-out")} />
         </ToolIconButton>
       </Tool>
     </Container>

diff --git a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx
@@ -10,13 +10,15 @@ export type IconProps = {
   size?: "large" | "normal" | "small" | number;
   color?: string;
   className?: string;
+  ariaLabel?: string;
 };
 
 export const Icon: FC<IconProps> = ({
   icon,
   size = "normal",
   color,
-  className
+  className,
+  ariaLabel
 }) => {
   const theme = useTheme();
   const SvgIcon = useMemo(() => {
@@ -36,6 +38,11 @@ export const Icon: FC<IconProps> = ({
   }, [icon, theme]);
 
   return SvgIcon ? (
-    <SvgIcon size={size} color={color} className={className} />
+    <SvgIcon
+      size={size}
+      color={color}
+      className={className}
+      aria-label={ariaLabel}
+    />
   ) : null;
 };