feat(select a11y): allow to specify custom option generally

dhis2 · Oct 28, 2024 · ca63773 · ca63773
1 parent f9238ca
commit ca63773
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/components/select/src/single-select-a11y/menu/menu-options-list.js b/components/select/src/single-select-a11y/menu/menu-options-list.js
@@ -7,6 +7,7 @@ import { Option } from './option.js'
 export const MenuOptionsList = forwardRef(function MenuOptionsList(
     {
         comboBoxId,
+        customOption,
         expanded,
         focussedOptionIndex,
         idPrefix,
@@ -76,7 +77,7 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList(
                             comboBoxId={comboBoxId}
                             disabled={disabled || optionDisabled}
                             onClick={isSelected ? () => null : onChange}
-                            component={component}
+                            component={component || customOption}
                         />
                     )
                 }
@@ -92,6 +93,7 @@ MenuOptionsList.propTypes = {
     idPrefix: PropTypes.string.isRequired,
     options: PropTypes.arrayOf(optionProp).isRequired,
     onChange: PropTypes.func.isRequired,
+    customOption: PropTypes.elementType,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
     labelledBy: PropTypes.string,

diff --git a/components/select/src/single-select-a11y/menu/menu.js b/components/select/src/single-select-a11y/menu/menu.js
@@ -15,6 +15,7 @@ export function Menu({
     idPrefix,
     options,
     onChange,
+    customOption,
     dataTest,
     disabled,
     empty,
@@ -68,6 +69,7 @@ export function Menu({
             <MenuOptionsList
                 ref={listBoxRef}
                 comboBoxId={comboBoxId}
+                customOption={customOption}
                 dataTest={`${dataTestPrefix}-list`}
                 disabled={disabled}
                 expanded={!hidden}
@@ -133,6 +135,7 @@ Menu.propTypes = {
     }).isRequired,
     options: PropTypes.arrayOf(optionProp).isRequired,
     onChange: PropTypes.func.isRequired,
+    customOption: PropTypes.elementType,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
     empty: PropTypes.node,

diff --git a/components/select/src/single-select-a11y/single-select-a11y.js b/components/select/src/single-select-a11y/single-select-a11y.js
@@ -17,6 +17,7 @@ export function SingleSelectA11y({
     className = '',
     clearText = '',
     clearable = false,
+    customOption,
     dataTest = 'dhis2-singleselecta11y',
     dense = false,
     disabled = false,
@@ -157,6 +158,7 @@ export function SingleSelectA11y({
 
             <Menu
                 comboBoxId={comboBoxId}
+                customOption={customOption}
                 disabled={disabled}
                 empty={empty}
                 filterLabel={filterLabel}
@@ -211,6 +213,10 @@ SingleSelectA11y.propTypes = {
     /** Whether a clear button should be displayed or not */
     clearable: PropTypes.bool,
 
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis */
+    customOption: PropTypes.elementType,
+
     /** A value for a `data-test` attribute on the root element */
     dataTest: PropTypes.string,
 

diff --git a/components/select/src/single-select-a11y/single-select-a11y.test.js b/components/select/src/single-select-a11y/single-select-a11y.test.js
@@ -201,6 +201,40 @@ describe('<SingleSelectA11y />', () => {
             <span data-test={`custom-option-${value}`}>{label}</span>
         )
 
+        render(
+            <SingleSelectA11y
+                idPrefix="a11y"
+                value=""
+                customOption={CustomOption}
+                valueLabel=""
+                onChange={onChange}
+                options={[
+                    { value: '', label: 'None' },
+                    { value: 'foo', label: 'Foo' },
+                ]}
+            />
+        )
+
+        fireEvent.click(screen.getByRole('combobox'))
+
+        const customOption = screen.getByTestId('custom-option-foo')
+        const option = screen.getByTestId('custom-option-foo').parentNode
+        expect(option.attributes.getNamedItem('role').value).toBe('option')
+
+        fireEvent.click(customOption)
+
+        expect(onChange).toHaveBeenCalledTimes(1)
+        expect(onChange).toHaveBeenCalledWith('foo')
+    })
+
+    it('should allow individual custom options to be selected', () => {
+        const onChange = jest.fn()
+
+        // eslint-disable-next-line react/prop-types
+        const CustomOption = ({ value, label }) => (
+            <span data-test={`custom-option-${value}`}>{label}</span>
+        )
+
         render(
             <SingleSelectA11y
                 idPrefix="a11y"