feat: add warnings to the button component for accessibility

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"

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} />)

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)