From b4097cad902f218f6c590f755b3f42d57b384342 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 11 Mar 2025 10:31:19 -0400 Subject: [PATCH 1/4] Remove lint disable; removes `aria-invalid` and `aria-required` from `Radio` component --- packages/react/src/Radio/Radio.tsx | 6 ----- packages/react/src/__tests__/Radio.test.tsx | 30 --------------------- 2 files changed, 36 deletions(-) diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index be740965bc7..94c3d274c00 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -77,7 +77,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 +96,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') - }) }) From 58cfec8792b73f4dda0188fecb453ccb2be897a8 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 11 Mar 2025 10:41:31 -0400 Subject: [PATCH 2/4] Add changeset --- .changeset/red-lies-vanish.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/red-lies-vanish.md diff --git a/.changeset/red-lies-vanish.md b/.changeset/red-lies-vanish.md new file mode 100644 index 00000000000..258e0542d0c --- /dev/null +++ b/.changeset/red-lies-vanish.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Radio: Removes `aria-invalid` and `aria-required` from `Radio`, as they are not supported on the element's role. From d4e6b51bdb3330b8a8ea831355534d4524ddcf6b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 11 Mar 2025 10:48:21 -0400 Subject: [PATCH 3/4] Remove `validationStatus` prop --- packages/react/src/Radio/Radio.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index 94c3d274c00..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 From 7a51596e7aef69b2f741f25bc192af9e8c3141b8 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 11 Mar 2025 10:50:10 -0400 Subject: [PATCH 4/4] Update changeset bump --- .changeset/red-lies-vanish.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/red-lies-vanish.md b/.changeset/red-lies-vanish.md index 258e0542d0c..ebdc8d41b7f 100644 --- a/.changeset/red-lies-vanish.md +++ b/.changeset/red-lies-vanish.md @@ -1,5 +1,5 @@ --- -"@primer/react": patch +"@primer/react": minor --- Radio: Removes `aria-invalid` and `aria-required` from `Radio`, as they are not supported on the element's role.