Update tests to reflect that options are keyboard focusable while dis…

…abled
WordPress · Jul 15, 2024 · 98d566f · 98d566f
1 parent 0a807ed
commit 98d566f
Showing 1 changed file with 43 additions and 39 deletions.
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
@@ -359,7 +359,7 @@ describe.each( [
 				expect( expectedFocusTarget ).toHaveFocus();
 			} );
 
-			it( 'should ignore disabled radio options', async () => {
+			it( 'should keep disabled radio options focusable but not selectable', async () => {
 				const mockOnChange = jest.fn();
 
 				render(
@@ -375,35 +375,37 @@ describe.each( [
 				await sleep();
 				await press.Tab();
 
-				expect(
-					screen.getByRole( 'radio', { name: 'Pizza' } )
-				).toBeChecked();
-				expect(
-					screen.getByRole( 'radio', { name: 'Rice' } )
-				).toBeDisabled();
+				const pizzaOption = screen.getByRole( 'radio', {
+					name: 'Pizza',
+				} );
+				expect( pizzaOption ).toHaveFocus();
+				expect( pizzaOption ).toBeChecked();
 
-				// Arrow navigation skips the disabled option
+				// Arrow navigation focuses the disabled option
 				await press.ArrowRight();
-				expect(
-					screen.getByRole( 'radio', { name: 'Pasta' } )
-				).toBeChecked();
+				const riceOption = screen.getByRole( 'radio', {
+					name: 'Rice',
+				} );
+				expect( riceOption ).toHaveFocus();
+				expect( riceOption ).toHaveAttribute( 'aria-disabled', 'true' );
+				expect( riceOption ).not.toBeChecked();
+				expect( mockOnChange ).not.toHaveBeenCalled();
+
+				// Arrow navigation focuses the next enabled option
+				await press.ArrowRight();
+				const pastaOption = screen.getByRole( 'radio', {
+					name: 'Pasta',
+				} );
+				expect( pastaOption ).toHaveFocus();
+				expect( pastaOption ).toBeChecked();
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
 
-				// Arrow navigation skips the disabled option
-				await press.ArrowLeft();
-				expect(
-					screen.getByRole( 'radio', { name: 'Pizza' } )
-				).toBeChecked();
-				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
-				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pizza' );
-
-				// Clicks don't cause the option to be selected
-				await click( screen.getByRole( 'radio', { name: 'Rice' } ) );
-				expect(
-					screen.getByRole( 'radio', { name: 'Pizza' } )
-				).toBeChecked();
-				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+				// Clicks don't cause the option to be selected nor to be focused.
+				await click( riceOption );
+				expect( pastaOption ).toHaveFocus();
+				expect( pastaOption ).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 			} );
 		} );
 
@@ -476,7 +478,7 @@ describe.each( [
 				).toHaveFocus();
 			} );
 
-			it( 'should ignore disabled options', async () => {
+			it( 'should keep disabled button options focusable but not selectable', async () => {
 				const mockOnChange = jest.fn();
 
 				render(
@@ -498,15 +500,20 @@ describe.each( [
 						name: 'Pizza',
 						pressed: true,
 					} )
-				).toBeVisible();
+				).toHaveFocus();
+
+				// Tab key navigation focuses the disabled option
+				await press.Tab();
+				await press.Space();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'Rice',
 						pressed: false,
 					} )
-				).toBeDisabled();
+				).toHaveFocus();
+				expect( mockOnChange ).not.toHaveBeenCalled();
 
-				// Tab key navigation skips the disabled option
+				// Tab key navigation focuses the next enabled option
 				await press.Tab();
 				await press.Space();
 				expect(
@@ -518,21 +525,18 @@ describe.each( [
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
 
-				// Tab key navigation skips the disabled option
-				await press.ShiftTab();
-				expect(
-					screen.getByRole( 'button', {
-						name: 'Pizza',
-						pressed: false,
-					} )
-				).toHaveFocus();
-
-				// Clicks don't cause the option to be selected.
+				// Clicks don't cause the option to be selected nor to be focused.
 				await click(
 					screen.getByRole( 'button', {
 						name: 'Rice',
 					} )
 				);
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pasta',
+						pressed: true,
+					} )
+				).toHaveFocus();
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 			} );
 		} );