Merge pull request #73 from Automattic/fix/code-a11y-issues

Improve <Code> a11y
Automattic · Jul 4, 2022 · 2ab5620 · 2ab5620
2 parents 5a4a185 + 01ae060
commit 2ab5620
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/system/Code/Code.js b/src/system/Code/Code.js
@@ -50,7 +50,7 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...
 			{ codeDom }
 			{
 				<button
-					aria-label="Copy"
+					aria-label="Copy code"
 					sx={ {
 						bg: 'grey.10',
 						borderTopRightRadius: 1,
@@ -79,7 +79,11 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, className, ...
 						}
 					} }
 				>
-					{ copied ? 'Copied!' : <MdContentCopy /> }
+					{ copied ? (
+						<span role="alert">Code copied to clipboard</span>
+					) : (
+						<MdContentCopy aria-hidden="true" />
+					) }
 				</button>
 			}
 		</div>

diff --git a/src/system/Code/Code.test.js b/src/system/Code/Code.test.js
@@ -34,7 +34,7 @@ describe( '<Code />', () => {
 		const props = { ...defaultProps, showCopy: true };
 		const { container } = render( <Code { ...props }>This is a code</Code> );
 
-		expect( screen.getByRole( 'button', { name: 'Copy' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Copy code' } ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();
@@ -44,11 +44,11 @@ describe( '<Code />', () => {
 		const props = { ...defaultProps, showCopy: true };
 		const { container } = render( <Code { ...props }>This is a code</Code> );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Copy' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Copy code' } ) );
 
 		await waitFor( () => new Promise( res => setTimeout( res, 0 ) ) );
 
-		expect( screen.getByText( 'Copied!' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Code copied to clipboard' ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();