From f0ddaac7b71184371ca4052609a49837f5580803 Mon Sep 17 00:00:00 2001
From: chisom chima <chimachisom360@gmail.com>
Date: Mon, 3 Jun 2024 17:16:10 +0100
Subject: [PATCH] feat: implement split-button accessibility

---
 components/button/i18n/en.pot                 | 12 +++++
 .../button/src/split-button/split-button.js   | 47 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 components/button/i18n/en.pot

diff --git a/components/button/i18n/en.pot b/components/button/i18n/en.pot
new file mode 100644
index 0000000000..64cc7e89f6
--- /dev/null
+++ b/components/button/i18n/en.pot
@@ -0,0 +1,12 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"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-06-03T15:53:41.329Z\n"
+"PO-Revision-Date: 2024-06-03T15:53:41.329Z\n"
+
+msgid "Toggle dropdown"
+msgstr "Toggle dropdown"
diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
index 95290477be..2751aae44f 100644
--- a/components/button/src/split-button/split-button.js
+++ b/components/button/src/split-button/split-button.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import css from 'styled-jsx/css'
 import { Button } from '../index.js'
+import i18n from '../locales/index.js'
 
 const rightButton = css.resolve`
     button {
@@ -18,8 +19,46 @@ class SplitButton extends Component {
     state = {
         open: false,
     }
+
     anchorRef = React.createRef()
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown)
+    }
+
+    handleKeyDown = (event) => {
+        if (event.key === 'Escape' && this.state.open) {
+            event.stopPropagation()
+            this.setState({ open: false })
+            this.anchorRef.current && this.anchorRef.current.focus()
+        }
+    }
+
+    handleButtonKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            this.onClick(
+                {
+                    name: this.props.name,
+                    value: this.props.value,
+                    open: this.state.open,
+                },
+                event
+            )
+        }
+    }
+
+    handleToggleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            this.onToggle()
+        }
+    }
+
     onClick = (payload, event) => {
         if (this.props.onClick) {
             this.props.onClick(
@@ -33,7 +72,9 @@ class SplitButton extends Component {
         }
     }
 
-    onToggle = () => this.setState({ open: !this.state.open })
+    onToggle = () => {
+        this.setState((prevState) => ({ open: !prevState.open }))
+    }
 
     render() {
         const { open } = this.state
@@ -76,6 +117,7 @@ class SplitButton extends Component {
                     className={cx(className)}
                     initialFocus={initialFocus}
                     dataTest={`${dataTest}-button`}
+                    onKeyDown={this.handleButtonKeyDown}
                 >
                     {children}
                 </Button>
@@ -94,6 +136,9 @@ class SplitButton extends Component {
                     tabIndex={tabIndex}
                     className={cx(className, rightButton.className)}
                     dataTest={`${dataTest}-toggle`}
+                    title={i18n.t('Toggle dropdown')}
+                    aria-label={i18n.t('Toggle dropdown')}
+                    onKeyDown={this.handleToggleKeyDown}
                 >
                     {arrow}
                 </Button>