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

Improved a11y for Field feedback and Secure Phrase input (#10320)

Browse source 
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Sebbones 2023-03-08 12:32:50 +01:00 • committed by GitHub
parent f60f7a19af
commit 0c1c3f1cde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/elements/Field.tsx
View file

@ -289,12 +289,20 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
// Handle displaying feedback on validity
let fieldTooltip;
if (tooltipContent || this.state.feedback) {
let role: React.AriaRole;
if (tooltipContent) {
role = "tooltip";
} else {
role = this.state.valid ? "status" : "alert";
}
fieldTooltip = (
<Tooltip
tooltipClassName={classNames("mx_Field_tooltip", "mx_Tooltip_noMargin", tooltipClassName)}
visible={(this.state.focused && forceTooltipVisible) || this.state.feedbackVisible}
label={tooltipContent || this.state.feedback}
alignment={Tooltip.Alignment.Right}
role={role}
/>
);
}

4
src/components/views/elements/Tooltip.tsx
View file

@ -51,6 +51,8 @@ export interface ITooltipProps {
id?: string;
// If the parent is over this width, act as if it is only this wide
maxParentWidth?: number;
// aria-role passed to the tooltip
role?: React.AriaRole;
}
type State = Partial<Pick<CSSProperties, "display" | "right" | "top" | "transform" | "left">>;
@ -186,7 +188,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
style.display = this.props.visible ? "block" : "none";
const tooltip = (
<div role="tooltip" className={tooltipClasses} style={style}>
<div role={this.props.role || "tooltip"} className={tooltipClasses} style={style}>
<div className="mx_Tooltip_chevron" />
{this.props.label}
</div>