feat(Chip): accessibility improvements

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-07-17T14:10:05.852Z\n"
-"PO-Revision-Date: 2024-07-17T14:10:05.853Z\n"
+"POT-Creation-Date: 2024-09-02T18:17:51.871Z\n"
+"PO-Revision-Date: 2024-09-02T18:17:51.873Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

components/chip/API.md

@@ -1,3 +1,21 @@
+### ChipGroup
+
+#### Usage
+
+**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+
+```js
+import { ChipGroup } from '@dhis2-ui/chip'
+```
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|children|node|||The Chip components to be rendered within the group|
+|className|string|||Additional CSS class for the chip group|
+|dataTest|string|`'dhis2-uicore-chipgroup'`||Data test id for testing purposes|
+
 ### Chip
 
 #### Usage

components/chip/src/chip-group/chip-group.js

@@ -0,0 +1,106 @@
+import { theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useRef, useEffect, useState } from 'react'
+
+const ChipGroup = ({ className, dataTest, children }) => {
+    const chipContainer = useRef(null)
+    const [childrenToFocus, setChildrenToFocus] = useState([])
+
+    useEffect(() => {
+        if (chipContainer.current) {
+            const chips =
+                chipContainer.current.querySelectorAll('[role="option"]')
+            if (chips.length > 0) {
+                const childrenToFocus = Array.from(chips)
+                setChildrenToFocus(childrenToFocus)
+            }
+        }
+    }, [children])
+
+    const handleKeyDown = (event) => {
+        if (!childrenToFocus.length) {
+            return
+        }
+
+        const currentFocus = document.activeElement
+
+        const currentIndex = childrenToFocus.findIndex(
+            (element) => element === currentFocus
+        )
+
+        if (currentIndex === -1) {
+            return
+        }
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % childrenToFocus.length
+            childrenToFocus[nextIndex].focus()
+        }
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex =
+                (currentIndex - 1 + childrenToFocus.length) %
+                childrenToFocus.length
+            childrenToFocus[prevIndex].focus()
+        }
+
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            event.preventDefault()
+            event.stopPropagation()
+            const nextIndex = (currentIndex + 1) % childrenToFocus.length
+            childrenToFocus[nextIndex].focus()
+        }
+    }
+
+    const handleFocus = (event) => {
+        if (!childrenToFocus.length) {
+            return
+        }
+        if (event.target === chipContainer.current) {
+            const selectedChild = childrenToFocus.find(
+                (child) => child.getAttribute('aria-selected') === 'true'
+            )
+            if (!selectedChild && childrenToFocus[0]) {
+                childrenToFocus[0].focus()
+            }
+            selectedChild.focus()
+        }
+    }
+
+    return (
+        <div
+            className={className}
+            data-test={dataTest}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            ref={chipContainer}
+            tabIndex={0}
+            role="listbox"
+        >
+            {children}
+            <style jsx>{`
+                div {
+                    display: flex;
+                    gap: 4px;
+                }
+                div:focus {
+                    outline: 1px solid ${theme.focus};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+ChipGroup.defaultProps = {
+    dataTest: 'dhis2-uicore-chipgroup',
+}
+
+ChipGroup.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}
+
+export { ChipGroup }

components/chip/src/chip-group/index.js

@@ -0,0 +1 @@
+export { ChipGroup } from './chip-group.js'