fix(select a11y): handle remaining TODO comments & rename internal co…

…mponents
dhis2 · Nov 28, 2024 · 356bd4f · 356bd4f
1 parent cca9228
commit 356bd4f
Show file tree

Hide file tree

Showing 65 changed files with 619 additions and 811 deletions.
diff --git a/collections/forms/i18n/en.pot b/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-11-19T08:12:09.695Z\n"
-"PO-Revision-Date: 2024-11-19T08:12:09.696Z\n"
+"POT-Creation-Date: 2024-11-28T08:22:51.040Z\n"
+"PO-Revision-Date: 2024-11-28T08:22:51.041Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

diff --git a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js
@@ -28,6 +28,7 @@ export const SingleSelectA11yFieldFF = ({
     return (
         <SingleSelectA11yField
             {...rest}
+            name={input.name}
             error={hasError(meta, error)}
             valid={isValid(meta, valid, showValidStatus)}
             loading={isLoading(meta, loading, showLoadingStatus)}
@@ -41,9 +42,6 @@ export const SingleSelectA11yFieldFF = ({
 }
 
 SingleSelectA11yFieldFF.propTypes = {
-    /** necessary for IDs that are required for accessibility **/
-    idPrefix: PropTypes.string.isRequired,
-
     /** `input` props received from Final Form `Field` */
     input: inputPropType.isRequired,
 
@@ -72,10 +70,6 @@ SingleSelectA11yFieldFF.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,
 
@@ -121,6 +115,10 @@ SingleSelectA11yFieldFF.propTypes = {
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis **/
+    optionComponent: PropTypes.elementType,
+
     /** For a11y: How aggressively the user should be updated about changes in options **/
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
 

diff --git a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js
@@ -61,8 +61,7 @@ export const Default = () => (
     <Field
         required
         component={SingleSelectA11yFieldFF}
-        idPrefix="story"
-        name="agree"
+        name="story"
         label="Do you agree?"
         options={options}
         validate={hasValue}
@@ -72,8 +71,7 @@ export const Default = () => (
 export const InitialValue = () => (
     <Field
         component={SingleSelectA11yFieldFF}
-        idPrefix="story"
-        name="agree"
+        name="story"
         label="Do you agree?"
         options={options}
         initialValue="4"

diff --git a/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js b/collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js
@@ -16,8 +16,7 @@ describe('<SingleSelectA11yFieldFF/>', () => {
                     <form onSubmit={formRenderProps.handleSubmit}>
                         <Field
                             component={SingleSelectA11yFieldFF}
-                            idPrefix="story"
-                            name="selectName"
+                            name="story"
                             label="Label text"
                             options={[
                                 { value: '', label: 'None' },
@@ -56,8 +55,7 @@ describe('<SingleSelectA11yFieldFF/>', () => {
                         <Field
                             required
                             component={SingleSelectA11yFieldFF}
-                            idPrefix="story"
-                            name="selectName"
+                            name="story"
                             label="Label text"
                             validate={hasValue}
                             options={[

diff --git a/components/select/src/single-select-a11y-field/single-select-a11y-field.js b/components/select/src/single-select-a11y-field/single-select-a11y-field.js
@@ -12,14 +12,14 @@ export function SingleSelectA11yField(props) {
         disabled,
         error,
         helpText,
-        idPrefix,
         label,
+        name,
         required,
         valid,
         validationText,
         warning,
     } = props
-    const labelId = `${idPrefix}-label`
+    const labelId = `${name}-label`
 
     return (
         <Field
@@ -41,12 +41,12 @@ export function SingleSelectA11yField(props) {
 }
 
 SingleSelectA11yField.propTypes = {
-    /** necessary for IDs that are required for accessibility **/
-    idPrefix: PropTypes.string.isRequired,
-
     /** Label displayed above the input **/
     label: PropTypes.string.isRequired,
 
+    /** necessary for IDs that are required for accessibility **/
+    name: PropTypes.string.isRequired,
+
     /** An array of options **/
     options: PropTypes.arrayOf(optionProp).isRequired,
 
@@ -65,10 +65,6 @@ SingleSelectA11yField.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,
 
@@ -114,6 +110,10 @@ SingleSelectA11yField.propTypes = {
     /** String that will be displayed when the select is being filtered but the options array is empty **/
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
 
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis **/
+    optionComponent: PropTypes.elementType,
+
     /** For a11y: How aggressively the user should be updated about changes in options **/
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
 

diff --git a/components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js b/components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js
@@ -40,7 +40,7 @@ export const Default = () => {
 
     return (
         <SingleSelectA11yField
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -58,7 +58,7 @@ export const WithHelpText = () => {
 
     return (
         <SingleSelectA11yField
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             helpText="This is the help text"
             value={value}
@@ -78,7 +78,7 @@ export const StatusValid = () => {
     return (
         <SingleSelectA11yField
             valid
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -98,7 +98,7 @@ export const StatusWarning = () => {
     return (
         <SingleSelectA11yField
             warning
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -118,7 +118,7 @@ export const StatusError = () => {
     return (
         <SingleSelectA11yField
             error
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -138,7 +138,7 @@ export const StatusDisabled = () => {
     return (
         <SingleSelectA11yField
             disabled
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -157,7 +157,7 @@ export const Required = () => {
     return (
         <SingleSelectA11yField
             required
-            idPrefix="a11y"
+            name="a11y"
             label="This is the label"
             value={value}
             valueLabel={valueLabel}
@@ -176,7 +176,7 @@ export const InputWidth = () => {
     return (
         <div style={{ width: 200 }}>
             <SingleSelectA11yField
-                idPrefix="a11y"
+                name="a11y"
                 label="A very long label indeed, well at least longer than the input field to show how it looks and works and stuff"
                 value={value}
                 valueLabel={valueLabel}

diff --git a/components/select/src/single-select-a11y-field/single-select-a11y-field.test.js b/components/select/src/single-select-a11y-field/single-select-a11y-field.test.js
@@ -21,7 +21,7 @@ describe('<SingleSelectA11yField />', () => {
 
     it('should forward props to the SingleSelectA11y component', () => {
         const options = []
-        const customOption = () => null
+        const optionComponent = () => null
         const onChange = () => null
         const onBlur = () => null
         const onEndReached = () => null
@@ -32,14 +32,14 @@ describe('<SingleSelectA11yField />', () => {
             <SingleSelectA11yField
                 label="Label text"
                 // Props that'll be passed to SingleSelectA11y
-                idPrefix="foo"
+                name="foo"
                 options={options}
                 onChange={onChange}
                 autoFocus={false}
                 className=""
                 clearText=""
                 clearable={false}
-                customOption={customOption}
+                optionComponent={optionComponent}
                 dataTest=""
                 dense={false}
                 disabled={false}
@@ -67,15 +67,15 @@ describe('<SingleSelectA11yField />', () => {
             />
         )
 
-        expect(SingleSelectA11y.mock.calls[0][0].idPrefix).toBe('foo')
+        expect(SingleSelectA11y.mock.calls[0][0].name).toBe('foo')
         expect(SingleSelectA11y.mock.calls[0][0].options).toBe(options)
         expect(SingleSelectA11y.mock.calls[0][0].onChange).toBe(onChange)
         expect(SingleSelectA11y.mock.calls[0][0].autoFocus).toBe(false)
         expect(SingleSelectA11y.mock.calls[0][0].className).toBe('')
         expect(SingleSelectA11y.mock.calls[0][0].clearText).toBe('')
         expect(SingleSelectA11y.mock.calls[0][0].clearable).toBe(false)
-        expect(SingleSelectA11y.mock.calls[0][0].customOption).toBe(
-            customOption
+        expect(SingleSelectA11y.mock.calls[0][0].optionComponent).toBe(
+            optionComponent
         )
         expect(SingleSelectA11y.mock.calls[0][0].dataTest).toBe('')
         expect(SingleSelectA11y.mock.calls[0][0].dense).toBe(false)
@@ -122,7 +122,7 @@ describe('<SingleSelectA11yField />', () => {
                 validationText="Validation text"
                 valid={true}
                 // Props required by SingleSelectA11y
-                idPrefix="foo"
+                name="foo"
                 options={[]}
                 onChange={() => null}
             />

diff --git a/components/select/src/single-select-a11y/__stories__/DefaultPosition.js b/components/select/src/single-select-a11y/__stories__/DefaultPosition.js
@@ -3,7 +3,10 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const DefaultPosition = () => {
-    const [value, setValue] = useState('anc_1st_visit')
+    const [selected, setSelected] = useState({
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    })
 
     return (
         <div
@@ -23,16 +26,9 @@ export const DefaultPosition = () => {
                 }}
             >
                 <SingleSelectA11y
-                    idPrefix="a11y"
-                    value={value}
-                    valueLabel={
-                        value
-                            ? fiveOptions.find(
-                                  (option) => option.value === value
-                              ).label
-                            : ''
-                    }
-                    onChange={(nextValue) => setValue(nextValue)}
+                    name="a11y"
+                    selected={selected}
+                    onChange={setSelected}
                     options={fiveOptions}
                 />
             </div>

diff --git a/components/select/src/single-select-a11y/__stories__/Dense.js b/components/select/src/single-select-a11y/__stories__/Dense.js
@@ -3,19 +3,14 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
 import { fiveOptions } from './options.js'
 
 export const Dense = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
             dense
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? fiveOptions.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={fiveOptions}
         />
     )

diff --git a/components/select/src/single-select-a11y/__stories__/Empty.js b/components/select/src/single-select-a11y/__stories__/Empty.js
@@ -1,20 +1,14 @@
 import React, { useState } from 'react'
 import { SingleSelectA11y } from '../single-select-a11y.js'
-import { options } from './options.js'
 
 export const Empty = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={[]}
         />
     )

diff --git a/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js b/components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js
@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
 import { SingleSelectA11y } from '../single-select-a11y.js'
-import { options } from './options.js'
 
 export const EmptyWithEmptyNode = () => {
-    const [value, setValue] = useState('')
+    const [selected, setSelected] = useState(null)
     const emptyNode = (
         <div
             style={{
@@ -18,14 +17,9 @@ export const EmptyWithEmptyNode = () => {
 
     return (
         <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
+            name="a11y"
+            selected={selected}
+            onChange={setSelected}
             options={[]}
             empty={emptyNode}
         />