From b3b0593ab83000bacc0791dacb7d429e9daf76bc Mon Sep 17 00:00:00 2001
From: Fedo Hagge-Kubat <office@aitema.org>
Date: Thu, 9 Apr 2026 20:52:48 +0200
Subject: [PATCH 1/4] =?UTF-8?q?fix(a11y):=20WCAG=203.3.1=20=E2=80=94=20add?=
 =?UTF-8?q?=20error=20identification=20with=20role=3Dalert,=20aria-invalid?=
 =?UTF-8?q?,=20and=20aria-describedby?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Alert/Alert.test.tsx       | 36 +++++++++++++-
 .../src/components/Alert/index.tsx            |  1 +
 .../Form/LabeledErrorBoundInput.tsx           | 20 +++++++-
 .../ErrorMessage/BasicErrorAlert.test.tsx     | 20 ++++++++
 .../ErrorMessage/BasicErrorAlert.tsx          |  2 +-
 .../src/components/Modal/ModalFormField.tsx   | 26 ++++++++--
 .../src/explore/components/ControlHeader.tsx  | 24 ++++++++-
 .../controls/NumberControl/index.tsx          | 18 +++++++
 .../components/controls/TextControl/index.tsx | 15 ++++++
 .../src/features/alerts/AlertReportModal.tsx  | 19 ++++++-
 .../alerts/components/NumberInput.tsx         |  2 +
 .../databases/DatabaseModal/SSHTunnelForm.tsx | 49 +++++++++++++++++++
 .../DatabaseModal/SqlAlchemyForm.tsx          | 22 ++++++++-
 .../src/features/roles/RoleFormItems.tsx      |  6 ++-
 14 files changed, 248 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/packages/superset-core/src/components/Alert/Alert.test.tsx b/superset-frontend/packages/superset-core/src/components/Alert/Alert.test.tsx
index cb0e8092f7d7..24f11f10a815 100644
--- a/superset-frontend/packages/superset-core/src/components/Alert/Alert.test.tsx
+++ b/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');
+});
diff --git a/superset-frontend/packages/superset-core/src/components/Alert/index.tsx b/superset-frontend/packages/superset-core/src/components/Alert/index.tsx
index ff593b853a57..bda693a2721e 100644
--- a/superset-frontend/packages/superset-core/src/components/Alert/index.tsx
+++ b/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}
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/packages/superset-ui-core/src/components/Form/LabeledErrorBoundInput.tsx
index 882fabf8b414..25ebde4bc17f 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/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
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
index 92bc923edca5..7a0f8bccc3b3 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
+++ b/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');
+});
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
index 213182ffec4e..ba78a3e3f141 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
+++ b/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>
diff --git a/superset-frontend/src/components/Modal/ModalFormField.tsx b/superset-frontend/src/components/Modal/ModalFormField.tsx
index c825e465b58c..7fb962ccdd4e 100644
--- a/superset-frontend/src/components/Modal/ModalFormField.tsx
+++ b/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,6 +128,22 @@ 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
+  const enhancedChildren = error
+    ? Children.map(children, (child, index) => {
+        if (index === 0 && isValidElement(child)) {
+          return cloneElement(child as React.ReactElement<any>, {
+            'aria-invalid': true,
+            'aria-describedby': errorId,
+          });
+        }
+        return child;
+      })
+    : children;
+
   return (
     <StyledFieldContainer bottomSpacing={bottomSpacing} data-test={testId}>
       <div className="control-label">
@@ -135,9 +151,13 @@ export function ModalFormField({
         {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>
   );
 }
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index a2bbf047c31d..0250d030a3d2 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -178,8 +178,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={`${name || 'control'}-error`}
+                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()}
diff --git a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
index db7d85b97a03..614a793b90da 100644
--- a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
@@ -76,6 +76,12 @@ export default function NumberControl({
     onChange?.(val);
   };
 
+  const hasErrors =
+    rest.validationErrors && rest.validationErrors.length > 0;
+  const errorId = hasErrors
+    ? `${rest.name || 'number-control'}-error`
+    : undefined;
+
   return (
     <FullWidthDiv>
       <ControlHeader {...rest} />
@@ -90,7 +96,19 @@ export default function NumberControl({
         onStep={handleStep}
         disabled={disabled}
         aria-label={rest.label}
+        aria-invalid={hasErrors || undefined}
+        aria-describedby={errorId}
+        id={rest.name}
       />
+      {hasErrors && (
+        <span
+          id={errorId}
+          role="alert"
+          style={{ color: 'red', fontSize: '12px', display: 'block', marginTop: '4px' }}
+        >
+          {rest.validationErrors!.join('. ')}
+        </span>
+      )}
     </FullWidthDiv>
   );
 }
diff --git a/superset-frontend/src/explore/components/controls/TextControl/index.tsx b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
index 805d3d90eb79..d4b4f210506b 100644
--- a/superset-frontend/src/explore/components/controls/TextControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
@@ -104,6 +104,9 @@ 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 errorId = hasErrors ? `${this.props.controlId || this.props.name || 'text'}-error` : undefined;
     return (
       <div>
         <ControlHeader {...this.props} />
@@ -116,7 +119,19 @@ export default class TextControl<
           value={value}
           disabled={this.props.disabled}
           aria-label={this.props.label}
+          aria-invalid={hasErrors || undefined}
+          aria-describedby={errorId}
+          id={this.props.controlId || this.props.name}
         />
+        {hasErrors && (
+          <span
+            id={errorId}
+            role="alert"
+            style={{ color: 'red', fontSize: '12px', display: 'block', marginTop: '4px' }}
+          >
+            {this.props.validationErrors!.join('. ')}
+          </span>
+        )}
       </div>
     );
   }
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index ee300a5380b4..5f22f0a8535d 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -2125,6 +2125,14 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                   <ModalFormField
                     label={isReport ? t('Report name') : t('Alert name')}
                     required
+                    error={
+                      validationStatus[Sections.General].hasErrors &&
+                      !currentAlert?.name?.length
+                        ? isReport
+                          ? t('Report name is required')
+                          : t('Alert name is required')
+                        : undefined
+                    }
                   >
                     <Input
                       name="name"
@@ -2137,7 +2145,16 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                       onChange={onInputChange}
                     />
                   </ModalFormField>
-                  <ModalFormField label={t('Owners')} required>
+                  <ModalFormField
+                    label={t('Owners')}
+                    required
+                    error={
+                      validationStatus[Sections.General].hasErrors &&
+                      !currentAlert?.owners?.length
+                        ? t('At least one owner is required')
+                        : undefined
+                    }
+                  >
                     <AsyncSelect
                       ariaLabel={t('Owners')}
                       allowClear
diff --git a/superset-frontend/src/features/alerts/components/NumberInput.tsx b/superset-frontend/src/features/alerts/components/NumberInput.tsx
index 4605cd6b86f1..363e15ae0c33 100644
--- a/superset-frontend/src/features/alerts/components/NumberInput.tsx
+++ b/superset-frontend/src/features/alerts/components/NumberInput.tsx
@@ -26,6 +26,8 @@ interface NumberInputProps {
   value: string | number;
   placeholder: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  'aria-invalid'?: boolean;
+  'aria-describedby'?: string;
 }
 
 export default function NumberInput({
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index ed47ed1952e9..4787e04a3289 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -62,6 +62,11 @@ const SSHTunnelForm = ({
   setSSHTunnelLoginMethod: (method: AuthType) => void;
 }) => {
   const [usePassword, setUsePassword] = useState<AuthType>(AuthType.Password);
+  const [blurred, setBlurred] = useState<Record<string, boolean>>({});
+  const markBlurred = (field: string) =>
+    setBlurred(prev => ({ ...prev, [field]: true }));
+  const fieldError = (field: string, value: string | number | undefined) =>
+    blurred[field] && !value;
 
   return (
     <Form>
@@ -77,8 +82,23 @@ const SSHTunnelForm = ({
               placeholder={t('e.g. 127.0.0.1')}
               value={db?.ssh_tunnel?.server_address || ''}
               onChange={onSSHTunnelParametersChange}
+              onBlur={() => markBlurred('server_address')}
+              aria-invalid={
+                fieldError('server_address', db?.ssh_tunnel?.server_address) ||
+                undefined
+              }
+              aria-describedby={
+                fieldError('server_address', db?.ssh_tunnel?.server_address)
+                  ? 'server-address-error'
+                  : undefined
+              }
               data-test="ssh-tunnel-server_address-input"
             />
+            {fieldError('server_address', db?.ssh_tunnel?.server_address) && (
+              <span id="server-address-error" role="alert" style={{ color: 'red', fontSize: '12px' }}>
+                {t('SSH Host is required')}
+              </span>
+            )}
           </StyledDiv>
         </Col>
         <Col xs={24} md={12}>
@@ -92,8 +112,23 @@ const SSHTunnelForm = ({
               type="number"
               value={db?.ssh_tunnel?.server_port}
               onChange={onSSHTunnelParametersChange}
+              onBlur={() => markBlurred('server_port')}
+              aria-invalid={
+                fieldError('server_port', db?.ssh_tunnel?.server_port) ||
+                undefined
+              }
+              aria-describedby={
+                fieldError('server_port', db?.ssh_tunnel?.server_port)
+                  ? 'server-port-error'
+                  : undefined
+              }
               data-test="ssh-tunnel-server_port-input"
             />
+            {fieldError('server_port', db?.ssh_tunnel?.server_port) && (
+              <span id="server-port-error" role="alert" style={{ color: 'red', fontSize: '12px' }}>
+                {t('SSH Port is required')}
+              </span>
+            )}
           </StyledDiv>
         </Col>
       </StyledRow>
@@ -109,8 +144,22 @@ const SSHTunnelForm = ({
               placeholder={t('e.g. Analytics')}
               value={db?.ssh_tunnel?.username || ''}
               onChange={onSSHTunnelParametersChange}
+              onBlur={() => markBlurred('username')}
+              aria-invalid={
+                fieldError('username', db?.ssh_tunnel?.username) || undefined
+              }
+              aria-describedby={
+                fieldError('username', db?.ssh_tunnel?.username)
+                  ? 'ssh-username-error'
+                  : undefined
+              }
               data-test="ssh-tunnel-username-input"
             />
+            {fieldError('username', db?.ssh_tunnel?.username) && (
+              <span id="ssh-username-error" role="alert" style={{ color: 'red', fontSize: '12px' }}>
+                {t('Username is required')}
+              </span>
+            )}
           </StyledDiv>
         </Col>
       </StyledRow>
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SqlAlchemyForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SqlAlchemyForm.tsx
index 450a55c7d6c9..92856f428ccc 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SqlAlchemyForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SqlAlchemyForm.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EventHandler, ChangeEvent, MouseEvent, ReactNode } from 'react';
+import { EventHandler, ChangeEvent, MouseEvent, ReactNode, useState } from 'react';
 import { t } from '@apache-superset/core/translation';
 import { SupersetTheme } from '@apache-superset/core/theme';
 import SupersetText from 'src/utils/textUtils';
@@ -39,6 +39,10 @@ const SqlAlchemyTab = ({
   testInProgress?: boolean;
   children?: ReactNode;
 }) => {
+  const [nameBlurred, setNameBlurred] = useState(false);
+  const [uriBlurred, setUriBlurred] = useState(false);
+  const nameError = nameBlurred && !db?.database_name;
+  const uriError = uriBlurred && !db?.sqlalchemy_uri;
   const fallbackDocsUrl =
     SupersetText?.DB_MODAL_SQLALCHEMY_FORM?.SQLALCHEMY_DOCS_URL ||
     'https://docs.sqlalchemy.org/en/13/core/engines.html';
@@ -60,8 +64,16 @@ const SqlAlchemyTab = ({
             value={db?.database_name || ''}
             placeholder={t('Name your database')}
             onChange={onInputChange}
+            onBlur={() => setNameBlurred(true)}
+            aria-invalid={nameError || undefined}
+            aria-describedby={nameError ? 'database-name-error' : undefined}
           />
         </div>
+        {nameError && (
+          <div className="helper" id="database-name-error" role="alert" style={{ color: 'var(--ifm-color-danger, #e04f5f)' }}>
+            {t('Display Name is required')}
+          </div>
+        )}
         <div className="helper">
           {t('Pick a name to help you identify this database.')}
         </div>
@@ -82,8 +94,16 @@ const SqlAlchemyTab = ({
               t('dialect+driver://username:password@host:port/database')
             }
             onChange={onInputChange}
+            onBlur={() => setUriBlurred(true)}
+            aria-invalid={uriError || undefined}
+            aria-describedby={uriError ? 'sqlalchemy-uri-error' : undefined}
           />
         </div>
+        {uriError && (
+          <div className="helper" id="sqlalchemy-uri-error" role="alert" style={{ color: 'var(--ifm-color-danger, #e04f5f)' }}>
+            {t('SQLAlchemy URI is required')}
+          </div>
+        )}
         <div className="helper">
           {t('Refer to the')}{' '}
           <a
diff --git a/superset-frontend/src/features/roles/RoleFormItems.tsx b/superset-frontend/src/features/roles/RoleFormItems.tsx
index 5054801bfc61..1a1c07af3516 100644
--- a/superset-frontend/src/features/roles/RoleFormItems.tsx
+++ b/superset-frontend/src/features/roles/RoleFormItems.tsx
@@ -37,7 +37,11 @@ export const RoleNameField = () => (
     label={t('Role Name')}
     rules={[{ required: true, message: t('Role name is required') }]}
   >
-    <Input name="roleName" data-test="role-name-input" />
+    <Input
+      name="roleName"
+      data-test="role-name-input"
+      aria-required="true"
+    />
   </FormItem>
 );
 

From f5aa0128b665358249359f2e206f70bfcc894018 Mon Sep 17 00:00:00 2001
From: Fedo Hagge-Kubat <office@aitema.org>
Date: Thu, 9 Apr 2026 22:06:18 +0200
Subject: [PATCH 2/4] fix(a11y): use useId for unique error IDs, guard error
 display during loading

---
 superset-frontend/src/explore/components/ControlHeader.tsx | 6 ++++--
 superset-frontend/src/features/alerts/AlertReportModal.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 0250d030a3d2..282bb189678d 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/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';
@@ -72,6 +72,8 @@ const ControlHeader: FC<ControlHeaderProps> = ({
   danger,
 }) => {
   const theme = useTheme();
+  const uniqueId = useId();
+  const errorId = `${name || uniqueId}-error`;
 
   if (!label) {
     return null;
@@ -184,7 +186,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
                 />
               </Tooltip>
               <span
-                id={`${name || 'control'}-error`}
+                id={errorId}
                 role="alert"
                 css={css`
                   position: absolute;
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index 5f22f0a8535d..50afab210cd6 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -2126,8 +2126,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                     label={isReport ? t('Report name') : t('Alert name')}
                     required
                     error={
+                      currentAlert &&
                       validationStatus[Sections.General].hasErrors &&
-                      !currentAlert?.name?.length
+                      !currentAlert.name?.length
                         ? isReport
                           ? t('Report name is required')
                           : t('Alert name is required')
@@ -2149,8 +2150,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                     label={t('Owners')}
                     required
                     error={
+                      currentAlert &&
                       validationStatus[Sections.General].hasErrors &&
-                      !currentAlert?.owners?.length
+                      !currentAlert.owners?.length
                         ? t('At least one owner is required')
                         : undefined
                     }

From 7938a0dff68f557261e6ab0a5c69f6bfca0027a0 Mon Sep 17 00:00:00 2001
From: Fedo Hagge-Kubat <office@aitema.org>
Date: Sun, 19 Apr 2026 18:16:05 +0200
Subject: [PATCH 3/4] =?UTF-8?q?fix(a11y):=20WCAG=203.3.1=20=E2=80=94=20ded?=
 =?UTF-8?q?uplicate=20error=20ids=20and=20live-regions,=20widen=20ModalFor?=
 =?UTF-8?q?mField=20traversal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Address Bito + CodeAnt review findings on PR #39245:

ControlHeader / NumberControl / TextControl
- ControlHeader accepts an external errorId so wrappers share one DOM id
  per control. Previously both ControlHeader and the input wrapper rendered
  id="${name}-error" + role="alert", producing duplicate ids and
  duplicate screen-reader announcements for the same validation error.
- NumberControl now computes a stable input id via useId when name is
  missing, so id="undefined" never hits the DOM.
- The visible inline red error below the input keeps the text but drops
  its id and role="alert" — the live-region inside ControlHeader is the
  single source of truth for assistive tech.

ModalFormField
- Injecting aria-invalid / aria-describedby on the first child missed
  FormItem-wrapped inputs, leaving the real interactive element unlinked
  to the error. The traversal now hops through a single-child wrapper to
  decorate the wrapped input.

SSHTunnelForm
- Required-field check treated whitespace-only input as valid, letting
  users bypass validation with a space. The check now trims before the
  emptiness test.

Already addressed in prior commit 3f2a60f8db on this branch:
- AlertReportModal name/owners error guards against currentAlert loading
- ControlHeader useId fallback for missing name

Not changed:
- RoleNameField — Ant Design FormItem with rules={[{required:true}]}
  already sets aria-invalid on the input via FieldContext when validation
  fails; the explicit render-prop pattern the bot suggested would nest
  FormItems for no behavior gain.
---
 .../src/components/Modal/ModalFormField.tsx   | 28 ++++++++++++++++---
 .../src/explore/components/ControlHeader.tsx  |  7 ++++-
 .../controls/NumberControl/index.tsx          | 18 ++++++------
 .../components/controls/TextControl/index.tsx | 11 ++++----
 .../databases/DatabaseModal/SSHTunnelForm.tsx |  6 +++-
 5 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/src/components/Modal/ModalFormField.tsx b/superset-frontend/src/components/Modal/ModalFormField.tsx
index 7fb962ccdd4e..e658a5c4f900 100644
--- a/superset-frontend/src/components/Modal/ModalFormField.tsx
+++ b/superset-frontend/src/components/Modal/ModalFormField.tsx
@@ -132,13 +132,33 @@ export function ModalFormField({
   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 cloneElement(child as React.ReactElement<any>, {
-            'aria-invalid': true,
-            'aria-describedby': errorId,
-          });
+          return applyAria(child as React.ReactElement<any>);
         }
         return child;
       })
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 282bb189678d..f269fa259b3d 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -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,10 +74,11 @@ const ControlHeader: FC<ControlHeaderProps> = ({
   tooltipOnClick = () => {},
   warning,
   danger,
+  errorId: providedErrorId,
 }) => {
   const theme = useTheme();
   const uniqueId = useId();
-  const errorId = `${name || uniqueId}-error`;
+  const errorId = providedErrorId ?? `${name || uniqueId}-error`;
 
   if (!label) {
     return null;
diff --git a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
index 614a793b90da..fcfbbf109e15 100644
--- a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useRef } from 'react';
+import { useId, useRef } from 'react';
 import { styled } from '@apache-superset/core/theme';
 import { InputNumber } from '@superset-ui/core/components/Input';
 import ControlHeader, { ControlHeaderProps } from '../../ControlHeader';
@@ -62,6 +62,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);
@@ -78,13 +80,15 @@ export default function NumberControl({
 
   const hasErrors =
     rest.validationErrors && rest.validationErrors.length > 0;
-  const errorId = hasErrors
-    ? `${rest.name || 'number-control'}-error`
-    : undefined;
+  // 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}
@@ -98,12 +102,10 @@ export default function NumberControl({
         aria-label={rest.label}
         aria-invalid={hasErrors || undefined}
         aria-describedby={errorId}
-        id={rest.name}
+        id={inputId}
       />
       {hasErrors && (
         <span
-          id={errorId}
-          role="alert"
           style={{ color: 'red', fontSize: '12px', display: 'block', marginTop: '4px' }}
         >
           {rest.validationErrors!.join('. ')}
diff --git a/superset-frontend/src/explore/components/controls/TextControl/index.tsx b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
index d4b4f210506b..793f06d291db 100644
--- a/superset-frontend/src/explore/components/controls/TextControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
@@ -106,10 +106,13 @@ export default class TextControl<
     }
     const hasErrors =
       this.props.validationErrors && this.props.validationErrors.length > 0;
-    const errorId = hasErrors ? `${this.props.controlId || this.props.name || 'text'}-error` : undefined;
+    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"
@@ -121,12 +124,10 @@ export default class TextControl<
           aria-label={this.props.label}
           aria-invalid={hasErrors || undefined}
           aria-describedby={errorId}
-          id={this.props.controlId || this.props.name}
+          id={inputId}
         />
         {hasErrors && (
           <span
-            id={errorId}
-            role="alert"
             style={{ color: 'red', fontSize: '12px', display: 'block', marginTop: '4px' }}
           >
             {this.props.validationErrors!.join('. ')}
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index 4787e04a3289..4d6a24f1d8b5 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -66,7 +66,11 @@ const SSHTunnelForm = ({
   const markBlurred = (field: string) =>
     setBlurred(prev => ({ ...prev, [field]: true }));
   const fieldError = (field: string, value: string | number | undefined) =>
-    blurred[field] && !value;
+    // WCAG 3.3.1: treat whitespace-only strings as empty so users cannot
+    // bypass required-field validation with a space character.
+    blurred[field] &&
+    (value === undefined ||
+      (typeof value === 'string' && value.trim().length === 0));
 
   return (
     <Form>

From c82211403da8fd1a82a1a8a179c4cedf18395da7 Mon Sep 17 00:00:00 2001
From: Kolja <kolja@aitema.de>
Date: Thu, 7 May 2026 18:15:54 +0200
Subject: [PATCH 4/4] =?UTF-8?q?fix(a11y):=20WCAG=203.3.1=20=E2=80=94=20gat?=
 =?UTF-8?q?e=20AlertReportModal=20validation,=20replace=20inline=20error?=
 =?UTF-8?q?=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses three remaining bot-review items on PR #39245:

- AlertReportModal: validateGeneralSection now bails early when currentAlert
  is still null/undefined, mirroring the display-side `currentAlert &&` gate.
  Previously validation flagged required-field errors during the brief load
  window, disabling save without showing the error to the user. Validation
  reruns once setCurrentAlert initializes the form data.
- NumberControl, TextControl, SSHTunnelForm: the inline error spans used
  hardcoded `style={{ color: 'red', fontSize: '12px' }}`. Replaced with a
  reusable `fieldErrorStyles` helper that pulls colorError, fontSizeSM, and
  sizeUnit from the SupersetTheme, so error appearance follows theme tokens
  in dark mode and on custom themes.
---
 .../components/controls/NumberControl/index.tsx   | 13 +++++++++----
 .../components/controls/TextControl/index.tsx     | 12 +++++++++---
 .../src/features/alerts/AlertReportModal.tsx      | 11 +++++++++--
 .../databases/DatabaseModal/SSHTunnelForm.tsx     | 15 +++++++++++----
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
index fcfbbf109e15..8cb0bac1c1a7 100644
--- a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useId, useRef } from 'react';
-import { styled } from '@apache-superset/core/theme';
+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;
@@ -105,9 +112,7 @@ export default function NumberControl({
         id={inputId}
       />
       {hasErrors && (
-        <span
-          style={{ color: 'red', fontSize: '12px', display: 'block', marginTop: '4px' }}
-        >
+        <span css={fieldErrorStyles}>
           {rest.validationErrors!.join('. ')}
         </span>
       )}
diff --git a/superset-frontend/src/explore/components/controls/TextControl/index.tsx b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
index 793f06d291db..d2d9d0e6be3d 100644
--- a/superset-frontend/src/explore/components/controls/TextControl/index.tsx
+++ b/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> {
@@ -127,9 +135,7 @@ export default class TextControl<
           id={inputId}
         />
         {hasErrors && (
-          <span
-            style={{ color: 'red', fontSize: '12px', display: 'block', marginTop: '4px' }}
-          >
+          <span css={fieldErrorStyles}>
             {this.props.validationErrors!.join('. ')}
           </span>
         )}
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index 50afab210cd6..fc8d5f026f63 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -1746,11 +1746,18 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   };
 
   const validateGeneralSection = () => {
+    // Skip validation while alert data is still loading so the error display
+    // (which is also gated on `currentAlert`) and the disable-save flag stay
+    // consistent. Once the modal initializes `currentAlert`, validation reruns.
+    if (!currentAlert) {
+      updateValidationStatus(Sections.General, []);
+      return;
+    }
     const errors = [];
-    if (!currentAlert?.name?.length) {
+    if (!currentAlert.name?.length) {
       errors.push(TRANSLATIONS.NAME_ERROR_TEXT);
     }
-    if (!currentAlert?.owners?.length) {
+    if (!currentAlert.owners?.length) {
       errors.push(TRANSLATIONS.OWNERS_ERROR_TEXT);
     }
     updateValidationStatus(Sections.General, errors);
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index 4d6a24f1d8b5..b7fe3024bcc9 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -18,7 +18,7 @@
  */
 import { useState } from 'react';
 import { t } from '@apache-superset/core/translation';
-import { styled } from '@apache-superset/core/theme';
+import { styled, css, SupersetTheme } from '@apache-superset/core/theme';
 import {
   Form,
   FormLabel,
@@ -52,6 +52,13 @@ const StyledInputPassword = styled(Input.Password)`
   margin: ${({ theme }) => `${theme.sizeUnit}px 0 ${theme.sizeUnit * 2}px`};
 `;
 
+const fieldErrorStyles = (theme: SupersetTheme) => css`
+  color: ${theme.colorError};
+  font-size: ${theme.fontSizeSM}px;
+  display: block;
+  margin-top: ${theme.sizeUnit}px;
+`;
+
 const SSHTunnelForm = ({
   db,
   onSSHTunnelParametersChange,
@@ -99,7 +106,7 @@ const SSHTunnelForm = ({
               data-test="ssh-tunnel-server_address-input"
             />
             {fieldError('server_address', db?.ssh_tunnel?.server_address) && (
-              <span id="server-address-error" role="alert" style={{ color: 'red', fontSize: '12px' }}>
+              <span id="server-address-error" role="alert" css={fieldErrorStyles}>
                 {t('SSH Host is required')}
               </span>
             )}
@@ -129,7 +136,7 @@ const SSHTunnelForm = ({
               data-test="ssh-tunnel-server_port-input"
             />
             {fieldError('server_port', db?.ssh_tunnel?.server_port) && (
-              <span id="server-port-error" role="alert" style={{ color: 'red', fontSize: '12px' }}>
+              <span id="server-port-error" role="alert" css={fieldErrorStyles}>
                 {t('SSH Port is required')}
               </span>
             )}
@@ -160,7 +167,7 @@ const SSHTunnelForm = ({
               data-test="ssh-tunnel-username-input"
             />
             {fieldError('username', db?.ssh_tunnel?.username) && (
-              <span id="ssh-username-error" role="alert" style={{ color: 'red', fontSize: '12px' }}>
+              <span id="ssh-username-error" role="alert" css={fieldErrorStyles}>
                 {t('Username is required')}
               </span>
             )}