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'