diff --git a/CHANGELOG.md b/CHANGELOG.md index a2f555ce..1c65e06a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,10 @@ and this project adheres to - 🐛(frontend) fix metadata agent collector enabled check +### Fixed + +- ♿️(frontend) improve accessibilty of the Effects panel #1401 + ## [1.20.0] - 2026-06-12 ### Changed @@ -52,7 +56,7 @@ and this project adheres to - 🔇(summary) make ffmpeg quiet #1404 - 🔒️(backend) prevent accessing files if they are not ready #1395 -- ⬆️(backend) upgrade idna to >=3.15 to address CVE-2026-45409 +- # ⬆️(backend) upgrade idna to >=3.15 to address CVE-2026-45409 ## [1.18.0] - 2026-06-03 diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx index 73752be2..44c761d6 100644 --- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx +++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx @@ -400,6 +400,8 @@ export const EffectsConfiguration = ({ config: ProcessorConfig isSelected: boolean tooltip: string + ariaLabel: string + ariaDeleteLabel: string file: ApiFileItem }[] }>(() => { @@ -445,9 +447,11 @@ export const EffectsConfiguration = ({ } const id = deriveIdFromProcessorConfig(config) const isSelected = selectedId === id - const prefix = isSelected ? 'selectedLabel' : 'apply' const backgroundName = t(`virtual.presets.descriptions.${index}`) - const ariaLabel = `${t(`virtual.presets.${prefix}`)} ${backgroundName}` + const ariaLabelPrefix = t( + isSelected ? `virtual.selectedLabel` : `virtual.apply` + ) + const ariaLabel = `${ariaLabelPrefix} ${backgroundName}` return { tooltip: backgroundName, @@ -469,13 +473,22 @@ export const EffectsConfiguration = ({ } const id = deriveIdFromProcessorConfig(config) + const isSelected = selectedId === id + const ariaLabel = t( + isSelected + ? `virtual.personal.selectedLabel` + : `virtual.personal.apply` + ) + const ariaDeleteLabel = t('virtual.personal.deleteLabel') return { tooltip: file.title, id, config, - isSelected: selectedId === id, + isSelected, file, + ariaLabel, + ariaDeleteLabel, } }), } @@ -727,47 +740,52 @@ export const EffectsConfiguration = ({ } role="listitem" > - - - - { - if (option.isSelected) { - // we remove the current effect - toggleEffect(option.config) + + + + + - - + aria-label={option.ariaDeleteLabel} + size={'xs'} + variant={'tertiary'} + onClick={() => { + if (option.isSelected) { + // we remove the current effect + toggleEffect(option.config) + } + deleteFileMutation.mutate({ + fileId: option.file.id, + }) + }} + isDisabled={deleteFileMutation.isPending} + > + + + ) )} @@ -780,9 +798,13 @@ export const EffectsConfiguration = ({ >