feat: add aria attributes to loaders

- Add aria-valuenow attribute to linear loader
- Add aria-label attribute to both linear and circular loaders
- Add unit tests for loaders

components/loader/src/circular-loader/__tests__/circular-loader.test.js

@@ -0,0 +1,26 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import { CircularLoader } from '../circular-loader.js'
+
+describe('Circular Loader', () => {
+    it('renders the circular loader with aria label', () => {
+        const wrapper = mount(
+            <CircularLoader
+                dataTest={'circular-loader-test'}
+                ariaLabel="Circular Loader"
+            />
+        )
+        const actual = wrapper.find({ 'data-test': 'circular-loader-test' })
+        expect(actual.prop('role')).toBe('progressbar')
+        expect(actual.prop('aria-label')).toBe('Circular Loader')
+    })
+
+    it('renders the circular loader without aria label', () => {
+        const wrapper = mount(
+            <CircularLoader dataTest={'circular-loader-test'} />
+        )
+        const actual = wrapper.find({ 'data-test': 'circular-loader-test' })
+        expect(actual.prop('aria-label')).toBe(undefined)
+        expect(actual.prop('role')).toBe('progressbar')
+    })
+})

components/loader/src/circular-loader/circular-loader.js

@@ -10,6 +10,7 @@ const CircularLoader = ({
     invert,
     className,
     dataTest,
+    ariaLabel,
 }) => (
     <div
         role="progressbar"
@@ -20,6 +21,7 @@ const CircularLoader = ({
             invert,
         })}
         data-test={dataTest}
+        aria-label={ariaLabel}
     >
         <style jsx>{`
             div {
@@ -67,6 +69,7 @@ CircularLoader.defaultProps = {
 }
 
 CircularLoader.propTypes = {
+    ariaLabel: PropTypes.string,
     className: PropTypes.string,
     dataTest: PropTypes.string,
     extrasmall: sharedPropTypes.sizePropType,

components/loader/src/circular-loader/circular-loader.stories.js

@@ -31,12 +31,13 @@ export default {
 const Template = (args) => <CircularLoader {...args} />
 
 export const Default = Template.bind({})
+Default.args = { ariaLabel: 'Default Loader' }
 
 export const Small = Template.bind({})
-Small.args = { small: true }
+Small.args = { small: true, ariaLabel: 'Small Loader' }
 
 export const Large = Template.bind({})
-Large.args = { large: true }
+Large.args = { large: true, ariaLabel: 'Large Loader' }
 
 export const ExtraSmall = Template.bind({})
-ExtraSmall.args = { extrasmall: true }
+ExtraSmall.args = { extrasmall: true, ariaLabel: 'ExtraSmall Loader' }

components/loader/src/linear-loader/__tests__/linear-loader.test.js

@@ -0,0 +1,29 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import { LinearLoader } from '../linear-loader.js'
+
+describe('Linear Loader', () => {
+    it('renders the linear loader with provided aria attributes', () => {
+        const wrapper = mount(
+            <LinearLoader
+                dataTest={'linear-loader-test'}
+                ariaLabel="Linear Loader"
+                amount={15}
+            />
+        )
+        const actual = wrapper.find({ 'data-test': 'linear-loader-test' })
+        expect(actual.prop('role')).toBe('progressbar')
+        expect(actual.prop('aria-label')).toBe('Linear Loader')
+        expect(actual.prop('aria-valuenow')).toBe(15)
+    })
+
+    it('renders the linear loader without aria label', () => {
+        const wrapper = mount(
+            <LinearLoader dataTest={'linear-loader-test'} amount={45} />
+        )
+        const actual = wrapper.find({ 'data-test': 'linear-loader-test' })
+        expect(actual.prop('role')).toBe('progressbar')
+        expect(actual.prop('aria-label')).toBe(undefined)
+        expect(actual.prop('aria-valuenow')).toBe(45)
+    })
+})

components/loader/src/linear-loader/linear-loader.js

@@ -38,10 +38,13 @@ const LinearLoader = ({
     invert,
     className,
     dataTest,
+    ariaLabel,
 }) => {
     return (
         <div
             role="progressbar"
+            aria-valuenow={amount}
+            aria-label={ariaLabel}
             className={cx(className, { invert })}
             data-test={dataTest}
         >
@@ -78,6 +81,7 @@ LinearLoader.defaultProps = {
 LinearLoader.propTypes = {
     /** The progression in percent without the '%' sign */
     amount: PropTypes.number.isRequired,
+    ariaLabel: PropTypes.string,
     className: PropTypes.string,
     dataTest: PropTypes.string,
     /** Use inverted color scheme */

components/loader/src/linear-loader/linear-loader.stories.js

@@ -24,11 +24,16 @@ export default {
         componentSubtitle: subtitle,
         docs: { description: { component: description } },
     },
-    argTypes: { margin: { table: { defaultValue: { summary: '12px' } } } },
+    argTypes: {
+        margin: { table: { defaultValue: { summary: '12px' } } },
+    },
 }
 
 export const Determinate = (args) => <LinearLoader {...args} />
-Determinate.args = { amount: 60 }
+Determinate.args = {
+    amount: 60,
+    ariaLabel: 'Determinate Loader',
+}
 
 export const OverlayPage = (args) => (
     <Layer level={layers.blocking} translucent>
@@ -37,7 +42,7 @@ export const OverlayPage = (args) => (
         </Center>
     </Layer>
 )
-OverlayPage.args = { amount: 30 }
+OverlayPage.args = { amount: 30, ariaLabel: 'Loader with Overlay Page' }
 OverlayPage.parameters = { docs: { inlineStories: false } }
 
 export const OverlayComponent = (args) => (
@@ -49,4 +54,7 @@ export const OverlayComponent = (args) => (
         </Cover>
     </div>
 )
-OverlayComponent.args = { amount: 80 }
+OverlayComponent.args = {
+    amount: 80,
+    ariaLabel: 'Loader with Overlay Component',
+}

components/loader/types/index.d.ts

@@ -7,6 +7,7 @@ export interface CircularLoaderProps {
     invert?: boolean
     large?: boolean
     small?: boolean
+    ariaLabel?: string
 }
 
 export const CircularLoader: React.FC<CircularLoaderProps>
@@ -30,6 +31,7 @@ export interface LinearLoaderProps {
      * The width of the entire indicator
      */
     width?: string
+    ariaLabel?: string
 }
 
 export const LinearLoader: React.FC<LinearLoaderProps>