feat(progress tracker): add accessibility props to component

The role of progressbar has been given to the component to improve the screen reader functionality
of the component. With this comes the ability to also use aria-valuemin, aria-valuenow,
aria-valuemax and aria-valuetext props

fixes #FE-4699

src/components/progress-tracker/progress-tracker.component.js

@@ -16,6 +16,12 @@ const marginPropTypes = filterStyledSystemMarginProps(
 );
 
 const ProgressTracker = ({
+  "aria-label": ariaLabel = "progress tracker",
+  "aria-describedby": ariaDescribedBy,
+  "aria-valuenow": ariaValueNow,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
+  "aria-valuetext": ariaValueText,
   size = "medium",
   progress = 0,
   showDefaultLabels = false,
@@ -76,6 +82,13 @@ const ProgressTracker = ({
       isVertical={isVertical}
       {...rest}
       {...tagComponent("progress-bar", rest)}
+      role="progressbar"
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-valuenow={ariaValueNow}
+      aria-valuemin={ariaValueMin}
+      aria-valuemax={ariaValueMax}
+      aria-valuetext={ariaValueText}
     >
       {prefixLabels && renderValueLabels()}
       <StyledProgressBar
@@ -97,6 +110,20 @@ const ProgressTracker = ({
 
 ProgressTracker.propTypes = {
   ...marginPropTypes,
+  /** Specifies an aria label to the component */
+  "aria-label": PropTypes.string,
+  /** Specifies the aria describedby for the component */
+  "aria-describedby": PropTypes.string,
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow": PropTypes.number,
+  /** The minimum value of the progress tracker */
+  "aria-valuemin": PropTypes.number,
+  /** The maximum value of the progress tracker */
+  "aria-valuemax": PropTypes.number,
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number
+   */
+  "aria-valuetext": PropTypes.string,
   /** Size of the progress bar. */
   size: PropTypes.oneOf(["small", "medium", "large"]),
   /** Current progress (percentage). */

src/components/progress-tracker/progress-tracker.d.ts

@@ -1,6 +1,19 @@
 import { MarginProps } from "styled-system";
 
 export interface ProgressBarProps extends MarginProps {
+  /** Specifies an aria-label to the component */
+  "aria-label"?: string;
+  /** Specifies the aria-describedby for the component */
+  "aria-describedby"?: string;
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow"?: number;
+  /** The minimum value of the progress tracker */
+  "aria-valuemin"?: number;
+  /** The maximum value of the progress tracker */
+  "aria-valueMax"?: number;
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number */
+  "aria-valuetext"?: string;
   /** Size of the progressBar. */
   size?: "small" | "medium" | "large";
   /** Current progress (percentage). */

src/components/progress-tracker/progress-tracker.spec.js

@@ -428,4 +428,37 @@ describe("ProgressBar", () => {
       );
     });
   });
+
+  describe("Accessibility", () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <ProgressBar
+          progress={10}
+          aria-label="FooBar"
+          aria-describedby="Foo"
+          aria-valuemin={0}
+          aria-valuenow={10}
+          aria-valuemax={100}
+          aria-valuetext="Bar"
+        />
+      );
+    });
+
+    it("should allow an aria-label prop to be passed to the component", () => {
+      expect(wrapper.prop("aria-label")).toBe("FooBar");
+    });
+
+    it("should allow an aria-describedby prop to be passed to the component", () => {
+      expect(wrapper.prop("aria-describedby")).toBe("Foo");
+    });
+
+    it.each([
+      ["aria-valuemin", 0],
+      ["aria-valuenow", 10],
+      ["aria-valuemax", 100],
+      ["aria-valuetext", "Bar"],
+    ])("should allow a value to be passed to %s ", (prop, value) => {
+      expect(wrapper.prop(prop)).toBe(value);
+    });
+  });
 });

src/components/progress-tracker/progress-tracker.stories.mdx

@@ -15,6 +15,7 @@ In general, place a `ProgressTracker` in the centre and middle of the page or co
 
 - [Quick Start](#quick-start)
 - [Examples](#examples)
+- [Accessibility](#accessibility)
 - [Props](#props)
 
 ## Quick Start
@@ -147,7 +148,7 @@ This is an example of a `ProgressTracker` component with `currentProgressLabel`
       style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
     >
       <ProgressTracker
-        progress={15}
+        progress={25}
         currentProgressLabel="$50"
         maxProgressLabel="$200"
       />
@@ -402,6 +403,28 @@ It is possible to override the `labelsPosition` to `"left"` when in a `"vertical
   </Story>
 </Canvas>
 
+## Accessibility
+
+This component has `aria-valuemin`, `aria-valuemax`, `aria-valuenow` and `aria-valuetext` props that can be utilised to enhance the experience for a user that requires a screenreader.
+
+For more information on these props, please visit the W3 documentation on `role="progressbar"`. This can be accessed by clicking [here](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
+### Example
+
+<Canvas>
+  <Story name="acessibility example">
+    <div style={{ display: "flex", justifyContent: "space-around" }}>
+      <ProgressTracker 
+        currentProgressLabel="$100"
+        maxProgressLabel="$200" 
+        progress={50} 
+        aria-valuemin={0} 
+        aria-valuenow={50} 
+        aria-valuemax={100} 
+        aria-valuetext="$100"/>
+    </div>
+  </Story>
+</Canvas>
+
 ## Props
 
 ### ProgressTracker