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

chore(accessibility): add all aria-labels

Browse Source
This commit is contained in:
ElrikUnderlake 2023-03-10 20:49:16 -06:00
parent 685df33584
commit e9f237f39d
No known key found for this signature in database
GPG Key ID: E9A5CF18AF6E2C67
11 changed files with 59 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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",

5
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

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

4
invokeai/frontend/web/src/common/components/ImageUploaderIconButton.tsx
View File

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

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

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

6
invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
View File

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

3
invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx
View File

@ -38,6 +38,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 +97,7 @@ export default function Lightbox() {
>
<IAIIconButton
icon={<BiExit />}
aria-label="Exit Viewer"
aria-label={t('accessibility.exitViewer')}
onClick={() => {
dispatch(setIsLightboxOpen(false));
}}

16
invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomButtons.tsx
View File

@ -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();

6
invokeai/frontend/web/src/features/system/components/Console.tsx
View File

@ -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={{

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

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

4
invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
View File

@ -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',

4
invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
View File

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