feat: update accessibility in button component

.nvmrc

@@ -0,0 +1 @@
+v16

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: 2023-05-05T12:46:11.864Z\n"
-"PO-Revision-Date: 2023-05-05T12:46:11.864Z\n"
+"POT-Creation-Date: 2024-02-12T14:58:56.792Z\n"
+"PO-Revision-Date: 2024-02-12T14:58:56.792Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

components/button/src/button/__tests__/Button.test.js

@@ -22,6 +22,20 @@ describe('<Button>', () => {
         expect(actual.length).toBe(1)
     })
 
+    it('has the accessibility attributes', () => {
+        const dataTest = 'button-data-test'
+        const wrapper = mount(
+            <Button
+                dataTest={dataTest}
+                ariaLabel="test aria label"
+                title="title for button"
+            />
+        )
+        const buttonElement = wrapper.find('button').getDOMNode()
+        expect(buttonElement).toHaveAttribute('title', 'title for button')
+        expect(buttonElement).toHaveAttribute('ariaLabel', 'test aria label')
+    })
+
     describe('toggle', () => {
         it('should have class "toggled" if toggled-prop is true', () => {
             const wrapper = mount(<Button toggled />)

components/button/src/button/button.js

@@ -27,6 +27,7 @@
     onFocus,
     onKeyDown,
     loading,
+    ...otherProps
 }) => {
     const ref = useRef()
 
@@ -34,7 +35,7 @@
         if (initialFocus && ref.current) {
             ref.current.focus()
         }
     }, [initialFocus, ref.current])
 
     const handleClick = (event) => onClick && onClick({ value, name }, event)
     const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
@@ -67,6 +68,7 @@
             onClick={handleClick}
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
+            {...otherProps}
         >
             {loading && (
                 <span className="loader">
@@ -149,6 +151,7 @@
      * Called with args `({ value, name }, event)`
      * */
     onClick: PropTypes.func,
+
     /** Callback to trigger on focus. Called with same args as `onClick` */
     onFocus: PropTypes.func,
     /** Callback to trigger on key-down. Called with same args as `onClick` */

components/button/src/button/button.stories.js

@@ -30,6 +30,8 @@ export default {
         children: 'Label me!',
         value: 'default',
         onClick: logger,
+        title: 'Button',
+        ariaLabel: 'Button',
     },
     argTypes: {
         primary: { ...buttonVariantArgType },
@@ -219,6 +221,8 @@ IconOnly.args = {
     icon: DemoIcon24,
     name: 'Icon only button',
     children: null,
+    title: 'Icon Button',
+    ariaLabel: 'Icon Button',
 }
 
 export const IconSmall = Template.bind({})

components/button/types/index.d.ts

@@ -16,7 +16,7 @@ type ButtonOpenEventHandler<
     Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
 > = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
 
-export interface ButtonProps {
+export interface ButtonProps extends HTMLButtonElement {
     /**
      * Component to render inside the button
      */