Skip to content

a11y: message composing #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
7w1 merged 3 commits into from
Mar 11, 2026
Merged

a11y: message composing #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59992e8
add title and aria-label to a few elements in RoomInput.tsx
dozro Mar 10, 2026
ac3d34d
add title and aria-label attributes to buttons in SchedulePickerDialo…
dozro Mar 10, 2026
485834b
added changeset
dozro Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/a11y_message_composing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
sable: patch
---

added a few accessibility tags to the elements involved in message composing
16 changes: 16 additions & 0 deletions src/app/features/room/RoomInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -828,6 +828,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
variant="SurfaceVariant"
size="300"
radii="300"
title="schedule message send"
>
<Icon src={Icons.Cross} size="50" />
</IconButton>
Expand All @@ -853,6 +854,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
variant="SurfaceVariant"
size="300"
radii="300"
aria-label="Cancel reply"
title="Cancel reply"
>
<Icon src={Icons.Cross} size="50" />
</IconButton>
Expand Down Expand Up @@ -886,6 +889,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
variant="SurfaceVariant"
size="300"
radii="300"
title="Upload File"
aria-label="Upload and attach a File"
>
<Icon src={Icons.PlusCircle} />
</IconButton>
Expand All @@ -896,6 +901,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
variant="SurfaceVariant"
size="300"
radii="300"
title={toolbar ? 'Hide Toolbar' : 'Show Toolbar'}
aria-pressed={toolbar}
aria-label={toolbar ? 'Hide Toolbar' : 'Show Toolbar'}
onClick={() => setToolbar(!toolbar)}
>
<Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
Expand Down Expand Up @@ -940,6 +948,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
variant="SurfaceVariant"
size="300"
radii="300"
title="open sticker picker"
aria-label="Open sticker picker"
>
<Icon
src={Icons.Sticker}
Expand All @@ -956,6 +966,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
variant="SurfaceVariant"
size="300"
radii="300"
title="open emoji picker"
aria-label="Open emoji picker"
>
<Icon
src={Icons.Smile}
Expand Down Expand Up @@ -1012,6 +1024,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
/>
<Box display="Flex" alignItems="Center">
<IconButton
title="Send Message"
aria-label="Send your composed Message"
onClick={() => {
if (isLongPress.current) {
isLongPress.current = false;
Expand Down Expand Up @@ -1053,6 +1067,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
onClick={(evt: MouseEvent<HTMLButtonElement>) => {
setScheduleMenuAnchor(evt.currentTarget.getBoundingClientRect());
}}
title="Schedule Message"
aria-label="Schedule message send"
variant={scheduledTime ? 'Primary' : 'SurfaceVariant'}
size="300"
radii="0"
Expand Down
17 changes: 15 additions & 2 deletions src/app/features/room/schedule-send/SchedulePickerDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,13 @@ export function SchedulePickerDialog({
<Box grow="Yes">
<Text size="H4">Schedule Send</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<IconButton
size="300"
onClick={onCancel}
radii="300"
title="Cancel scheduling"
aria-label="Cancel scheduling"
>
<Icon src={Icons.Cross} />
</IconButton>
</Header>
Expand Down Expand Up @@ -243,7 +249,14 @@ export function SchedulePickerDialog({
{error || 'Selected time is in the past'}
</Text>
)}
<Button type="submit" variant="Primary" aria-disabled={isPast} onClick={handleSubmit}>
<Button
type="submit"
variant="Primary"
aria-disabled={isPast}
onClick={handleSubmit}
title="Schedule Send"
aria-label="Schedule send"
>
<Text size="B400">Schedule Send</Text>
</Button>
</Box>
Expand Down
Loading