feat(a11y): label form controls + overlays (P3-4)

Accessible names for ~15 controls that lacked them: invite/join/create-room/
account-data/image-pack/private-note/power-level inputs (visible <label htmlFor>
where a label exists, else aria-label); the two range sliders (night-light
intensity, noise-gate threshold); the soundboard file input; media <video>
elements; and the Media Gallery (region) + Search (dialog) overlays. Hidden
notification/preview <audio> marked aria-hidden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-02 11:45:21 -04:00
parent 8729ccfcf5
commit 4380041014
14 changed files with 58 additions and 15 deletions
+5 -3
View File
@@ -186,8 +186,8 @@ function LightboxMedia({
)}
{media.status === 'ok' &&
(item.msgtype === MsgType.Video ? (
// eslint-disable-next-line jsx-a11y/media-has-caption
<video
aria-label="Video attachment"
src={media.url}
controls
autoPlay
@@ -261,7 +261,7 @@ function Lightbox({
escapeDeactivates: false,
}}
>
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
{}
<div
role="dialog"
aria-modal
@@ -640,13 +640,15 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Background' }))}
shrink="No"
direction="Column"
role="region"
aria-labelledby="media-gallery-title"
>
{/* Header */}
<Header variant="Background" size="600" className={css.MediaGalleryHeader}>
<Box grow="Yes" alignItems="Center" gap="200">
<Icon size="200" src={Icons.Photo} />
<Box grow="Yes">
<Text size="H4" truncate>
<Text id="media-gallery-title" size="H4" truncate>
Media Gallery
</Text>
</Box>