mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 03:05:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Accessibility improvements around aria-labels and tooltips (#12062)

Browse source 
* 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>
This commit is contained in:
Michael Telatynski 2024-01-05 10:59:41 +00:00 committed by GitHub
parent a8949ea97c
commit 86017639c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/audio_messages/SeekBar.tsx
View file

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

1
src/components/views/rooms/RoomHeader.tsx
View file

@ -273,6 +273,7 @@ export default function RoomHeader({
size="20px"
overflow={false}
viewUserOnClick={false}
tooltipLabel={_t("room|header_face_pile_tooltip")}
>
{formatCount(memberCount)}
</FacePile>

2
src/i18n/strings/en_EN.json
View file

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

4
test/components/views/audio_messages/__snapshots__/SeekBar-test.tsx.snap
View file

@ -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"

6
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View file

@ -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"