feat(Chip): accessibility improvements

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

@@ -0,0 +1,80 @@
+import { theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
+
+const ChipGroup = ({ className, dataTest, children }) => {
+    const chipContainer = useRef(null)
+
+    const handleKeyDown = (event) => {
+        const currentFocus = document.activeElement
+
+        if (chipContainer.current && chipContainer.current === currentFocus) {
+            const chips = Array.from(
+                chipContainer.current.querySelectorAll('[role="option"]')
+            )
+            if (chips.length > 0) {
+                chips[0].focus()
+            }
+            return
+        }
+
+        const role = currentFocus.getAttribute('role')
+
+        if (role !== 'option') {
+            return
+        }
+
+        const chips = Array.from(
+            chipContainer.current.querySelectorAll('[role="option"]')
+        )
+
+        const currentIndex = chips.indexOf(currentFocus)
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % chips.length
+            chips[nextIndex].focus()
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex = (currentIndex - 1 + chips.length) % chips.length
+            chips[prevIndex].focus()
+        }
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            const nextIndex = (currentIndex + 1) % chips.length
+            chips[nextIndex].focus()
+        }
+    }
+    return (
+        <div
+            className={className}
+            data-test={dataTest}
+            onKeyDown={handleKeyDown}
+            ref={chipContainer}
+            tabIndex={0}
+        >
+            {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'

components/chip/src/chip/chip.js

@@ -0,0 +1,166 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Content } from './content.js'
+import { Icon } from './icon.js'
+import { Remove } from './remove.js'
+
+const DEFAULT_INLINE_MARGIN = '4'
+
+const Chip = ({
+    selected,
+    dense,
+    disabled,
+    dragging,
+    overflow,
+    className,
+    children,
+    onRemove,
+    onClick,
+    icon,
+    dataTest,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginInlineStart,
+    marginInlineEnd,
+}) => {
+    const handleKeyDown = (event) => {
+        if (!onRemove) {
+            return
+        }
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            onRemove({}, event)
+        }
+    }
+
+    return (
+        <button
+            onClick={(e) => {
+                if (!disabled && onClick) {
+                    onClick({}, e)
+                }
+            }}
+            onKeyDown={handleKeyDown}
+            className={cx(className, {
+                selected,
+                dense,
+                disabled,
+                dragging,
+            })}
+            data-test={dataTest}
+            tabIndex={-1}
+            role="option"
+            aria-selected={selected ? 'true' : 'false'}
+            aria-disabled={disabled ? 'true' : 'false'}
+        >
+            <Icon icon={icon} dataTest={`${dataTest}-icon`} />
+            <Content overflow={overflow}>{children}</Content>
+            <Remove onRemove={onRemove} dataTest={`${dataTest}-remove`} />
+
+            <style jsx>{`
+                button {
+                    display: inline-flex;
+                    align-items: center;
+                    height: 32px;
+                    border-radius: 16px;
+                    background-color: ${colors.grey200};
+                    font-size: 14px;
+                    line-height: 16px;
+                    cursor: pointer;
+                    user-select: none;
+                    color: ${colors.grey900};
+                    padding: 0;
+                }
+
+                .dense {
+                    height: 24px;
+                    font-size: 13px;
+                    line-height: 15px;
+                }
+
+                button:hover {
+                    background-color: ${colors.grey300};
+                }
+
+                .selected {
+                    background-color: ${theme.secondary600};
+                    font-weight: 500;
+                }
+
+                .selected:hover {
+                    background-color: #00695c;
+                }
+
+                .selected,
+                .selected .icon,
+                .selected .remove-icon {
+                    color: ${colors.white};
+                }
+
+                .disabled {
+                    cursor: not-allowed;
+                    opacity: 0.3;
+                }
+
+                .disabled .remove-icon {
+                    pointer-events: none;
+                }
+
+                .dragging {
+                    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                        0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                        0 1px 5px 0 rgba(0, 0, 0, 0.12);
+                }
+            `}</style>
+            <style jsx>{`
+                button {
+                    ${marginBottom && `margin-bottom: ${marginBottom}px;`}
+                    margin-inline-start: ${marginInlineStart ??
+                    marginLeft ??
+                    DEFAULT_INLINE_MARGIN}px;
+                    margin-inline-end: ${marginInlineEnd ??
+                    marginRight ??
+                    DEFAULT_INLINE_MARGIN}px;
+                    ${marginTop && `margin-top: ${marginTop}px`}
+                }
+            `}</style>
+        </button>
+    )
+}
+
+Chip.defaultProps = {
+    dataTest: 'dhis2-uicore-chip',
+    marginBottom: 4,
+    marginTop: 4,
+}
+
+Chip.propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    disabled: PropTypes.bool,
+    dragging: PropTypes.bool,
+    icon: PropTypes.element,
+    /** `margin-bottom` value, applied in `px`  */
+    marginBottom: PropTypes.number,
+    /** `margin-inline-end` value, applied in `px`  */
+    marginInlineEnd: PropTypes.number,
+    /** `margin-inline-start` value, applied in `px`  */
+    marginInlineStart: PropTypes.number,
+    /** `margin-inline-start` value, applied in `px`  */
+    marginLeft: PropTypes.number,
+    /** `margin-inline-end` value, applied in `px`  */
+    marginRight: PropTypes.number,
+    /** `margin-top` value, applied in `px`  */
+    marginTop: PropTypes.number,
+    overflow: PropTypes.bool,
+    selected: PropTypes.bool,
+    onClick: PropTypes.func,
+    onRemove: PropTypes.func,
+}
+
+export { Chip }