From 3bfd8af978dec5f0e85a1ca563e7f9800059f7f4 Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Thu, 15 Feb 2024 11:11:06 +0100
Subject: [PATCH 1/6] feat: add warnings to the button component for
 accessibility

---
 collections/forms/i18n/en.pot                 |  4 +-
 .../src/button/__tests__/Button.test.js       | 46 +++++++++++++++++++
 components/button/src/button/button.js        |  7 +++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
index e65ed246e0..581c2d0a90 100644
--- a/collections/forms/i18n/en.pot
+++ b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-02-12T14:58:56.792Z\n"
-"PO-Revision-Date: 2024-02-12T14:58:56.792Z\n"
+"POT-Creation-Date: 2024-02-15T10:07:40.463Z\n"
+"PO-Revision-Date: 2024-02-15T10:07:40.463Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"
diff --git a/components/button/src/button/__tests__/Button.test.js b/components/button/src/button/__tests__/Button.test.js
index 9126fb798f..edd9b01d20 100644
--- a/components/button/src/button/__tests__/Button.test.js
+++ b/components/button/src/button/__tests__/Button.test.js
@@ -4,6 +4,52 @@ import React from 'react'
 import { Button } from '../button.js'
 
 describe('<Button>', () => {
+    let consoleSpy
+
+    beforeEach(() => {
+        consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
+    })
+
+    afterEach(() => {
+        consoleSpy.mockRestore()
+    })
+
+    describe('warning for missing aria-label or title', () => {
+        it('No warning  if children exist but aria-label or title is missing', () => {
+            render(<Button>Children content</Button>)
+
+            expect(consoleSpy).not.toHaveBeenCalled()
+        })
+
+        it('does not warn if aria-label or title is present', () => {
+            render(
+                <Button ariaLabel="Test" title="Test">
+                    Children content
+                </Button>
+            )
+
+            expect(consoleSpy).not.toHaveBeenCalled()
+        })
+
+        it('warns if no children are present with no arial-label and title', () => {
+            render(<Button>{/* No children */}</Button>)
+
+            expect(consoleSpy).toHaveBeenCalledWith(
+                'Button component has no children but is missing title or ariaLabel attribute.'
+            )
+        })
+
+        it('No warning if there are no children but arial label and title', () => {
+            render(
+                <Button ariaLabel="Test" title="Test">
+                    {/* No children */}
+                </Button>
+            )
+
+            expect(consoleSpy).not.toHaveBeenCalled()
+        })
+    })
+
     it('renders a default data-test attribute', () => {
         const dataTest = 'dhis2-uicore-button'
         const wrapper = mount(<Button dataTest={dataTest} />)
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index c357c36374..d84a6ac091 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -37,6 +37,13 @@ export const Button = ({
         }
     }, [initialFocus, ref.current])
 
+    const { 'aria-label': ariaLabel, title } = otherProps
+    if (!children && !title && !ariaLabel) {
+        console.warn(
+            'Button component has no children but is missing title or ariaLabel attribute.'
+        )
+    }
+
     const handleClick = (event) => onClick && onClick({ value, name }, event)
     const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
     const handleFocus = (event) => onFocus && onFocus({ value, name }, event)

From 0413888877a67c5fdca20441ab43a724ecae1fa2 Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Thu, 15 Feb 2024 16:08:09 +0100
Subject: [PATCH 2/6] feat: add warnings to the button component for
 accessibility

---
 collections/forms/i18n/en.pot                         | 4 ++--
 components/button/src/button/__tests__/Button.test.js | 2 +-
 components/button/src/button/button.js                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
index 581c2d0a90..e7d023e35d 100644
--- a/collections/forms/i18n/en.pot
+++ b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-02-15T10:07:40.463Z\n"
-"PO-Revision-Date: 2024-02-15T10:07:40.463Z\n"
+"POT-Creation-Date: 2024-02-15T15:06:08.983Z\n"
+"PO-Revision-Date: 2024-02-15T15:06:08.983Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"
diff --git a/components/button/src/button/__tests__/Button.test.js b/components/button/src/button/__tests__/Button.test.js
index edd9b01d20..c12478cfb1 100644
--- a/components/button/src/button/__tests__/Button.test.js
+++ b/components/button/src/button/__tests__/Button.test.js
@@ -7,7 +7,7 @@ describe('<Button>', () => {
     let consoleSpy
 
     beforeEach(() => {
-        consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
+        consoleSpy = jest.spyOn(console, 'debug').mockImplementation()
     })
 
     afterEach(() => {
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index d84a6ac091..b914199599 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -39,7 +39,7 @@ export const Button = ({
 
     const { 'aria-label': ariaLabel, title } = otherProps
     if (!children && !title && !ariaLabel) {
-        console.warn(
+        console.debug(
             'Button component has no children but is missing title or ariaLabel attribute.'
         )
     }

From 775da9cd23be677bc80607bb28b4de4f9159f9e0 Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Fri, 16 Feb 2024 14:00:42 +0100
Subject: [PATCH 3/6] feat: update warning in button component

---
 components/button/src/button/__tests__/Button.test.js | 1 +
 components/button/src/button/button.js                | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/button/src/button/__tests__/Button.test.js b/components/button/src/button/__tests__/Button.test.js
index c12478cfb1..cb02834d25 100644
--- a/components/button/src/button/__tests__/Button.test.js
+++ b/components/button/src/button/__tests__/Button.test.js
@@ -4,6 +4,7 @@ import React from 'react'
 import { Button } from '../button.js'
 
 describe('<Button>', () => {
+    
     let consoleSpy
 
     beforeEach(() => {
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index b914199599..3b5ad01466 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -38,6 +38,7 @@ export const Button = ({
     }, [initialFocus, ref.current])
 
     const { 'aria-label': ariaLabel, title } = otherProps
+    
     if (!children && !title && !ariaLabel) {
         console.debug(
             'Button component has no children but is missing title or ariaLabel attribute.'

From 0af2e94c66358e0e857bc87f33ae35192bc394a7 Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Fri, 16 Feb 2024 14:01:08 +0100
Subject: [PATCH 4/6] feat: update warning in button component

---
 components/button/src/button/__tests__/Button.test.js | 1 -
 components/button/src/button/button.js                | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/button/src/button/__tests__/Button.test.js b/components/button/src/button/__tests__/Button.test.js
index cb02834d25..c12478cfb1 100644
--- a/components/button/src/button/__tests__/Button.test.js
+++ b/components/button/src/button/__tests__/Button.test.js
@@ -4,7 +4,6 @@ import React from 'react'
 import { Button } from '../button.js'
 
 describe('<Button>', () => {
-    
     let consoleSpy
 
     beforeEach(() => {
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index 3b5ad01466..89095a5c44 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -38,7 +38,7 @@ export const Button = ({
     }, [initialFocus, ref.current])
 
     const { 'aria-label': ariaLabel, title } = otherProps
-    
+
     if (!children && !title && !ariaLabel) {
         console.debug(
             'Button component has no children but is missing title or ariaLabel attribute.'

From 467077b850e733bf9d5b99d1aa2e471a9443f12d Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Wed, 21 Feb 2024 11:07:42 +0100
Subject: [PATCH 5/6] feat: update warning in button component

---
 components/button/src/button/__tests__/Button.test.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/button/src/button/__tests__/Button.test.js b/components/button/src/button/__tests__/Button.test.js
index c12478cfb1..79cb840137 100644
--- a/components/button/src/button/__tests__/Button.test.js
+++ b/components/button/src/button/__tests__/Button.test.js
@@ -14,16 +14,16 @@ describe('<Button>', () => {
         consoleSpy.mockRestore()
     })
 
-    describe('warning for missing aria-label or title', () => {
-        it('No warning  if children exist but aria-label or title is missing', () => {
+    describe('warning for missing aria-label and title', () => {
+        it('No warning  if children exist but aria-label and title is missing', () => {
             render(<Button>Children content</Button>)
 
             expect(consoleSpy).not.toHaveBeenCalled()
         })
 
-        it('does not warn if aria-label or title is present', () => {
+        it('does not warn if aria-label and title is present', () => {
             render(
-                <Button ariaLabel="Test" title="Test">
+                <Button aria-label="Test" title="Test">
                     Children content
                 </Button>
             )
@@ -41,7 +41,7 @@ describe('<Button>', () => {
 
         it('No warning if there are no children but arial label and title', () => {
             render(
-                <Button ariaLabel="Test" title="Test">
+                <Button aria-label="Test" title="Test">
                     {/* No children */}
                 </Button>
             )

From c8abea908de2ddc03b8c8e37eef017a51f621b90 Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Wed, 21 Feb 2024 12:06:34 +0100
Subject: [PATCH 6/6] feat: update warning in button component

---
 components/button/src/button/__tests__/Button.test.js | 2 +-
 components/button/src/button/button.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/button/src/button/__tests__/Button.test.js b/components/button/src/button/__tests__/Button.test.js
index 79cb840137..b36146c492 100644
--- a/components/button/src/button/__tests__/Button.test.js
+++ b/components/button/src/button/__tests__/Button.test.js
@@ -35,7 +35,7 @@ describe('<Button>', () => {
             render(<Button>{/* No children */}</Button>)
 
             expect(consoleSpy).toHaveBeenCalledWith(
-                'Button component has no children but is missing title or ariaLabel attribute.'
+                'Button component has no children but is missing title and ariaLabel attribute.'
             )
         })
 
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index 89095a5c44..7f27d98223 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -41,7 +41,7 @@ export const Button = ({
 
     if (!children && !title && !ariaLabel) {
         console.debug(
-            'Button component has no children but is missing title or ariaLabel attribute.'
+            'Button component has no children but is missing title and ariaLabel attribute.'
         )
     }