PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
* Relate field validation tooltip via aria-describedby

* Iterate
This commit is contained in:
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}