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

* Relate field validation tooltip via aria-describedby * Iterate
matrix-org · Apr 14, 2023 · 439759a · 439759a
1 parent c1e7905
commit 439759a
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
@@ -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}