Use native HTML5 progress element

package.json

@@ -26,6 +26,7 @@
 	"dependencies": {
 		"@wordpress/block-editor": "^8.0.0",
 		"@wordpress/blocks": "^11.1.0",
+		"autoprefixer": "10.4.2",
 		"classnames": "^2.3.1",
 		"eslint": "^7.32.0",
 		"lodash.kebabcase": "^4.1.1",

src/components/progress-bar/__test__/index.test.js

@@ -7,39 +7,53 @@ import '@testing-library/jest-dom';
 /**
  * Internal dependencies
  */
-import ProgressBar from './../index';
+import ProgressBar from '../index';
 
-const outer = '.wc-free-shipping-progress-bar__outer';
-const inner = '.wc-free-shipping-progress-bar__inner';
+const progressbar = '.wc-free-shipping-progress-bar__progress';
 
 describe( 'The ProgressBar component', () => {
-	it( 'shows the classnames of the outer div correctly', () => {
-		render( <ProgressBar /> );
-		expect( document.querySelector( outer ) ).toBeInTheDocument();
-	} );
-
-	it( 'shows the classnames of the inner div correctly', () => {
-		render( <ProgressBar /> );
-		expect( document.querySelector( inner ) ).toBeInTheDocument();
+	it( 'shows the classnames of the div correctly', () => {
+		render( <ProgressBar freeShippingFrom="1" currentTotal="0" /> );
+		expect( document.querySelector( progressbar ) ).toBeInTheDocument();
 	} );
 
 	it( 'shows the style for a full bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="4" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 100%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'100'
+		);
 	} );
 
-	it( 'shows the style for a threequarter bar correctly', () => {
+	it( 'shows the style for a three quarter bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="3" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 75%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'75'
+		);
 	} );
 
 	it( 'shows the style for a half bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="2" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 50%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'50'
+		);
+	} );
+
+	it( 'shows the style for a one quarter bar correctly', () => {
+		render( <ProgressBar freeShippingFrom="4" currentTotal="1" /> );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'25'
+		);
 	} );
 
 	it( 'shows the style for an empty bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="0" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 0%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'0'
+		);
 	} );
 } );

src/components/progress-bar/index.js

@@ -21,23 +21,19 @@ const ProgressBar = ( {
 		'backgroundColor'
 	);
 	const progress = ( currentTotal / freeShippingFrom ) * 100;
-	const width = ( progress > 100 ? 100 : progress ) + '%';
-	const innerStyle = { width: width, background: progressColor };
-	const outerStyle = { color: progressColor };
+	const width = progress > 100 ? 100 : progress;
+	const style = { color: progressColor };
 
 	return (
-		<div
+		<progress
 			className={ classnames(
-				'wc-free-shipping-progress-bar__outer',
+				'wc-free-shipping-progress-bar__progress',
 				progressClass
 			) }
-			style={ outerStyle }
-		>
-			<div
-				className="wc-free-shipping-progress-bar__inner"
-				style={ innerStyle }
-			></div>
-		</div>
+			max="100"
+			style={ style }
+			value={ width }
+		/>
 	);
 };