Remove usage of aria-details from InputControl and BaseControl. (#61203)

* Remove usage of aria-details from InputControl and BaseControl. * Add changelog entry. Co-authored-by: afercia <[email protected]> Co-authored-by: Mamaduka <[email protected]>
WordPress · May 10, 2024 · df77d44 · df77d44
1 parent f4cf64a
commit df77d44
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 17 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -30,6 +30,7 @@
 
 ### Bug Fix
 
+-   `BaseControl`, `InputControl`: Remove usage of aria-details from InputControl and BaseControl ([#61203](https://github.com/WordPress/gutenberg/pull/61203)).
 -   `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)).
 -   `Panel`: Fix issue with collapsing panel header ([#61319](https://github.com/WordPress/gutenberg/pull/61319)).
 

diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
@@ -53,7 +53,7 @@ If true, the label will only be visible to screen readers.
 
 ### help
 
-Additional description for the control. It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`. When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+Additional description for the control. The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
 -   Type: `ReactNode`
 -   Required: No

diff --git a/packages/components/src/base-control/hooks.ts b/packages/components/src/base-control/hooks.ts
@@ -27,10 +27,6 @@ export function useBaseControlProps(
 		preferredId
 	);
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-
 	return {
 		baseControlProps: {
 			id: uniqueId,
@@ -39,7 +35,7 @@ export function useBaseControlProps(
 		},
 		controlProps: {
 			id: uniqueId,
-			...( !! help ? { [ helpPropName ]: `${ uniqueId }__help` } : {} ),
+			...( !! help ? { 'aria-describedby': `${ uniqueId }__help` } : {} ),
 		},
 	};
 }
diff --git a/packages/components/src/base-control/test/index.tsx b/packages/components/src/base-control/test/index.tsx
@@ -31,7 +31,7 @@ describe( 'BaseControl', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should render help as aria-details when not plain text', () => {
+	it( 'should still render help as aria-describedby when not plain text', () => {
 		render(
 			<MyBaseControl
 				label="Text"
@@ -44,10 +44,10 @@ describe( 'BaseControl', () => {
 			name: 'My help text',
 		} );
 
-		expect( textarea ).toHaveAttribute( 'aria-details' );
+		expect( textarea ).toHaveAttribute( 'aria-describedby' );
 		expect(
 			// eslint-disable-next-line testing-library/no-node-access
-			help.closest( `#${ textarea.getAttribute( 'aria-details' ) }` )
+			help.closest( `#${ textarea.getAttribute( 'aria-describedby' ) }` )
 		).toBeVisible();
 	} );
 } );
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
@@ -21,8 +21,7 @@ export type BaseControlProps = {
 	/**
 	 * Additional description for the control.
 	 *
-	 * It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`.
-	 * When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+	 * The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 	 */
 	help?: ReactNode;
 	/**

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
@@ -66,10 +66,7 @@ export function UnforwardedInputControl(
 		onChange,
 	} );
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-	const helpProp = !! help ? { [ helpPropName ]: `${ id }__help` } : {};
+	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
 	return (
 		<BaseControl

diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
@@ -53,15 +53,15 @@ describe( 'InputControl', () => {
 			).toBeInTheDocument();
 		} );
 
-		it( 'should render help as aria-details when not plain text', () => {
+		it( 'should still render help as aria-describedby when not plain text', () => {
 			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
 
 			const input = screen.getByRole( 'textbox' );
 			const help = screen.getByRole( 'link', { name: 'My help text' } );
 
 			expect(
 				// eslint-disable-next-line testing-library/no-node-access
-				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
+				help.closest( `#${ input.getAttribute( 'aria-describedby' ) }` )
 			).toBeVisible();
 		} );
 	} );