add accessibility to localization

only set fallback english values
implement on ModelSelect and ProgressBar

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

@@ -1,4 +1,8 @@
 {
+    "accessibility": {
+        "modelSelect": "Model Select",
+        "invokeProgressBar": "Invoke progress bar"
+    },
     "common": {
         "hotkeysLabel": "Hotkeys",
         "themeLabel": "Theme",

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

@@ -6,6 +6,7 @@ import IAISelect from 'common/components/IAISelect';
 import { isEqual, map } from 'lodash';
 
 import { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import { activeModelSelector, systemSelector } from '../store/systemSelectors';
 
 const selector = createSelector(
@@ -24,6 +25,7 @@ const selector = createSelector(
 
 const ModelSelect = () => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const { models, isProcessing } = useAppSelector(selector);
   const activeModel = useAppSelector(activeModelSelector);
   const handleChangeModel = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -38,7 +40,7 @@ const ModelSelect = () => {
     >
       <IAISelect
         style={{ fontSize: 'sm' }}
-        aria-label="Model Select"
+        aria-label={t('accessibility.modelSelect')}
         tooltip={activeModel.description}
         isDisabled={isProcessing}
         value={activeModel.name}

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

@@ -3,6 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
 import { SystemState } from 'features/system/store/systemSlice';
 import { isEqual } from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants';
 import { systemSelector } from '../store/systemSelectors';
 
@@ -22,6 +23,7 @@ const progressBarSelector = createSelector(
 );
 
 const ProgressBar = () => {
+  const { t } = useTranslation();
   const { isProcessing, currentStep, totalSteps, currentStatusHasSteps } =
     useAppSelector(progressBarSelector);
 
@@ -30,7 +32,7 @@ const ProgressBar = () => {
   return (
     <Progress
       value={value}
-      aria-label="Invoking progress bar"
+      aria-label={t('accessibility.invokeProgressBar')}
       isIndeterminate={isProcessing && !currentStatusHasSteps}
       height={PROGRESS_BAR_THICKNESS}
       zIndex={99}