diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ad7100f..379d7706 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to - 🩹(frontend) remove incorrect reference to ProConnect on the prejoin #1080 - ✨(frontend) add Ctrl+Shift+/ to open shortcuts settings #1050 +- ♿(frontend) announce selected state to screen readers #1081 ### Changed diff --git a/src/frontend/src/locales/de/global.json b/src/frontend/src/locales/de/global.json index af954d61..be614dc8 100644 --- a/src/frontend/src/locales/de/global.json +++ b/src/frontend/src/locales/de/global.json @@ -25,6 +25,7 @@ "heading": "Überprüfen Sie Ihren Meeting-Code", "body": "Stellen Sie sicher, dass Sie den richtigen Meeting-Code in der URL eingegeben haben. Beispiel:" }, + "selected": "ausgewählt", "submit": "OK", "footer": { "links": { diff --git a/src/frontend/src/locales/en/global.json b/src/frontend/src/locales/en/global.json index 58095d5b..b3cab291 100644 --- a/src/frontend/src/locales/en/global.json +++ b/src/frontend/src/locales/en/global.json @@ -25,6 +25,7 @@ "heading": "Verify your meeting code", "body": "Check that you have entered the correct meeting code in the URL. Example:" }, + "selected": "selected", "submit": "OK", "footer": { "links": { diff --git a/src/frontend/src/locales/fr/global.json b/src/frontend/src/locales/fr/global.json index 3dc3fcd5..386b5fa6 100644 --- a/src/frontend/src/locales/fr/global.json +++ b/src/frontend/src/locales/fr/global.json @@ -25,6 +25,7 @@ "heading": "Vérifier votre code de réunion", "body": "Vérifiez que vous avez saisi le code de réunion correct dans l'URL. Exemple :" }, + "selected": "sélectionné", "submit": "OK", "footer": { "links": { diff --git a/src/frontend/src/locales/nl/global.json b/src/frontend/src/locales/nl/global.json index 36be7e44..8d155916 100644 --- a/src/frontend/src/locales/nl/global.json +++ b/src/frontend/src/locales/nl/global.json @@ -24,6 +24,7 @@ "notFound": { "heading": "Pagina niet gevonden" }, + "selected": "geselecteerd", "submit": "OK", "footer": { "links": { diff --git a/src/frontend/src/primitives/MenuList.tsx b/src/frontend/src/primitives/MenuList.tsx index 4ce4e75c..58d66a52 100644 --- a/src/frontend/src/primitives/MenuList.tsx +++ b/src/frontend/src/primitives/MenuList.tsx @@ -1,5 +1,7 @@ import { ReactNode } from 'react' import { Menu, MenuProps, MenuItem } from 'react-aria-components' +import { useTranslation } from 'react-i18next' +import { VisuallyHidden } from '@/styled-system/jsx' import { menuRecipe } from '@/primitives/menuRecipe.ts' import type { RecipeVariantProps } from '@/styled-system/types' @@ -19,6 +21,7 @@ export const MenuList = ({ } & MenuProps & RecipeVariantProps) => { const [variantProps] = menuRecipe.splitVariantProps(menuProps) + const { t } = useTranslation('global') const classes = menuRecipe({ extraPadding: true, variant: variant, @@ -39,11 +42,19 @@ export const MenuList = ({ className={classes.item} key={value} id={value as string} + textValue={typeof label === 'string' ? label : undefined} onAction={() => { onAction(value as T) }} > - {label} + {({ isSelected }) => ( + <> + {label} + {isSelected && ( + , {t('selected')} + )} + + )} ) })} diff --git a/src/frontend/src/primitives/Select.tsx b/src/frontend/src/primitives/Select.tsx index 888f5a64..ae8a78be 100644 --- a/src/frontend/src/primitives/Select.tsx +++ b/src/frontend/src/primitives/Select.tsx @@ -1,5 +1,5 @@ import { type ReactNode } from 'react' -import { styled } from '@/styled-system/jsx' +import { styled, VisuallyHidden } from '@/styled-system/jsx' import { RemixiconComponentType, RiArrowDropDownLine } from '@remixicon/react' import { Button, @@ -9,6 +9,7 @@ import { SelectProps as RACSelectProps, SelectValue, } from 'react-aria-components' +import { useTranslation } from 'react-i18next' import { Box } from './Box' import { StyledPopover } from './Popover' import { menuRecipe } from '@/primitives/menuRecipe.ts' @@ -110,6 +111,7 @@ export const Select = ({ ...props }: SelectProps) => { const IconComponent = iconComponent + const { t } = useTranslation('global') return ( {label} @@ -138,8 +140,18 @@ export const Select = ({ } id={item.value} key={item.value} + textValue={ + typeof item.label === 'string' ? item.label : undefined + } > - {item.label} + {({ isSelected }) => ( + <> + {item.label} + {isSelected && ( + , {t('selected')} + )} + + )} ))}