diff --git a/.changeset/red-lies-vanish.md b/.changeset/red-lies-vanish.md new file mode 100644 index 00000000000..ebdc8d41b7f --- /dev/null +++ b/.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. diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index be740965bc7..5ca8b11f409 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/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 & SxProp @@ -54,7 +49,6 @@ const Radio = React.forwardRef( onChange, sx: sxProp = defaultSxProp, required, - validationStatus, value, className, ...rest @@ -77,7 +71,6 @@ const Radio = React.forwardRef( if (sxProp !== defaultSxProp) { return ( - // eslint-disable-next-line github/a11y-role-supports-aria-props ( 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( } return ( - // eslint-disable-next-line github/a11y-role-supports-aria-props ( 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} diff --git a/packages/react/src/__tests__/Radio.test.tsx b/packages/react/src/__tests__/Radio.test.tsx index 194d0f744c2..e6c0d114d91 100644 --- a/packages/react/src/__tests__/Radio.test.tsx +++ b/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() - - const radio = getByRole('radio') as HTMLInputElement - - expect(radio).toHaveAttribute('aria-invalid', 'false') - - rerender() - - expect(radio).toHaveAttribute('aria-invalid', 'false') - - rerender() - - expect(radio).toHaveAttribute('aria-invalid', 'true') - }) - - it('renders an aria state indicating the field is required', () => { - const handleChange = jest.fn() - const {getByRole, rerender} = render() - - const radio = getByRole('radio') as HTMLInputElement - - expect(radio).toHaveAttribute('aria-required', 'false') - - rerender() - - expect(radio).toHaveAttribute('aria-required', 'true') - }) })