Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 8601763

Browse files
t3chguyrichvdh
t3chguy
and
richvdh
authored
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 <[email protected]> * Update global.d.ts * Switch AccessibleButton and derivatives to using `forwardRef` Signed-off-by: Michael Telatynski <[email protected]> * Add missing ref={ref} Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Ensure RefObjects are used consistently Signed-off-by: Michael Telatynski <[email protected]> * Re-add WysiwygAutocomplete displayname Signed-off-by: Michael Telatynski <[email protected]> * Fix forwardRef types Signed-off-by: Michael Telatynski <[email protected]> * Add comments Signed-off-by: Michael Telatynski <[email protected]> * Remove unused export Signed-off-by: Michael Telatynski <[email protected]> * Readd comment Signed-off-by: Michael Telatynski <[email protected]> * Accessibility improvements around aria-labels and tooltips Signed-off-by: Michael Telatynski <[email protected]> * Tweak copy Signed-off-by: Michael Telatynski <[email protected]> * Iterate types & comments Signed-off-by: Michael Telatynski <[email protected]> * i18n Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Apply suggestions from code review Co-authored-by: Richard van der Hoff <[email protected]> * Add comment Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Improve comment Signed-off-by: Michael Telatynski <[email protected]> * Prettier & i18n Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]> Co-authored-by: Richard van der Hoff <[email protected]>
1 parent a8949ea commit 8601763

File tree

5 files changed

+15
-0
lines changed

5 files changed

+15
-0
lines changed

‎src/components/views/audio_messages/SeekBar.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import React, { ChangeEvent, CSSProperties, ReactNode } from "react";
1919
import { PlaybackInterface } from "../../../audio/Playback";
2020
import { MarkedExecution } from "../../../utils/MarkedExecution";
2121
import { percentageOf } from "../../../utils/numbers";
22+
import { _t } from "../../../languageHandler";
2223

2324
interface IProps {
2425
// Playback instance to render. Cannot change during component lifecycle: create
@@ -112,6 +113,7 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
112113
step={0.001}
113114
style={{ "--fillTo": this.state.percentage } as ISeekCSS}
114115
disabled={this.props.disabled}
116+
aria-label={_t("a11y|seek_bar_label")}
115117
/>
116118
);
117119
}

‎src/components/views/rooms/RoomHeader.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@ export default function RoomHeader({
273273
size="20px"
274274
overflow={false}
275275
viewUserOnClick={false}
276+
tooltipLabel={_t("room|header_face_pile_tooltip")}
276277
>
277278
{formatCount(memberCount)}
278279
</FacePile>

‎src/i18n/strings/en_EN.json

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"recent_rooms": "Recent rooms",
1515
"room_name": "Room %(name)s",
1616
"room_status_bar": "Room status bar",
17+
"seek_bar_label": "Audio seek bar",
1718
"unread_messages": "Unread messages.",
1819
"user_menu": "User menu"
1920
},
@@ -1946,6 +1947,7 @@
19461947
"video_call_ec_layout_spotlight": "Spotlight",
19471948
"video_room_view_chat_button": "View chat timeline"
19481949
},
1950+
"header_face_pile_tooltip": "Toggle member list",
19491951
"header_untrusted_label": "Untrusted",
19501952
"inaccessible": "This room or space is not accessible at this time.",
19511953
"inaccessible_name": "%(roomName)s is not accessible at this time.",

‎test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`SeekBar when rendering a SeekBar and the playback proceeds should render as expected 1`] = `
44
<div>
55
<input
6+
aria-label="Audio seek bar"
67
class="mx_SeekBar"
78
max="1"
89
min="0"
@@ -18,6 +19,7 @@ exports[`SeekBar when rendering a SeekBar and the playback proceeds should rende
1819
exports[`SeekBar when rendering a SeekBar for an empty playback should render correctly 1`] = `
1920
<div>
2021
<input
22+
aria-label="Audio seek bar"
2123
class="mx_SeekBar"
2224
max="1"
2325
min="0"
@@ -33,6 +35,7 @@ exports[`SeekBar when rendering a SeekBar for an empty playback should render co
3335
exports[`SeekBar when rendering a SeekBar should render the initial position 1`] = `
3436
<div>
3537
<input
38+
aria-label="Audio seek bar"
3639
class="mx_SeekBar"
3740
max="1"
3841
min="0"
@@ -48,6 +51,7 @@ exports[`SeekBar when rendering a SeekBar should render the initial position 1`]
4851
exports[`SeekBar when rendering a disabled SeekBar should render as expected 1`] = `
4952
<div>
5053
<input
54+
aria-label="Audio seek bar"
5155
class="mx_SeekBar"
5256
disabled=""
5357
max="1"

‎test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap

+6
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
100100
</div>
101101
</div>
102102
<input
103+
aria-label="Audio seek bar"
103104
class="mx_SeekBar"
104105
max="1"
105106
min="0"
@@ -213,6 +214,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
213214
</div>
214215
</div>
215216
<input
217+
aria-label="Audio seek bar"
216218
class="mx_SeekBar"
217219
max="1"
218220
min="0"
@@ -338,6 +340,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
338340
</div>
339341
</div>
340342
<input
343+
aria-label="Audio seek bar"
341344
class="mx_SeekBar"
342345
max="1"
343346
min="0"
@@ -451,6 +454,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
451454
</div>
452455
</div>
453456
<input
457+
aria-label="Audio seek bar"
454458
class="mx_SeekBar"
455459
max="1"
456460
min="0"
@@ -572,6 +576,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
572576
</div>
573577
</div>
574578
<input
579+
aria-label="Audio seek bar"
575580
class="mx_SeekBar"
576581
max="1"
577582
min="0"
@@ -665,6 +670,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
665670
</div>
666671
</div>
667672
<input
673+
aria-label="Audio seek bar"
668674
class="mx_SeekBar"
669675
max="1"
670676
min="0"

0 commit comments

Comments
 (0)