Chore/accessibility add all aria labels to translation (#2919)

# Overview
Setting up the `aria-label` props as translations

invokeai/frontend/web/dist/assets/ThemeLocaleProvider-2a8c2f39.js

@@ -1,4 +1,4 @@
-import{j as y,cM as Ie,r as _,cN as bt,q as Vr,cO as o,cP as b,cQ as v,cR as S,cS as Lr,cT as ut,cU as vt,cV as ft,cW as mt,n as ht,cX as gt,E as pt}from"./index-61f10aa8.js";import{d as yt,i as St,T as xt,j as $t,s as kt,g as _t}from"./scrollbar-7e342734.js";var Or=`
+import{j as y,cM as Ie,r as _,cN as bt,q as Vr,cO as o,cP as b,cQ as v,cR as S,cS as Lr,cT as ut,cU as vt,cV as ft,cW as mt,n as ht,cX as gt,E as pt}from"./index-c5a5b67c.js";import{d as yt,i as St,T as xt,j as $t,s as kt,g as _t}from"./scrollbar-af26543e.js";var Or=`
   :root {
     --chakra-vh: 100vh;
   }

invokeai/frontend/web/dist/index.html

@@ -12,7 +12,7 @@
         margin: 0;
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-61f10aa8.js"></script>
+    <script type="module" crossorigin src="./assets/index-c5a5b67c.js"></script>
     <link rel="stylesheet" href="./assets/index-5483945c.css">
   </head>
 

invokeai/frontend/web/dist/locales/en.json

@@ -1,7 +1,25 @@
 {
     "accessibility": {
         "modelSelect": "Model Select",
-        "invokeProgressBar": "Invoke progress bar"
+        "invokeProgressBar": "Invoke progress bar",
+        "reset": "Reset",
+        "uploadImage": "Upload Image",
+        "previousImage": "Previous Image",
+        "nextImage": "Next Image",
+        "useThisParameter": "Use this parameter",
+        "copyMetadataJson": "Copy metadata JSON",
+        "exitViewer": "ExitViewer",
+        "zoomIn": "Zoom In",
+        "zoomOut": "Zoom Out",
+        "rotateCounterClockwise": "Rotate Counter-Clockwise",
+        "rotateClockwise": "Rotate Clockwise",
+        "flipHorizontally": "Flip Horizontally",
+        "flipVertically": "Flip Vertically",
+        "modifyConfig": "Modify Config",
+        "toggleAutoscroll": "Toggle autoscroll",
+        "toggleLogViewer": "Toggle Log Viewer",
+        "showGallery": "Show Gallery",
+        "showOptionsPanel": "Show Options Panel"
     },
     "common": {
         "hotkeysLabel": "Hotkeys",

invokeai/frontend/web/public/locales/en.json

@@ -1,7 +1,25 @@
 {
     "accessibility": {
         "modelSelect": "Model Select",
-        "invokeProgressBar": "Invoke progress bar"
+        "invokeProgressBar": "Invoke progress bar",
+        "reset": "Reset",
+        "uploadImage": "Upload Image",
+        "previousImage": "Previous Image",
+        "nextImage": "Next Image",
+        "useThisParameter": "Use this parameter",
+        "copyMetadataJson": "Copy metadata JSON",
+        "exitViewer": "ExitViewer",
+        "zoomIn": "Zoom In",
+        "zoomOut": "Zoom Out",
+        "rotateCounterClockwise": "Rotate Counter-Clockwise",
+        "rotateClockwise": "Rotate Clockwise",
+        "flipHorizontally": "Flip Horizontally",
+        "flipVertically": "Flip Vertically",
+        "modifyConfig": "Modify Config",
+        "toggleAutoscroll": "Toggle autoscroll",
+        "toggleLogViewer": "Toggle Log Viewer",
+        "showGallery": "Show Gallery",
+        "showOptionsPanel": "Show Options Panel"
     },
     "common": {
         "hotkeysLabel": "Hotkeys",

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -26,6 +26,7 @@ import {
 import { clamp } from 'lodash';
 
 import { FocusEvent, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BiReset } from 'react-icons/bi';
 import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
 
@@ -96,6 +97,8 @@ export default function IAISlider(props: IAIFullSliderProps) {
     ...rest
   } = props;
 
+  const { t } = useTranslation();
+
   const [localInputValue, setLocalInputValue] = useState<
     string | number | undefined
   >(String(value));
@@ -234,7 +237,7 @@ export default function IAISlider(props: IAIFullSliderProps) {
         {withReset && (
           <IAIIconButton
             size="sm"
-            aria-label="Reset"
+            aria-label={t('accessibility.reset')}
             tooltip="Reset"
             icon={<BiReset />}
             onClick={handleResetDisable}

invokeai/frontend/web/src/common/components/ImageUploaderIconButton.tsx

@@ -1,14 +1,16 @@
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaUpload } from 'react-icons/fa';
 import IAIIconButton from './IAIIconButton';
 
 const ImageUploaderIconButton = () => {
+  const { t } = useTranslation();
   const openImageUploader = useContext(ImageUploaderTriggerContext);
 
   return (
     <IAIIconButton
-      aria-label="Upload Image"
+      aria-label={t('accessibility.uploadImage')}
       tooltip="Upload Image"
       icon={<FaUpload />}
       onClick={openImageUploader || undefined}

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -42,6 +42,7 @@ import {
 import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 import { FaCopy } from 'react-icons/fa';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
 import { APP_METADATA_HEIGHT } from 'theme/util/constants';
@@ -66,12 +67,14 @@ const MetadataItem = ({
   labelPosition,
   withCopy = false,
 }: MetadataItemProps) => {
+  const { t } = useTranslation();
+
   return (
     <Flex gap={2}>
       {onClick && (
         <Tooltip label={`Recall ${label}`}>
           <IconButton
-            aria-label="Use this parameter"
+            aria-label={t('accessibility.useThisParameter')}
             icon={<IoArrowUndoCircleOutline />}
             size="xs"
             variant="ghost"
@@ -162,6 +165,8 @@ const ImageMetadataViewer = memo(
       width,
     } = metadata;
 
+    const { t } = useTranslation();
+
     const metadataJSON = JSON.stringify(image.metadata, null, 2);
 
     return (
@@ -422,7 +427,7 @@ const ImageMetadataViewer = memo(
                 <Flex gap={2}>
                   <Tooltip label="Copy metadata JSON">
                     <IconButton
-                      aria-label="Copy metadata JSON"
+                      aria-label={t('accessibility.copyMetadataJson')}
                       icon={<FaCopy />}
                       size="xs"
                       variant="ghost"

invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx

@@ -3,6 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { isEqual } from 'lodash';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { gallerySelector } from '../store/gallerySelectors';
 import {
@@ -51,6 +52,7 @@ export const nextPrevImageButtonsSelector = createSelector(
 
 const NextPrevImageButtons = () => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
 
   const { isOnFirstImage, isOnLastImage } = useAppSelector(
     nextPrevImageButtonsSelector
@@ -95,7 +97,7 @@ const NextPrevImageButtons = () => {
       >
         {shouldShowNextPrevButtons && !isOnFirstImage && (
           <IconButton
-            aria-label="Previous image"
+            aria-label={t('accessibility.previousImage')}
             icon={<FaAngleLeft size={64} />}
             variant="unstyled"
             onClick={handleClickPrevButton}
@@ -114,7 +116,7 @@ const NextPrevImageButtons = () => {
       >
         {shouldShowNextPrevButtons && !isOnLastImage && (
           <IconButton
-            aria-label="Next image"
+            aria-label={t('accessibility.nextImage')}
             icon={<FaAngleRight size={64} />}
             variant="unstyled"
             onClick={handleClickNextButton}

invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx

@@ -12,6 +12,7 @@ import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 import { BiExit } from 'react-icons/bi';
 import { TransformWrapper } from 'react-zoom-pan-pinch';
 import useImageTransform from '../hooks/useImageTransform';
@@ -38,6 +39,7 @@ export const lightboxSelector = createSelector(
 
 export default function Lightbox() {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const isLightBoxOpen = useAppSelector(
     (state: RootState) => state.lightbox.isLightboxOpen
   );
@@ -96,7 +98,7 @@ export default function Lightbox() {
         >
           <IAIIconButton
             icon={<BiExit />}
-            aria-label="Exit Viewer"
+            aria-label={t('accessibility.exitViewer')}
             onClick={() => {
               dispatch(setIsLightboxOpen(false));
             }}

invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomButtons.tsx

@@ -1,5 +1,6 @@
 import { ButtonGroup } from '@chakra-ui/react';
 import IAIIconButton from 'common/components/IAIIconButton';
+import { useTranslation } from 'react-i18next';
 import {
   BiReset,
   BiRotateLeft,
@@ -26,12 +27,13 @@ const ReactPanZoomButtons = ({
   reset,
 }: ReactPanZoomButtonsProps) => {
   const { zoomIn, zoomOut, resetTransform } = useTransformContext();
+  const { t } = useTranslation();
 
   return (
     <ButtonGroup isAttached orientation="vertical">
       <IAIIconButton
         icon={<BiZoomIn />}
-        aria-label="Zoom In"
+        aria-label={t('accessibility.zoomIn')}
         tooltip="Zoom In"
         onClick={() => zoomIn()}
         fontSize={20}
@@ -39,7 +41,7 @@ const ReactPanZoomButtons = ({
 
       <IAIIconButton
         icon={<BiZoomOut />}
-        aria-label="Zoom Out"
+        aria-label={t('accessibility.zoomOut')}
         tooltip="Zoom Out"
         onClick={() => zoomOut()}
         fontSize={20}
@@ -47,7 +49,7 @@ const ReactPanZoomButtons = ({
 
       <IAIIconButton
         icon={<BiRotateLeft />}
-        aria-label="Rotate Counter-Clockwise"
+        aria-label={t('accessibility.rotateCounterClockwise')}
         tooltip="Rotate Counter-Clockwise"
         onClick={rotateCounterClockwise}
         fontSize={20}
@@ -55,7 +57,7 @@ const ReactPanZoomButtons = ({
 
       <IAIIconButton
         icon={<BiRotateRight />}
-        aria-label="Rotate Clockwise"
+        aria-label={t('accessibility.rotateClockwise')}
         tooltip="Rotate Clockwise"
         onClick={rotateClockwise}
         fontSize={20}
@@ -63,7 +65,7 @@ const ReactPanZoomButtons = ({
 
       <IAIIconButton
         icon={<MdFlip />}
-        aria-label="Flip Horizontally"
+        aria-label={t('accessibility.flipHorizontally')}
         tooltip="Flip Horizontally"
         onClick={flipHorizontally}
         fontSize={20}
@@ -71,7 +73,7 @@ const ReactPanZoomButtons = ({
 
       <IAIIconButton
         icon={<MdFlip style={{ transform: 'rotate(90deg)' }} />}
-        aria-label="Flip Vertically"
+        aria-label={t('accessibility.flipVertically')}
         tooltip="Flip Vertically"
         onClick={flipVertically}
         fontSize={20}
@@ -79,7 +81,7 @@ const ReactPanZoomButtons = ({
 
       <IAIIconButton
         icon={<BiReset />}
-        aria-label="Reset"
+        aria-label={t('accessibility.reset')}
         tooltip="Reset"
         onClick={() => {
           resetTransform();

invokeai/frontend/web/src/features/system/components/Console.tsx

@@ -11,6 +11,7 @@ import { isEqual } from 'lodash';
 import { Resizable } from 're-resizable';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa';
 import { systemSelector } from '../store/systemSelectors';
 
@@ -46,6 +47,7 @@ const consoleSelector = createSelector(
  */
 const Console = () => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const log = useAppSelector(logSelector);
   const { shouldShowLogViewer, hasError, wasErrorSeen } =
     useAppSelector(consoleSelector);
@@ -156,7 +158,7 @@ const Console = () => {
         >
           <IAIIconButton
             size="sm"
-            aria-label="Toggle autoscroll"
+            aria-label={t('accessibility.toggleAutoscroll')}
             icon={<FaAngleDoubleDown />}
             onClick={() => setShouldAutoscroll(!shouldAutoscroll)}
             isChecked={shouldAutoscroll}
@@ -175,7 +177,7 @@ const Console = () => {
       >
         <IAIIconButton
           size="sm"
-          aria-label="Toggle Log Viewer"
+          aria-label={t('accessibility.toggleLogViewer')}
           icon={shouldShowLogViewer ? <FaMinus /> : <FaCode />}
           onClick={handleClickLogViewerToggle}
           sx={{

invokeai/frontend/web/src/features/system/components/ModelManager/ModelListItem.tsx

@@ -94,7 +94,7 @@ export default function ModelListItem(props: ModelListItemProps) {
           icon={<EditIcon />}
           size="sm"
           onClick={openModelHandler}
-          aria-label="Modify Config"
+          aria-label={t('accessibility.modifyConfig')}
           isDisabled={status === 'active' || isProcessing || !isConnected}
         />
         <IAIAlertDialog

invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx

@@ -2,10 +2,12 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
+import { useTranslation } from 'react-i18next';
 import { MdPhotoLibrary } from 'react-icons/md';
 import { floatingSelector } from './FloatingParametersPanelButtons';
 
 const FloatingGalleryButton = () => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { shouldShowGalleryButton, shouldPinGallery } =
     useAppSelector(floatingSelector);
@@ -21,7 +23,7 @@ const FloatingGalleryButton = () => {
     <IAIIconButton
       tooltip="Show Gallery (G)"
       tooltipProps={{ placement: 'top' }}
-      aria-label="Show Gallery"
+      aria-label={t('accessibility.showGallery')}
       onClick={handleShowGallery}
       sx={{
         pos: 'absolute',

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -13,6 +13,7 @@ import {
 } from 'features/ui/store/uiSelectors';
 import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
 import { isEqual } from 'lodash';
+import { useTranslation } from 'react-i18next';
 
 import { FaSlidersH } from 'react-icons/fa';
 
@@ -68,6 +69,7 @@ export const floatingSelector = createSelector(
 
 const FloatingParametersPanelButtons = () => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const {
     shouldShowParametersPanelButton,
     shouldShowProcessButtons,
@@ -95,7 +97,7 @@ const FloatingParametersPanelButtons = () => {
       <IAIIconButton
         tooltip="Show Options Panel (O)"
         tooltipProps={{ placement: 'top' }}
-        aria-label="Show Options Panel"
+        aria-label={t('accessibility.showOptionsPanel')}
         onClick={handleShowOptionsPanel}
         sx={floatingButtonStyles}
       >