refactor: change aria-label to use hyphen after code review

Co-authored-by: Diana Nanyanzi <[email protected]>
dhis2 · Mar 18, 2024 · d523821 · d523821
1 parent a127b43
commit d523821
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>