fix(a11y): WCAG 3.3.1 — add error identification with role=alert and aria-describedby

superset-frontend/packages/superset-core/src/components/Alert/Alert.test.tsx

@@ -17,10 +17,44 @@
  * under the License.
  */
 
-import { render } from '../../testing';
+import { render, screen } from '../../testing';
 import { Alert } from '.';
 
 test('renders Alert with default props', async () => {
   const { container } = render(<Alert />);
   expect(container).toHaveTextContent('Default message');
 });
+
+// WCAG 3.3.1 - Error Identification accessibility tests
+test('renders with role="alert" for screen reader announcement', () => {
+  render(<Alert type="error">Error message</Alert>);
+  expect(screen.getByRole('alert')).toBeInTheDocument();
+});
+
+test('renders with aria-atomic="true" so full content is announced', () => {
+  render(<Alert type="error">Error message</Alert>);
+  expect(screen.getByRole('alert')).toHaveAttribute('aria-atomic', 'true');
+});
+
+test('uses aria-live="assertive" for error alerts', () => {
+  render(<Alert type="error">Error message</Alert>);
+  expect(screen.getByRole('alert')).toHaveAttribute(
+    'aria-live',
+    'assertive',
+  );
+});
+
+test('uses aria-live="polite" for warning alerts', () => {
+  render(<Alert type="warning">Warning message</Alert>);
+  expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'polite');
+});
+
+test('uses aria-live="polite" for info alerts', () => {
+  render(<Alert type="info">Info message</Alert>);
+  expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'polite');
+});
+
+test('uses aria-live="polite" for success alerts', () => {
+  render(<Alert type="success">Success message</Alert>);
+  expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'polite');
+});

superset-frontend/packages/superset-core/src/components/Alert/index.tsx

@@ -71,6 +71,7 @@ export const Alert = (props: AlertProps) => {
   return (
     <AntdAlert
       role="alert"
+      aria-atomic="true"
       aria-live={type === 'error' ? 'assertive' : 'polite'}
       type={type}
       showIcon={showIcon}

superset-frontend/packages/superset-ui-core/src/components/Form/LabeledErrorBoundInput.tsx

@@ -65,6 +65,7 @@ export const LabeledErrorBoundInput = ({
   ...props
 }: LabeledErrorBoundInputProps) => {
   const hasError = !!errorMessage;
+  const errorDescriptionId = hasError ? `${id || props.name}-error-description` : undefined;
   return (
     <StyledFormGroup className={className}>
       <Flex align="center">
@@ -78,13 +79,23 @@ export const LabeledErrorBoundInput = ({
         validateStatus={
           isValidating ? 'validating' : hasError ? 'error' : 'success'
         }
-        help={errorMessage || helpText}
+        help={
+          hasError ? (
+            <span id={errorDescriptionId} role="alert">
+              {errorMessage}
+            </span>
+          ) : (
+            helpText
+          )
+        }
         hasFeedback={!!hasError}
       >
         {visibilityToggle || props.name === 'password' ? (
           <StyledInputPassword
             {...props}
             {...validationMethods}
+            aria-invalid={hasError || undefined}
+            aria-describedby={errorDescriptionId}
             iconRender={visible =>
               visible ? (
                 <Tooltip title={t('Hide password.')}>
@@ -99,7 +110,12 @@ export const LabeledErrorBoundInput = ({
             role="textbox"
           />
         ) : (
-          <StyledInput {...props} {...validationMethods} />
+          <StyledInput
+            {...props}
+            {...validationMethods}
+            aria-invalid={hasError || undefined}
+            aria-describedby={errorDescriptionId}
+          />
         )}
         {get_url && description ? (
           <Button

superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx

@@ -90,3 +90,23 @@ test('should render with error theme', () => {
     `,
   );
 });
+
+// WCAG 3.3.1 - Error Identification accessibility tests
+test('should have role="alert" for screen reader announcement', () => {
+  render(<BasicErrorAlert {...mockedProps} />);
+  const alertElement = screen.getByRole('alert');
+  expect(alertElement).toBeInTheDocument();
+});
+
+test('should have aria-atomic="true" so the entire alert is read as a unit', () => {
+  render(<BasicErrorAlert {...mockedProps} />);
+  const alertElement = screen.getByRole('alert');
+  expect(alertElement).toHaveAttribute('aria-atomic', 'true');
+});
+
+test('should contain both title and body text within the alert region', () => {
+  render(<BasicErrorAlert {...mockedProps} />);
+  const alertElement = screen.getByRole('alert');
+  expect(alertElement).toHaveTextContent('Error title');
+  expect(alertElement).toHaveTextContent('Error body');
+});

superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx

@@ -61,7 +61,7 @@ export function BasicErrorAlert({
   };
 
   return (
-    <div style={style} role="alert">
+    <div style={style} role="alert" aria-atomic="true">
       <Icons.ExclamationCircleFilled iconColor={variants.text} />
       <StyledContent>
         <StyledTitle>{title}</StyledTitle>

superset-frontend/src/components/Modal/ModalFormField.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactNode } from 'react';
+import { ReactNode, Children, isValidElement, cloneElement, useId } from 'react';
 import { css, styled } from '@apache-superset/core/theme';
 import { InfoTooltip } from '@superset-ui/core/components';
 
@@ -128,16 +128,56 @@ export function ModalFormField({
   validateStatus,
   hasFeedback = false,
 }: ModalFormFieldProps) {
+  const uniqueId = useId();
+  const errorId = error ? `${uniqueId}-error` : undefined;
+
+  // Clone the first child element to inject aria-invalid and aria-describedby
+  // on the real input. Many call sites wrap the input in a FormItem/Row so
+  // the ARIA attrs must hop through wrappers to reach the actual interactive
+  // element, otherwise screen readers never learn about the error.
+  const applyAria = (element: React.ReactElement<any>): React.ReactElement<any> => {
+    const ariaProps = {
+      'aria-invalid': true,
+      'aria-describedby': errorId,
+    };
+    const wrappedChild = element.props?.children;
+    if (
+      isValidElement(wrappedChild) &&
+      Children.count(wrappedChild) === 1
+    ) {
+      return cloneElement(element, {
+        children: cloneElement(
+          wrappedChild as React.ReactElement<any>,
+          ariaProps,
+        ),
+      });
+    }
+    return cloneElement(element, ariaProps);
+  };
+
+  const enhancedChildren = error
+    ? Children.map(children, (child, index) => {
+        if (index === 0 && isValidElement(child)) {
+          return applyAria(child as React.ReactElement<any>);
+        }
+        return child;
+      })
+    : children;
+
   return (
     <StyledFieldContainer bottomSpacing={bottomSpacing} data-test={testId}>
       <div className="control-label">
         {label}
         {tooltip && <InfoTooltip tooltip={tooltip} />}
         {required && <span className="required">*</span>}
       </div>
-      <div className="input-container">{children}</div>
+      <div className="input-container">{enhancedChildren}</div>
       {helperText && <div className="helper">{helperText}</div>}
-      {error && <div className="error">{error}</div>}
+      {error && (
+        <div className="error" id={errorId} role="alert">
+          {error}
+        </div>
+      )}
     </StyledFieldContainer>
   );
 }

superset-frontend/src/explore/components/ControlHeader.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useId } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { css, useTheme, SupersetTheme } from '@apache-superset/core/theme';
 import { FormLabel, InfoTooltip, Tooltip } from '@superset-ui/core/components';
@@ -37,6 +37,10 @@ export type ControlHeaderProps = {
   tooltipOnClick?: () => void;
   warning?: string;
   danger?: string;
+  // WCAG 3.3.1: error container ID shared with the input's aria-describedby.
+  // Passed in by wrappers like NumberControl/TextControl so there is exactly
+  // one live-region and one DOM id per control (no duplicate ids/alerts).
+  errorId?: string;
   // Allow extra props from control spread patterns (e.g. {...this.props})
   [key: string]: unknown;
 };
@@ -70,8 +74,11 @@ const ControlHeader: FC<ControlHeaderProps> = ({
   tooltipOnClick = () => {},
   warning,
   danger,
+  errorId: providedErrorId,
 }) => {
   const theme = useTheme();
+  const uniqueId = useId();
+  const errorId = providedErrorId ?? `${name || uniqueId}-error`;
 
   if (!label) {
     return null;
@@ -178,8 +185,28 @@ const ControlHeader: FC<ControlHeaderProps> = ({
                 placement="top"
                 title={validationErrors?.join(' ')}
               >
-                <Icons.ExclamationCircleOutlined iconColor={theme.colorError} />
-              </Tooltip>{' '}
+                <Icons.ExclamationCircleOutlined
+                  iconColor={theme.colorError}
+                  aria-hidden="true"
+                />
+              </Tooltip>
+              <span
+                id={errorId}
+                role="alert"
+                css={css`
+                  position: absolute;
+                  width: 1px;
+                  height: 1px;
+                  padding: 0;
+                  margin: -1px;
+                  overflow: hidden;
+                  clip: rect(0, 0, 0, 0);
+                  white-space: nowrap;
+                  border: 0;
+                `}
+              >
+                {validationErrors?.join('. ')}
+              </span>{' '}
             </span>
           )}
           {renderOptionalIcons()}

superset-frontend/src/explore/components/controls/NumberControl/index.tsx

@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useRef } from 'react';
-import { styled } from '@apache-superset/core/theme';
+import { useId, useRef } from 'react';
+import { styled, css, SupersetTheme } from '@apache-superset/core/theme';
 import { InputNumber } from '@superset-ui/core/components/Input';
 import ControlHeader, { ControlHeaderProps } from '../../ControlHeader';
 
@@ -43,6 +43,13 @@ const FullWidthInputNumber = styled(InputNumber)`
   width: 100%;
 `;
 
+const fieldErrorStyles = (theme: SupersetTheme) => css`
+  color: ${theme.colorError};
+  font-size: ${theme.fontSizeSM}px;
+  display: block;
+  margin-top: ${theme.sizeUnit}px;
+`;
+
 function parseValue(value: string | number | null | undefined) {
   if (value === null || value === undefined || value === '') {
     return undefined;
@@ -62,6 +69,8 @@ export default function NumberControl({
   ...rest
 }: NumberControlProps) {
   const pendingValueRef = useRef<NumberValueType>(value);
+  const uniqueId = useId();
+  const inputId = rest.name || uniqueId;
 
   const handleChange = (val: string | number | null) => {
     pendingValueRef.current = parseValue(val);
@@ -76,9 +85,17 @@ export default function NumberControl({
     onChange?.(val);
   };
 
+  const hasErrors =
+    rest.validationErrors && rest.validationErrors.length > 0;
+  // WCAG 3.3.1: the visually hidden live-region inside ControlHeader carries
+  // the id and role="alert"; this wrapper only needs to point the input at
+  // that same id via aria-describedby. Sharing one id per control avoids
+  // duplicate DOM ids and duplicate screen-reader announcements.
+  const errorId = hasErrors ? `${inputId}-error` : undefined;
+
   return (
     <FullWidthDiv>
-      <ControlHeader {...rest} />
+      <ControlHeader {...rest} errorId={errorId} />
       <FullWidthInputNumber
         min={min}
         max={max}
@@ -90,7 +107,15 @@ export default function NumberControl({
         onStep={handleStep}
         disabled={disabled}
         aria-label={rest.label}
+        aria-invalid={hasErrors || undefined}
+        aria-describedby={errorId}
+        id={inputId}
       />
+      {hasErrors && (
+        <span css={fieldErrorStyles}>
+          {rest.validationErrors!.join('. ')}
+        </span>
+      )}
     </FullWidthDiv>
   );
 }

superset-frontend/src/explore/components/controls/TextControl/index.tsx

@@ -18,10 +18,18 @@
  */
 import { Component, ChangeEvent } from 'react';
 import { legacyValidateNumber, legacyValidateInteger } from '@superset-ui/core';
+import { css, SupersetTheme } from '@apache-superset/core/theme';
 import { debounce } from 'lodash';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import { Constants, Input } from '@superset-ui/core/components';
 
+const fieldErrorStyles = (theme: SupersetTheme) => css`
+  color: ${theme.colorError};
+  font-size: ${theme.fontSizeSM}px;
+  display: block;
+  margin-top: ${theme.sizeUnit}px;
+`;
+
 type InputValueType = string | number;
 
 export interface TextControlProps<T extends InputValueType = InputValueType> {
@@ -104,9 +112,15 @@ export default class TextControl<
       this.initialValue = this.props.value;
       value = safeStringify(this.props.value);
     }
+    const hasErrors =
+      this.props.validationErrors && this.props.validationErrors.length > 0;
+    const inputId = this.props.controlId || this.props.name;
+    // WCAG 3.3.1: share a single error container id with ControlHeader so
+    // the input's aria-describedby resolves to one live-region, not two.
+    const errorId = hasErrors && inputId ? `${inputId}-error` : undefined;
     return (
       <div>
-        <ControlHeader {...this.props} />
+        <ControlHeader {...this.props} errorId={errorId} />
         <Input
           type="text"
           data-test="inline-name"
@@ -116,7 +130,15 @@ export default class TextControl<
           value={value}
           disabled={this.props.disabled}
           aria-label={this.props.label}
+          aria-invalid={hasErrors || undefined}
+          aria-describedby={errorId}
+          id={inputId}
         />
+        {hasErrors && (
+          <span css={fieldErrorStyles}>
+            {this.props.validationErrors!.join('. ')}
+          </span>
+        )}
       </div>
     );
   }