mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-23 03:10:17 +03:00
86017639c2
* 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>
762 lines
16 KiB
Text
762 lines
16 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Spinner"
|
|
>
|
|
<div
|
|
aria-label="Loading…"
|
|
class="mx_Spinner_icon"
|
|
data-testid="spinner"
|
|
role="progressbar"
|
|
style="width: 14px; height: 14px;"
|
|
/>
|
|
</div>
|
|
Buffering…
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_LiveBadge"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Live
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_controls"
|
|
>
|
|
<div
|
|
aria-label="30s backward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="pause voice broadcast"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastControl"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_12"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="30s forward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="mx_SeekBar"
|
|
max="1"
|
|
min="0"
|
|
step="0.001"
|
|
style="--fillTo: 0;"
|
|
tabindex="0"
|
|
type="range"
|
|
value="0"
|
|
/>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_timerow"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT0S"
|
|
>
|
|
00:00
|
|
</time>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="-PT23M42S"
|
|
>
|
|
-23:42
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Voice broadcast
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_controls"
|
|
>
|
|
<div
|
|
aria-label="30s backward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="resume voice broadcast"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="30s forward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="mx_SeekBar"
|
|
max="1"
|
|
min="0"
|
|
step="0.001"
|
|
style="--fillTo: 0;"
|
|
tabindex="0"
|
|
type="range"
|
|
value="0"
|
|
/>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_timerow"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT0S"
|
|
>
|
|
00:00
|
|
</time>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="-PT23M42S"
|
|
>
|
|
-23:42
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mode should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
class="mx_AccessibleButton"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_AccessibleButton"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Voice broadcast
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_controls"
|
|
>
|
|
<div
|
|
aria-label="30s backward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="pause voice broadcast"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastControl"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_12"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="30s forward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="mx_SeekBar"
|
|
max="1"
|
|
min="0"
|
|
step="0.001"
|
|
style="--fillTo: 0;"
|
|
tabindex="0"
|
|
type="range"
|
|
value="0"
|
|
/>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_timerow"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT0S"
|
|
>
|
|
00:00
|
|
</time>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="-PT23M42S"
|
|
>
|
|
-23:42
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Voice broadcast
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_controls"
|
|
>
|
|
<div
|
|
aria-label="30s backward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="pause voice broadcast"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastControl"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_12"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="30s forward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="mx_SeekBar"
|
|
max="1"
|
|
min="0"
|
|
step="0.001"
|
|
style="--fillTo: 0;"
|
|
tabindex="0"
|
|
type="range"
|
|
value="0"
|
|
/>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_timerow"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT0S"
|
|
>
|
|
00:00
|
|
</time>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="-PT23M42S"
|
|
>
|
|
-23:42
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Voice broadcast
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_LiveBadge"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Live
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_controls"
|
|
>
|
|
<div
|
|
aria-label="30s backward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="pause voice broadcast"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastControl"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_12"
|
|
/>
|
|
</div>
|
|
<div
|
|
aria-label="30s forward"
|
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary_content"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="mx_SeekBar"
|
|
max="1"
|
|
min="0"
|
|
step="0.001"
|
|
style="--fillTo: 0;"
|
|
tabindex="0"
|
|
type="range"
|
|
value="0"
|
|
/>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_timerow"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT0S"
|
|
>
|
|
00:00
|
|
</time>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="-PT23M42S"
|
|
>
|
|
-23:42
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Voice broadcast
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_controls"
|
|
>
|
|
<div
|
|
aria-label="play voice broadcast"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="mx_SeekBar"
|
|
max="1"
|
|
min="0"
|
|
step="0.001"
|
|
style="--fillTo: 0;"
|
|
tabindex="0"
|
|
type="range"
|
|
value="0"
|
|
/>
|
|
<div
|
|
class="mx_VoiceBroadcastBody_timerow"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT0S"
|
|
>
|
|
00:00
|
|
</time>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="-PT23M42S"
|
|
>
|
|
-23:42
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should render as expected 1`] = `
|
|
<div>
|
|
<div
|
|
class="mx_VoiceBroadcastBody"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader"
|
|
>
|
|
<div
|
|
data-testid="room-avatar"
|
|
>
|
|
room avatar:
|
|
My room
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_content"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room_wrapper"
|
|
>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_room"
|
|
>
|
|
My room
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-label="Change input device"
|
|
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
<span>
|
|
@user:example.com
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastHeader_line"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Voice broadcast
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx_VoiceBroadcastRecordingConnectionError"
|
|
>
|
|
<div
|
|
class="mx_Icon mx_Icon_16"
|
|
/>
|
|
Unable to play this voice broadcast
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|