Radio: Remove aria-required and aria-invalid (#5760)

Author: TylerJDev

.changeset/red-lies-vanish.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Radio: Removes `aria-invalid` and `aria-required` from `Radio`, as they are not supported on the element's role.

packages/react/src/Radio/Radio.tsx

@@ -1,7 +1,6 @@
 import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
 import React, {useContext} from 'react'
 import type {SxProp} from '../sx'
-import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
 import {clsx} from 'clsx'
 import classes from './Radio.module.css'
@@ -35,10 +34,6 @@ export type RadioProps = {
    * Indicates whether the radio button must be checked before the form can be submitted
    */
   required?: boolean
-  /**
-   * Only used to inform ARIA attributes. Individual radio inputs do not have validation styles.
-   */
-  validationStatus?: FormValidationStatus
 } & InputHTMLAttributes<HTMLInputElement> &
   SxProp
 
@@ -54,7 +49,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       onChange,
       sx: sxProp = defaultSxProp,
       required,
-      validationStatus,
       value,
       className,
       ...rest
@@ -77,7 +71,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
 
     if (sxProp !== defaultSxProp) {
       return (
-        // eslint-disable-next-line github/a11y-role-supports-aria-props
         <Box
           as="input"
           sx={sxProp}
@@ -89,8 +82,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
           checked={checked}
           aria-checked={checked ? 'true' : 'false'}
           required={required}
-          aria-required={required ? 'true' : 'false'}
-          aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
           onChange={handleOnChange}
           className={clsx(className, sharedClasses.Input, classes.Radio)}
           {...rest}
@@ -99,7 +90,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     }
 
     return (
-      // eslint-disable-next-line github/a11y-role-supports-aria-props
       <input
         type="radio"
         value={value}
@@ -109,8 +99,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         checked={checked}
         aria-checked={checked ? 'true' : 'false'}
         required={required}
-        aria-required={required ? 'true' : 'false'}
-        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
         onChange={handleOnChange}
         className={clsx(className, sharedClasses.Input, classes.Radio)}
         {...rest}

packages/react/src/__tests__/Radio.test.tsx

@@ -150,34 +150,4 @@ describe('Radio', () => {
 
     expect(radio).toHaveAttribute('aria-checked', 'true')
   })
-
-  it('renders an invalid aria state when validation prop indicates an error', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio).toHaveAttribute('aria-invalid', 'false')
-
-    rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="success" />)
-
-    expect(radio).toHaveAttribute('aria-invalid', 'false')
-
-    rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="error" />)
-
-    expect(radio).toHaveAttribute('aria-invalid', 'true')
-  })
-
-  it('renders an aria state indicating the field is required', () => {
-    const handleChange = jest.fn()
-    const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
-
-    const radio = getByRole('radio') as HTMLInputElement
-
-    expect(radio).toHaveAttribute('aria-required', 'false')
-
-    rerender(<Radio {...defaultProps} onChange={handleChange} required />)
-
-    expect(radio).toHaveAttribute('aria-required', 'true')
-  })
 })