Accessibility improvements around aria-labels and tooltips

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")}
             />
         );
     }

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>

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.",

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"

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"