ProgressBar: Add default tabIndex to make focusable

packages/components/CHANGELOG.md

@@ -15,6 +15,7 @@
 -   `ProgressBar`: Use the theme system accent for indicator color ([#53347](https://github.com/WordPress/gutenberg/pull/53347)).
 -   `ProgressBar`: Use gray 300 for track color ([#53349](https://github.com/WordPress/gutenberg/pull/53349)).
 -   `Modal`: add `headerActions` prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
+-   `ProgressBar`: Add default `tabIndex` to make focusable ([#53383](https://github.com/WordPress/gutenberg/pull/53383)).
 
 ### Bug Fix
 

packages/components/src/progress-bar/index.tsx

@@ -34,6 +34,7 @@ function UnforwardedProgressBar(
 				value={ value }
 				aria-label={ __( 'Loading …' ) }
 				ref={ ref }
+				tabIndex={ 0 }
 				{ ...progressProps }
 			/>
 		</ProgressBarStyled.Track>

packages/components/src/progress-bar/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -76,4 +77,16 @@ describe( 'ProgressBar', () => {
 		);
 		expect( screen.getByRole( 'progressbar' ) ).toHaveStyle( style );
 	} );
+
+	it( 'should be able to focus the underlying `progress` element', async () => {
+		const user = userEvent.setup();
+
+		render( <ProgressBar /> );
+
+		expect( screen.getByRole( 'progressbar' ) ).not.toHaveFocus();
+
+		await user.tab();
+
+		expect( screen.getByRole( 'progressbar' ) ).toHaveFocus();
+	} );
 } );