From 86017639c25812daad87178c3d7507df1f2ac761 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 5 Jan 2024 10:59:41 +0000 Subject: [PATCH] Accessibility improvements around aria-labels and tooltips (#12062) * Prevent Cypress typechecking react-sdk components without strict mode This prevented us from switching to `forwardRef` in a bunch of places due to it behaving different with & without strict mode. Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update global.d.ts * Switch AccessibleButton and derivatives to using `forwardRef` Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing ref={ref} Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Ensure RefObjects are used consistently Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Re-add WysiwygAutocomplete displayname Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix forwardRef types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused export Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Readd comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Accessibility improvements around aria-labels and tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak copy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate types & comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Apply suggestions from code review Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Prettier & i18n Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- src/components/views/audio_messages/SeekBar.tsx | 2 ++ src/components/views/rooms/RoomHeader.tsx | 1 + src/i18n/strings/en_EN.json | 2 ++ .../audio_messages/__snapshots__/SeekBar-test.tsx.snap | 4 ++++ .../__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap | 6 ++++++ 5 files changed, 15 insertions(+) diff --git a/src/components/views/audio_messages/SeekBar.tsx b/src/components/views/audio_messages/SeekBar.tsx index 4af84325e5..939e29df51 100644 --- a/src/components/views/audio_messages/SeekBar.tsx +++ b/src/components/views/audio_messages/SeekBar.tsx @@ -19,6 +19,7 @@ import React, { ChangeEvent, CSSProperties, ReactNode } from "react"; import { PlaybackInterface } from "../../../audio/Playback"; import { MarkedExecution } from "../../../utils/MarkedExecution"; import { percentageOf } from "../../../utils/numbers"; +import { _t } from "../../../languageHandler"; interface IProps { // Playback instance to render. Cannot change during component lifecycle: create @@ -112,6 +113,7 @@ export default class SeekBar extends React.PureComponent { step={0.001} style={{ "--fillTo": this.state.percentage } as ISeekCSS} disabled={this.props.disabled} + aria-label={_t("a11y|seek_bar_label")} /> ); } diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 1458c4a0a8..f770856203 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -273,6 +273,7 @@ export default function RoomHeader({ size="20px" overflow={false} viewUserOnClick={false} + tooltipLabel={_t("room|header_face_pile_tooltip")} > {formatCount(memberCount)} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f96bddfc28..c94a36c164 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -14,6 +14,7 @@ "recent_rooms": "Recent rooms", "room_name": "Room %(name)s", "room_status_bar": "Room status bar", + "seek_bar_label": "Audio seek bar", "unread_messages": "Unread messages.", "user_menu": "User menu" }, @@ -1946,6 +1947,7 @@ "video_call_ec_layout_spotlight": "Spotlight", "video_room_view_chat_button": "View chat timeline" }, + "header_face_pile_tooltip": "Toggle member list", "header_untrusted_label": "Untrusted", "inaccessible": "This room or space is not accessible at this time.", "inaccessible_name": "%(roomName)s is not accessible at this time.", diff --git a/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap b/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap index 866fc65708..f341544917 100644 --- a/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap +++ b/test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap @@ -3,6 +3,7 @@ exports[`SeekBar when rendering a SeekBar and the playback proceeds should render as expected 1`] = `