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>
2024-01-05 10:59:41 +00:00 · 2024-01-05 10:59:41 +00:00 · 86017639c2
parent a8949ea97c
commit 86017639c2
5 changed files with 15 additions and 0 deletions
--- 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<IProps, IState> {
                step={0.001}
                style={{ "--fillTo": this.state.percentage } as ISeekCSS}
                disabled={this.props.disabled}
+                aria-label={_t("a11y|seek_bar_label")}
            />
        );
    }
--- 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)}
                        </FacePile>
--- 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.",
--- 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`] = `
 <div>
  <input
+    aria-label="Audio seek bar"
    class="mx_SeekBar"
    max="1"
    min="0"
@ -18,6 +19,7 @@ exports[`SeekBar when rendering a SeekBar and the playback proceeds should rende
 exports[`SeekBar when rendering a SeekBar for an empty playback should render correctly 1`] = `
 <div>
  <input
+    aria-label="Audio seek bar"
    class="mx_SeekBar"
    max="1"
    min="0"
@ -33,6 +35,7 @@ exports[`SeekBar when rendering a SeekBar for an empty playback should render co
 exports[`SeekBar when rendering a SeekBar should render the initial position 1`] = `
 <div>
  <input
+    aria-label="Audio seek bar"
    class="mx_SeekBar"
    max="1"
    min="0"
@ -48,6 +51,7 @@ exports[`SeekBar when rendering a SeekBar should render the initial position 1`]
 exports[`SeekBar when rendering a disabled SeekBar should render as expected 1`] = `
 <div>
  <input
+    aria-label="Audio seek bar"
    class="mx_SeekBar"
    disabled=""
    max="1"
--- a/test/voice-broadcast/components/molecules/snapshots/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/snapshots/VoiceBroadcastPlaybackBody-test.tsx.snap
@ -100,6 +100,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
      </div>
    </div>
    <input
+      aria-label="Audio seek bar"
      class="mx_SeekBar"
      max="1"
      min="0"
@ -213,6 +214,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
      </div>
    </div>
    <input
+      aria-label="Audio seek bar"
      class="mx_SeekBar"
      max="1"
      min="0"
@ -338,6 +340,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
      </div>
    </div>
    <input
+      aria-label="Audio seek bar"
      class="mx_SeekBar"
      max="1"
      min="0"
@ -451,6 +454,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
      </div>
    </div>
    <input
+      aria-label="Audio seek bar"
      class="mx_SeekBar"
      max="1"
      min="0"
@ -572,6 +576,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
      </div>
    </div>
    <input
+      aria-label="Audio seek bar"
      class="mx_SeekBar"
      max="1"
      min="0"
@ -665,6 +670,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
      </div>
    </div>
    <input
+      aria-label="Audio seek bar"
      class="mx_SeekBar"
      max="1"
      min="0"