Skip to content

Commit 356bd4f

Browse files
Mohammer5Mohammer5
committed
fix(select a11y): handle remaining TODO comments & rename internal components
1 parent cca9228 commit 356bd4f

File tree

65 files changed

+619
-811
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+619
-811
lines changed

‎collections/forms/i18n/en.pot

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ msgstr ""
55
"Content-Type: text/plain; charset=utf-8\n"
66
"Content-Transfer-Encoding: 8bit\n"
77
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
8-
"POT-Creation-Date: 2024-11-19T08:12:09.695Z\n"
9-
"PO-Revision-Date: 2024-11-19T08:12:09.696Z\n"
8+
"POT-Creation-Date: 2024-11-28T08:22:51.040Z\n"
9+
"PO-Revision-Date: 2024-11-28T08:22:51.041Z\n"
1010

1111
msgid "Upload file"
1212
msgstr "Upload file"

‎collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const SingleSelectA11yFieldFF = ({
2828
return (
2929
<SingleSelectA11yField
3030
{...rest}
31+
name={input.name}
3132
error={hasError(meta, error)}
3233
valid={isValid(meta, valid, showValidStatus)}
3334
loading={isLoading(meta, loading, showLoadingStatus)}
@@ -41,9 +42,6 @@ export const SingleSelectA11yFieldFF = ({
4142
}
4243

4344
SingleSelectA11yFieldFF.propTypes = {
44-
/** necessary for IDs that are required for accessibility **/
45-
idPrefix: PropTypes.string.isRequired,
46-
4745
/** `input` props received from Final Form `Field` */
4846
input: inputPropType.isRequired,
4947

@@ -72,10 +70,6 @@ SingleSelectA11yFieldFF.propTypes = {
7270
/** Whether a clear button should be displayed or not **/
7371
clearable: PropTypes.bool,
7472

75-
/** Allows to override what's rendered inside the `button[role="option"]`.
76-
* Can be overriden on an individual option basis **/
77-
customOption: PropTypes.elementType,
78-
7973
/** A value for a `data-test` attribute on the root element **/
8074
dataTest: PropTypes.string,
8175

@@ -121,6 +115,10 @@ SingleSelectA11yFieldFF.propTypes = {
121115
/** String that will be displayed when the select is being filtered but the options array is empty **/
122116
noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
123117

118+
/** Allows to override what's rendered inside the `button[role="option"]`.
119+
* Can be overriden on an individual option basis **/
120+
optionComponent: PropTypes.elementType,
121+
124122
/** For a11y: How aggressively the user should be updated about changes in options **/
125123
optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
126124

‎collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.prod.stories.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ export const Default = () => (
6161
<Field
6262
required
6363
component={SingleSelectA11yFieldFF}
64-
idPrefix="story"
65-
name="agree"
64+
name="story"
6665
label="Do you agree?"
6766
options={options}
6867
validate={hasValue}
@@ -72,8 +71,7 @@ export const Default = () => (
7271
export const InitialValue = () => (
7372
<Field
7473
component={SingleSelectA11yFieldFF}
75-
idPrefix="story"
76-
name="agree"
74+
name="story"
7775
label="Do you agree?"
7876
options={options}
7977
initialValue="4"

‎collections/forms/src/SingleSelectA11yFieldFF/SingleSelectA11yFieldFF.test.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ describe('<SingleSelectA11yFieldFF/>', () => {
1616
<form onSubmit={formRenderProps.handleSubmit}>
1717
<Field
1818
component={SingleSelectA11yFieldFF}
19-
idPrefix="story"
20-
name="selectName"
19+
name="story"
2120
label="Label text"
2221
options={[
2322
{ value: '', label: 'None' },
@@ -56,8 +55,7 @@ describe('<SingleSelectA11yFieldFF/>', () => {
5655
<Field
5756
required
5857
component={SingleSelectA11yFieldFF}
59-
idPrefix="story"
60-
name="selectName"
58+
name="story"
6159
label="Label text"
6260
validate={hasValue}
6361
options={[

‎components/select/src/single-select-a11y-field/single-select-a11y-field.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ export function SingleSelectA11yField(props) {
1212
disabled,
1313
error,
1414
helpText,
15-
idPrefix,
1615
label,
16+
name,
1717
required,
1818
valid,
1919
validationText,
2020
warning,
2121
} = props
22-
const labelId = `${idPrefix}-label`
22+
const labelId = `${name}-label`
2323

2424
return (
2525
<Field
@@ -41,12 +41,12 @@ export function SingleSelectA11yField(props) {
4141
}
4242

4343
SingleSelectA11yField.propTypes = {
44-
/** necessary for IDs that are required for accessibility **/
45-
idPrefix: PropTypes.string.isRequired,
46-
4744
/** Label displayed above the input **/
4845
label: PropTypes.string.isRequired,
4946

47+
/** necessary for IDs that are required for accessibility **/
48+
name: PropTypes.string.isRequired,
49+
5050
/** An array of options **/
5151
options: PropTypes.arrayOf(optionProp).isRequired,
5252

@@ -65,10 +65,6 @@ SingleSelectA11yField.propTypes = {
6565
/** Whether a clear button should be displayed or not **/
6666
clearable: PropTypes.bool,
6767

68-
/** Allows to override what's rendered inside the `button[role="option"]`.
69-
* Can be overriden on an individual option basis **/
70-
customOption: PropTypes.elementType,
71-
7268
/** A value for a `data-test` attribute on the root element **/
7369
dataTest: PropTypes.string,
7470

@@ -114,6 +110,10 @@ SingleSelectA11yField.propTypes = {
114110
/** String that will be displayed when the select is being filtered but the options array is empty **/
115111
noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
116112

113+
/** Allows to override what's rendered inside the `button[role="option"]`.
114+
* Can be overriden on an individual option basis **/
115+
optionComponent: PropTypes.elementType,
116+
117117
/** For a11y: How aggressively the user should be updated about changes in options **/
118118
optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
119119

‎components/select/src/single-select-a11y-field/single-select-a11y-field.prod.stories.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const Default = () => {
4040

4141
return (
4242
<SingleSelectA11yField
43-
idPrefix="a11y"
43+
name="a11y"
4444
label="This is the label"
4545
value={value}
4646
valueLabel={valueLabel}
@@ -58,7 +58,7 @@ export const WithHelpText = () => {
5858

5959
return (
6060
<SingleSelectA11yField
61-
idPrefix="a11y"
61+
name="a11y"
6262
label="This is the label"
6363
helpText="This is the help text"
6464
value={value}
@@ -78,7 +78,7 @@ export const StatusValid = () => {
7878
return (
7979
<SingleSelectA11yField
8080
valid
81-
idPrefix="a11y"
81+
name="a11y"
8282
label="This is the label"
8383
value={value}
8484
valueLabel={valueLabel}
@@ -98,7 +98,7 @@ export const StatusWarning = () => {
9898
return (
9999
<SingleSelectA11yField
100100
warning
101-
idPrefix="a11y"
101+
name="a11y"
102102
label="This is the label"
103103
value={value}
104104
valueLabel={valueLabel}
@@ -118,7 +118,7 @@ export const StatusError = () => {
118118
return (
119119
<SingleSelectA11yField
120120
error
121-
idPrefix="a11y"
121+
name="a11y"
122122
label="This is the label"
123123
value={value}
124124
valueLabel={valueLabel}
@@ -138,7 +138,7 @@ export const StatusDisabled = () => {
138138
return (
139139
<SingleSelectA11yField
140140
disabled
141-
idPrefix="a11y"
141+
name="a11y"
142142
label="This is the label"
143143
value={value}
144144
valueLabel={valueLabel}
@@ -157,7 +157,7 @@ export const Required = () => {
157157
return (
158158
<SingleSelectA11yField
159159
required
160-
idPrefix="a11y"
160+
name="a11y"
161161
label="This is the label"
162162
value={value}
163163
valueLabel={valueLabel}
@@ -176,7 +176,7 @@ export const InputWidth = () => {
176176
return (
177177
<div style={{ width: 200 }}>
178178
<SingleSelectA11yField
179-
idPrefix="a11y"
179+
name="a11y"
180180
label="A very long label indeed, well at least longer than the input field to show how it looks and works and stuff"
181181
value={value}
182182
valueLabel={valueLabel}

‎components/select/src/single-select-a11y-field/single-select-a11y-field.test.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('<SingleSelectA11yField />', () => {
2121

2222
it('should forward props to the SingleSelectA11y component', () => {
2323
const options = []
24-
const customOption = () => null
24+
const optionComponent = () => null
2525
const onChange = () => null
2626
const onBlur = () => null
2727
const onEndReached = () => null
@@ -32,14 +32,14 @@ describe('<SingleSelectA11yField />', () => {
3232
<SingleSelectA11yField
3333
label="Label text"
3434
// Props that'll be passed to SingleSelectA11y
35-
idPrefix="foo"
35+
name="foo"
3636
options={options}
3737
onChange={onChange}
3838
autoFocus={false}
3939
className=""
4040
clearText=""
4141
clearable={false}
42-
customOption={customOption}
42+
optionComponent={optionComponent}
4343
dataTest=""
4444
dense={false}
4545
disabled={false}
@@ -67,15 +67,15 @@ describe('<SingleSelectA11yField />', () => {
6767
/>
6868
)
6969

70-
expect(SingleSelectA11y.mock.calls[0][0].idPrefix).toBe('foo')
70+
expect(SingleSelectA11y.mock.calls[0][0].name).toBe('foo')
7171
expect(SingleSelectA11y.mock.calls[0][0].options).toBe(options)
7272
expect(SingleSelectA11y.mock.calls[0][0].onChange).toBe(onChange)
7373
expect(SingleSelectA11y.mock.calls[0][0].autoFocus).toBe(false)
7474
expect(SingleSelectA11y.mock.calls[0][0].className).toBe('')
7575
expect(SingleSelectA11y.mock.calls[0][0].clearText).toBe('')
7676
expect(SingleSelectA11y.mock.calls[0][0].clearable).toBe(false)
77-
expect(SingleSelectA11y.mock.calls[0][0].customOption).toBe(
78-
customOption
77+
expect(SingleSelectA11y.mock.calls[0][0].optionComponent).toBe(
78+
optionComponent
7979
)
8080
expect(SingleSelectA11y.mock.calls[0][0].dataTest).toBe('')
8181
expect(SingleSelectA11y.mock.calls[0][0].dense).toBe(false)
@@ -122,7 +122,7 @@ describe('<SingleSelectA11yField />', () => {
122122
validationText="Validation text"
123123
valid={true}
124124
// Props required by SingleSelectA11y
125-
idPrefix="foo"
125+
name="foo"
126126
options={[]}
127127
onChange={() => null}
128128
/>

‎components/select/src/single-select-a11y/__stories__/DefaultPosition.js

+7-11
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
33
import { fiveOptions } from './options.js'
44

55
export const DefaultPosition = () => {
6-
const [value, setValue] = useState('anc_1st_visit')
6+
const [selected, setSelected] = useState({
7+
label: 'ANC 1st visit',
8+
value: 'anc_1st_visit',
9+
})
710

811
return (
912
<div
@@ -23,16 +26,9 @@ export const DefaultPosition = () => {
2326
}}
2427
>
2528
<SingleSelectA11y
26-
idPrefix="a11y"
27-
value={value}
28-
valueLabel={
29-
value
30-
? fiveOptions.find(
31-
(option) => option.value === value
32-
).label
33-
: ''
34-
}
35-
onChange={(nextValue) => setValue(nextValue)}
29+
name="a11y"
30+
selected={selected}
31+
onChange={setSelected}
3632
options={fiveOptions}
3733
/>
3834
</div>

‎components/select/src/single-select-a11y/__stories__/Dense.js

+4-9
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,14 @@ import { SingleSelectA11y } from '../single-select-a11y.js'
33
import { fiveOptions } from './options.js'
44

55
export const Dense = () => {
6-
const [value, setValue] = useState('')
6+
const [selected, setSelected] = useState(null)
77

88
return (
99
<SingleSelectA11y
1010
dense
11-
idPrefix="a11y"
12-
value={value}
13-
valueLabel={
14-
value
15-
? fiveOptions.find((option) => option.value === value).label
16-
: ''
17-
}
18-
onChange={(nextValue) => setValue(nextValue)}
11+
name="a11y"
12+
selected={selected}
13+
onChange={setSelected}
1914
options={fiveOptions}
2015
/>
2116
)

‎components/select/src/single-select-a11y/__stories__/Empty.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
import React, { useState } from 'react'
22
import { SingleSelectA11y } from '../single-select-a11y.js'
3-
import { options } from './options.js'
43

54
export const Empty = () => {
6-
const [value, setValue] = useState('')
5+
const [selected, setSelected] = useState(null)
76

87
return (
98
<SingleSelectA11y
10-
idPrefix="a11y"
11-
value={value}
12-
valueLabel={
13-
value
14-
? options.find((option) => option.value === value).label
15-
: ''
16-
}
17-
onChange={(nextValue) => setValue(nextValue)}
9+
name="a11y"
10+
selected={selected}
11+
onChange={setSelected}
1812
options={[]}
1913
/>
2014
)

‎components/select/src/single-select-a11y/__stories__/EmptyWithEmptyNode.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { useState } from 'react'
22
import { SingleSelectA11y } from '../single-select-a11y.js'
3-
import { options } from './options.js'
43

54
export const EmptyWithEmptyNode = () => {
6-
const [value, setValue] = useState('')
5+
const [selected, setSelected] = useState(null)
76
const emptyNode = (
87
<div
98
style={{
@@ -18,14 +17,9 @@ export const EmptyWithEmptyNode = () => {
1817

1918
return (
2019
<SingleSelectA11y
21-
idPrefix="a11y"
22-
value={value}
23-
valueLabel={
24-
value
25-
? options.find((option) => option.value === value).label
26-
: ''
27-
}
28-
onChange={(nextValue) => setValue(nextValue)}
20+
name="a11y"
21+
selected={selected}
22+
onChange={setSelected}
2923
options={[]}
3024
empty={emptyNode}
3125
/>

0 commit comments

Comments
 (0)