Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

add accessibility to localization

Browse Source 
only set fallback english values
implement on ModelSelect and ProgressBar
This commit is contained in:
ElrikUnderlake 2023-03-07 21:30:51 -06:00
parent 6b41127421
commit c3c1511ec6
No known key found for this signature in database
GPG Key ID: E9A5CF18AF6E2C67
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/public/locales/en.json
View File

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

4
invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
View File

@ -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}

4
invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
View File

@ -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}