OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Relate field validation tooltip via aria-describedby (#10522) 

* Relate field validation tooltip via aria-describedby

* Iterate
pull/28217/head
Michael Telatynski 2023-04-14 15:15:26 +01:00 committed by GitHub
parent c1e7905ddc
commit 439759a1da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/views/elements/Field.tsx
View File

@ -251,6 +251,34 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
this.inputRef = inputRef || React.createRef();
// Handle displaying feedback on validity
let fieldTooltip: JSX.Element | undefined;
if (tooltipContent || this.state.feedback) {
const tooltipId = `${this.id}_tooltip`;
const visible = (this.state.focused && forceTooltipVisible) || this.state.feedbackVisible;
if (visible) {
inputProps["aria-describedby"] = tooltipId;
}
let role: React.AriaRole;
if (tooltipContent) {
role = "tooltip";
} else {
role = this.state.valid ? "status" : "alert";
}
fieldTooltip = (
<Tooltip
id={tooltipId}
tooltipClassName={classNames("mx_Field_tooltip", "mx_Tooltip_noMargin", tooltipClassName)}
visible={visible}
label={tooltipContent || this.state.feedback}
alignment={Tooltip.Alignment.Right}
role={role}
/>
);
}
inputProps.placeholder = inputProps.placeholder ?? inputProps.label;
inputProps.id = this.id; // this overwrites the id from props
@ -287,27 +315,6 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
mx_Field_invalid: hasValidationFlag ? !forceValidity : onValidate && this.state.valid === false,
});
// Handle displaying feedback on validity
let fieldTooltip: JSX.Element | undefined;
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}
/>
);
}
return (
<div className={fieldClasses}>
{prefixContainer}