imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ensure tooltip contents is linked via aria to the target element (#10729)

Browse source 
* Ensure tooltip contents is linked via aria to the target element

* Iterate

* Fix tests

* Fix tests

* Update snapshot

* Fix missing aria labels for more tooltips

* Iterate

* Update snapshots
This commit is contained in:
Michael Telatynski 2023-05-05 09:26:11 +01:00 • committed by GitHub
parent 8e962f6897
commit 99ac9e5029
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 133 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/rooms/MessageComposer.tsx
View file

@ -107,6 +107,7 @@ interface IState {
}
export class MessageComposer extends React.Component<IProps, IState> {
private tooltipId = `mx_MessageComposer_${Math.random()}`;
private dispatcherRef?: string;
private messageComposerInput = createRef<SendMessageComposerClass>();
private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
@ -470,7 +471,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
public render(): React.ReactNode {
const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
const e2eIcon = hasE2EIcon && (
<E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />
<E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
);
const controls: ReactNode[] = [];
@ -561,11 +562,15 @@ export class MessageComposer extends React.Component<IProps, IState> {
);
}
let recordingTooltip;
let recordingTooltip: JSX.Element | undefined;
if (this.state.recordingTimeLeftSeconds) {
const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
recordingTooltip = (
<Tooltip label={_t("%(seconds)ss left", { seconds: secondsLeft })} alignment={Alignment.Top} />
<Tooltip
id={this.tooltipId}
label={_t("%(seconds)ss left", { seconds: secondsLeft })}
alignment={Alignment.Top}
/>
);
}
@ -593,7 +598,11 @@ export class MessageComposer extends React.Component<IProps, IState> {
});
return (
<div className={classes} ref={this.ref}>
<div
className={classes}
ref={this.ref}
aria-describedby={this.state.recordingTimeLeftSeconds ? this.tooltipId : undefined}
>
{recordingTooltip}
<div className="mx_MessageComposer_wrapper">
<ReplyPreview