mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
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>
This commit is contained in:
Michael Telatynski
GitHub
parent
a8949ea97c
commit
86017639c2
@ -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")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -273,6 +273,7 @@ export default function RoomHeader({
|
||||
size="20px"
|
||||
overflow={false}
|
||||
viewUserOnClick={false}
|
||||
tooltipLabel={_t("room|header_face_pile_tooltip")}
|
||||
>
|
||||
{formatCount(memberCount)}
|
||||
</FacePile>
|
||||
|
||||
@ -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.",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user