From a127b431401d70f980df96efd6fcdd0fb07b64b9 Mon Sep 17 00:00:00 2001
From: drita <diana@dhis2.org>
Date: Fri, 9 Feb 2024 22:28:32 +0300
Subject: [PATCH 1/2] 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
---
 .../__tests__/circular-loader.test.js         | 26 +++++++++++++++++
 .../src/circular-loader/circular-loader.js    |  3 ++
 .../circular-loader.stories.js                |  7 +++--
 .../__tests__/linear-loader.test.js           | 29 +++++++++++++++++++
 .../loader/src/linear-loader/linear-loader.js |  4 +++
 .../linear-loader/linear-loader.stories.js    | 13 ++++++---
 components/loader/types/index.d.ts            |  2 ++
 7 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 components/loader/src/circular-loader/__tests__/circular-loader.test.js
 create mode 100644 components/loader/src/linear-loader/__tests__/linear-loader.test.js

diff --git a/components/loader/src/circular-loader/__tests__/circular-loader.test.js b/components/loader/src/circular-loader/__tests__/circular-loader.test.js
new file mode 100644
index 0000000000..505809f283
--- /dev/null
+++ b/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')
+    })
+})
diff --git a/components/loader/src/circular-loader/circular-loader.js b/components/loader/src/circular-loader/circular-loader.js
index 2ede281513..aa96366ac5 100644
--- a/components/loader/src/circular-loader/circular-loader.js
+++ b/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,
diff --git a/components/loader/src/circular-loader/circular-loader.stories.js b/components/loader/src/circular-loader/circular-loader.stories.js
index 38d033feb9..dae1fb1c8b 100644
--- a/components/loader/src/circular-loader/circular-loader.stories.js
+++ b/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' }
diff --git a/components/loader/src/linear-loader/__tests__/linear-loader.test.js b/components/loader/src/linear-loader/__tests__/linear-loader.test.js
new file mode 100644
index 0000000000..a9e97d8daf
--- /dev/null
+++ b/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)
+    })
+})
diff --git a/components/loader/src/linear-loader/linear-loader.js b/components/loader/src/linear-loader/linear-loader.js
index e547b81871..48d305e4b1 100644
--- a/components/loader/src/linear-loader/linear-loader.js
+++ b/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 */
diff --git a/components/loader/src/linear-loader/linear-loader.stories.js b/components/loader/src/linear-loader/linear-loader.stories.js
index bbc1df4b02..7659021b53 100644
--- a/components/loader/src/linear-loader/linear-loader.stories.js
+++ b/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,7 +54,7 @@ export const OverlayComponent = (args) => (
         </Cover>
     </div>
 )
-OverlayComponent.args = { amount: 80 }
+OverlayComponent.args = { amount: 80, ariaLabel: 'Loader with Overlay Component', }
 
 export const RTL = (args) => (
     <div dir="rtl">
diff --git a/components/loader/types/index.d.ts b/components/loader/types/index.d.ts
index 3d55ac5552..a7c6690974 100644
--- a/components/loader/types/index.d.ts
+++ b/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>

From d523821c6df657e2bf215aee8c0e213ea5be9596 Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Mon, 18 Mar 2024 15:36:05 +0000
Subject: [PATCH 2/2] refactor: change aria-label to use hyphen after code
 review

Co-authored-by: Diana Nanyanzi <d-rita@users.noreply.github.com>
---
 .../src/circular-loader/__tests__/circular-loader.test.js | 2 +-
 components/loader/src/circular-loader/circular-loader.js  | 4 ++--
 .../loader/src/circular-loader/circular-loader.stories.js | 8 ++++----
 .../src/linear-loader/__tests__/linear-loader.test.js     | 2 +-
 components/loader/src/linear-loader/linear-loader.js      | 4 ++--
 .../loader/src/linear-loader/linear-loader.stories.js     | 6 +++---
 components/loader/types/index.d.ts                        | 4 ++--
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/loader/src/circular-loader/__tests__/circular-loader.test.js b/components/loader/src/circular-loader/__tests__/circular-loader.test.js
index 505809f283..bc34f5f735 100644
--- a/components/loader/src/circular-loader/__tests__/circular-loader.test.js
+++ b/components/loader/src/circular-loader/__tests__/circular-loader.test.js
@@ -7,7 +7,7 @@ describe('Circular Loader', () => {
         const wrapper = mount(
             <CircularLoader
                 dataTest={'circular-loader-test'}
-                ariaLabel="Circular Loader"
+                aria-label="Circular Loader"
             />
         )
         const actual = wrapper.find({ 'data-test': 'circular-loader-test' })
diff --git a/components/loader/src/circular-loader/circular-loader.js b/components/loader/src/circular-loader/circular-loader.js
index aa96366ac5..a512c321ff 100644
--- a/components/loader/src/circular-loader/circular-loader.js
+++ b/components/loader/src/circular-loader/circular-loader.js
@@ -10,7 +10,7 @@ const CircularLoader = ({
     invert,
     className,
     dataTest,
-    ariaLabel,
+    'aria-label': ariaLabel,
 }) => (
     <div
         role="progressbar"
@@ -69,7 +69,7 @@ CircularLoader.defaultProps = {
 }
 
 CircularLoader.propTypes = {
-    ariaLabel: PropTypes.string,
+    'aria-label': PropTypes.string,
     className: PropTypes.string,
     dataTest: PropTypes.string,
     extrasmall: sharedPropTypes.sizePropType,
diff --git a/components/loader/src/circular-loader/circular-loader.stories.js b/components/loader/src/circular-loader/circular-loader.stories.js
index dae1fb1c8b..a52f9f902b 100644
--- a/components/loader/src/circular-loader/circular-loader.stories.js
+++ b/components/loader/src/circular-loader/circular-loader.stories.js
@@ -31,13 +31,13 @@ export default {
 const Template = (args) => <CircularLoader {...args} />
 
 export const Default = Template.bind({})
-Default.args = { ariaLabel: 'Default Loader' }
+Default.args = { 'aria-label': 'Default Loader' }
 
 export const Small = Template.bind({})
-Small.args = { small: true, ariaLabel: 'Small Loader' }
+Small.args = { small: true, 'aria-label': 'Small Loader' }
 
 export const Large = Template.bind({})
-Large.args = { large: true, ariaLabel: 'Large Loader' }
+Large.args = { large: true, 'aria-label': 'Large Loader' }
 
 export const ExtraSmall = Template.bind({})
-ExtraSmall.args = { extrasmall: true, ariaLabel: 'ExtraSmall Loader' }
+ExtraSmall.args = { extrasmall: true, 'aria-label': 'ExtraSmall Loader' }
diff --git a/components/loader/src/linear-loader/__tests__/linear-loader.test.js b/components/loader/src/linear-loader/__tests__/linear-loader.test.js
index a9e97d8daf..4f8481296b 100644
--- a/components/loader/src/linear-loader/__tests__/linear-loader.test.js
+++ b/components/loader/src/linear-loader/__tests__/linear-loader.test.js
@@ -7,7 +7,7 @@ describe('Linear Loader', () => {
         const wrapper = mount(
             <LinearLoader
                 dataTest={'linear-loader-test'}
-                ariaLabel="Linear Loader"
+                aria-label="Linear Loader"
                 amount={15}
             />
         )
diff --git a/components/loader/src/linear-loader/linear-loader.js b/components/loader/src/linear-loader/linear-loader.js
index 48d305e4b1..460eaea02a 100644
--- a/components/loader/src/linear-loader/linear-loader.js
+++ b/components/loader/src/linear-loader/linear-loader.js
@@ -38,7 +38,7 @@ const LinearLoader = ({
     invert,
     className,
     dataTest,
-    ariaLabel,
+    'aria-label': ariaLabel,
 }) => {
     return (
         <div
@@ -81,7 +81,7 @@ LinearLoader.defaultProps = {
 LinearLoader.propTypes = {
     /** The progression in percent without the '%' sign */
     amount: PropTypes.number.isRequired,
-    ariaLabel: PropTypes.string,
+    'aria-label': PropTypes.string,
     className: PropTypes.string,
     dataTest: PropTypes.string,
     /** Use inverted color scheme */
diff --git a/components/loader/src/linear-loader/linear-loader.stories.js b/components/loader/src/linear-loader/linear-loader.stories.js
index 7659021b53..7febff22dc 100644
--- a/components/loader/src/linear-loader/linear-loader.stories.js
+++ b/components/loader/src/linear-loader/linear-loader.stories.js
@@ -32,7 +32,7 @@ export default {
 export const Determinate = (args) => <LinearLoader {...args} />
 Determinate.args = {
     amount: 60,
-    ariaLabel: 'Determinate Loader',
+    'aria-label': 'Determinate Loader',
 }
 
 export const OverlayPage = (args) => (
@@ -42,7 +42,7 @@ export const OverlayPage = (args) => (
         </Center>
     </Layer>
 )
-OverlayPage.args = { amount: 30, ariaLabel: 'Loader with Overlay Page' }
+OverlayPage.args = { amount: 30, 'aria-label': 'Loader with Overlay Page' }
 OverlayPage.parameters = { docs: { inlineStories: false } }
 
 export const OverlayComponent = (args) => (
@@ -54,7 +54,7 @@ export const OverlayComponent = (args) => (
         </Cover>
     </div>
 )
-OverlayComponent.args = { amount: 80, ariaLabel: 'Loader with Overlay Component', }
+OverlayComponent.args = { amount: 80, 'aria-label': 'Loader with Overlay Component', }
 
 export const RTL = (args) => (
     <div dir="rtl">
diff --git a/components/loader/types/index.d.ts b/components/loader/types/index.d.ts
index a7c6690974..61d1ac0bfb 100644
--- a/components/loader/types/index.d.ts
+++ b/components/loader/types/index.d.ts
@@ -7,7 +7,7 @@ export interface CircularLoaderProps {
     invert?: boolean
     large?: boolean
     small?: boolean
-    ariaLabel?: string
+    'aria-label'?: string
 }
 
 export const CircularLoader: React.FC<CircularLoaderProps>
@@ -31,7 +31,7 @@ export interface LinearLoaderProps {
      * The width of the entire indicator
      */
     width?: string
-    ariaLabel?: string
+    'aria-label'?: string
 }
 
 export const LinearLoader: React.FC<LinearLoaderProps>