Remove role=img from Icons and revert to using querySelector

See: #41445 (comment)
WordPress · Jun 7, 2022 · 35005fa · 35005fa
1 parent 450290e
commit 35005fa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
@@ -229,7 +229,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 			<Root className="components-range-control__root">
 				{ beforeIcon && (
 					<BeforeIconWrapper>
-						<Icon icon={ beforeIcon } role="img" />
+						<Icon icon={ beforeIcon } />
 					</BeforeIconWrapper>
 				) }
 				<Wrapper
@@ -293,7 +293,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 				</Wrapper>
 				{ afterIcon && (
 					<AfterIconWrapper>
-						<Icon icon={ afterIcon } role="img" />
+						<Icon icon={ afterIcon } />
 					</AfterIconWrapper>
 				) }
 				{ hasInputField && (

diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
@@ -41,18 +41,22 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should render with icons', () => {
-			render(
+			const { container } = render(
 				<RangeControl
 					beforeIcon="format-image"
 					afterIcon="format-video"
 				/>
 			);
 
-			const icons = screen.getAllByRole( 'img' );
+			const beforeIcon = container.querySelector(
+				'.dashicons-format-image'
+			);
+			const afterIcon = container.querySelector(
+				'.dashicons-format-video'
+			);
 
-			expect( icons.length ).toBe( 2 );
-			expect( icons[ 0 ] ).toHaveClass( 'dashicons-format-image' );
-			expect( icons[ 1 ] ).toHaveClass( 'dashicons-format-video' );
+			expect( beforeIcon ).toBeInTheDocument();
+			expect( afterIcon ).toBeInTheDocument();
 		} );
 	} );