Skip to content

Commit 6053c05

Browse files
author
Hector Arce De Las Heras
committed
Fixed issue with aria-describedby attribute when screenReaderText is absent
This commit addresses an issue where the id was being added to the aria-describedby attribute even when screenReaderText was not present. Now, the aria-describedby attribute will only be populated if screenReaderText is provided, ensuring proper accessibility standards are maintained.
1 parent 12c2fb6 commit 6053c05

File tree

3 files changed

+177
-155
lines changed

3 files changed

+177
-155
lines changed

‎src/components/checkbox/__tests__/checkbox.test.tsx

Lines changed: 172 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -28,210 +28,229 @@ const mockWithOutProps = {
2828
label: { content: 'Accept terms and conditions' },
2929
};
3030

31-
test('Checkbox component', async () => {
32-
const { container } = renderProvider(<Checkbox {...mockProps} />);
31+
describe('Checkbox component', () => {
32+
it('Checkbox component', async () => {
33+
const { container } = renderProvider(<Checkbox {...mockProps} />);
3334

34-
const checkbox = screen.getByRole('checkbox');
35+
const checkbox = screen.getByRole('checkbox');
3536

36-
expect(checkbox).toBeInTheDocument();
37+
expect(checkbox).toBeInTheDocument();
3738

38-
const results = await axe(container);
39-
expect(container).toHTMLValidate();
40-
expect(results).toHaveNoViolations();
41-
});
39+
const results = await axe(container);
40+
expect(container).toHTMLValidate();
41+
expect(results).toHaveNoViolations();
42+
});
4243

43-
test('Checkbox component with label as Element', async () => {
44-
const labelElement = <label htmlFor="checkboxid">This is an element</label>;
45-
const { container, getByText } = renderProvider(
46-
<Checkbox {...mockProps} id="checkboxid" label={{ content: labelElement }} />
47-
);
44+
it('Checkbox component with label as Element', async () => {
45+
const labelElement = <label htmlFor="checkboxid">This is an element</label>;
46+
const { container, getByText } = renderProvider(
47+
<Checkbox {...mockProps} id="checkboxid" label={{ content: labelElement }} />
48+
);
4849

49-
const labelAsElement = getByText('This is an element');
50+
const labelAsElement = getByText('This is an element');
5051

51-
expect(labelAsElement).toBeInTheDocument();
52+
expect(labelAsElement).toBeInTheDocument();
5253

53-
const results = await axe(container);
54-
expect(container).toHTMLValidate();
55-
expect(results).toHaveNoViolations();
56-
});
54+
const results = await axe(container);
55+
expect(container).toHTMLValidate();
56+
expect(results).toHaveNoViolations();
57+
});
5758

58-
test('Checkbox component uncontrolled', async () => {
59-
const { container } = renderProvider(<CheckboxUnControlled {...mockProps} />);
59+
it('Checkbox component uncontrolled', async () => {
60+
const { container } = renderProvider(<CheckboxUnControlled {...mockProps} />);
6061

61-
const checkbox = screen.getByRole('checkbox');
62+
const checkbox = screen.getByRole('checkbox');
6263

63-
expect(checkbox).toBeInTheDocument();
64+
expect(checkbox).toBeInTheDocument();
6465

65-
const results = await axe(container);
66-
expect(container).toHTMLValidate();
67-
expect(results).toHaveNoViolations();
68-
});
66+
const results = await axe(container);
67+
expect(container).toHTMLValidate();
68+
expect(results).toHaveNoViolations();
69+
});
6970

70-
test('Checkbox component without props', async () => {
71-
const { container } = renderProvider(<Checkbox {...mockWithOutProps} />);
71+
it('Checkbox component without props', async () => {
72+
const { container } = renderProvider(<Checkbox {...mockWithOutProps} />);
7273

73-
const checkbox = screen.getByRole('checkbox');
74+
const checkbox = screen.getByRole('checkbox');
7475

75-
expect(checkbox).toBeInTheDocument();
76+
expect(checkbox).toBeInTheDocument();
7677

77-
const results = await axe(container);
78-
expect(container).toHTMLValidate();
79-
expect(results).toHaveNoViolations();
80-
});
78+
const results = await axe(container);
79+
expect(container).toHTMLValidate();
80+
expect(results).toHaveNoViolations();
81+
});
8182

82-
it('Should disallow user interaction when disabled', async () => {
83-
const { container } = renderProvider(
84-
<Checkbox
85-
{...mockProps}
86-
disabled={true}
87-
name="conditions"
88-
variant="DEFAULT"
89-
onChange={jest.fn()}
90-
/>
91-
);
83+
it('Should disallow user interaction when disabled', async () => {
84+
const { container } = renderProvider(
85+
<Checkbox
86+
{...mockProps}
87+
disabled={true}
88+
name="conditions"
89+
variant="DEFAULT"
90+
onChange={jest.fn()}
91+
/>
92+
);
9293

93-
const checkbox = screen.getByRole('checkbox');
94+
const checkbox = screen.getByRole('checkbox');
9495

95-
expect(checkbox).toBeDisabled();
96+
expect(checkbox).toBeDisabled();
9697

97-
await userEvent.click(checkbox);
98+
await userEvent.click(checkbox);
9899

99-
expect(checkbox).not.toBeChecked();
100+
expect(checkbox).not.toBeChecked();
100101

101-
const results = await axe(container);
102-
expect(container).toHTMLValidate({
103-
rules: {
104-
'attribute-boolean-style': 'off',
105-
},
102+
const results = await axe(container);
103+
expect(container).toHTMLValidate({
104+
rules: {
105+
'attribute-boolean-style': 'off',
106+
},
107+
});
108+
expect(results).toHaveNoViolations();
106109
});
107-
expect(results).toHaveNoViolations();
108-
});
109110

110-
it('Should allow user interaction when its not disabled', async () => {
111-
const { container } = renderProvider(
112-
<CheckboxUnControlled label={{ content: 'label' }} name="conditions" variant="DEFAULT" />
113-
);
111+
it('Should allow user interaction when its not disabled', async () => {
112+
const { container } = renderProvider(
113+
<CheckboxUnControlled label={{ content: 'label' }} name="conditions" variant="DEFAULT" />
114+
);
114115

115-
const checkbox = screen.getByRole('checkbox');
116+
const checkbox = screen.getByRole('checkbox');
116117

117-
expect(checkbox).toBeEnabled();
118+
expect(checkbox).toBeEnabled();
118119

119-
await userEvent.click(checkbox);
120+
await userEvent.click(checkbox);
120121

121-
expect(checkbox).toBeChecked();
122+
expect(checkbox).toBeChecked();
122123

123-
const results = await axe(container);
124-
expect(container).toHTMLValidate();
125-
expect(results).toHaveNoViolations();
126-
});
124+
const results = await axe(container);
125+
expect(container).toHTMLValidate();
126+
expect(results).toHaveNoViolations();
127+
});
127128

128-
it('When user interacts, on Change should be called', async () => {
129-
const onChange = jest.fn();
130-
const { container } = renderProvider(
131-
<CheckboxUnControlled
132-
label={{ content: 'label' }}
133-
name="conditions"
134-
variant="DEFAULT"
135-
onChange={onChange}
136-
/>
137-
);
129+
it('When user interacts, on Change should be called', async () => {
130+
const onChange = jest.fn();
131+
const { container } = renderProvider(
132+
<CheckboxUnControlled
133+
label={{ content: 'label' }}
134+
name="conditions"
135+
variant="DEFAULT"
136+
onChange={onChange}
137+
/>
138+
);
138139

139-
const checkbox = screen.getByRole('checkbox');
140+
const checkbox = screen.getByRole('checkbox');
140141

141-
expect(checkbox).toBeEnabled();
142+
expect(checkbox).toBeEnabled();
142143

143-
await userEvent.click(checkbox);
144+
await userEvent.click(checkbox);
144145

145-
expect(checkbox).toBeChecked();
146-
expect(onChange).toHaveBeenCalled();
146+
expect(checkbox).toBeChecked();
147+
expect(onChange).toHaveBeenCalled();
147148

148-
const results = await axe(container);
149-
expect(container).toHTMLValidate();
150-
expect(results).toHaveNoViolations();
151-
});
149+
const results = await axe(container);
150+
expect(container).toHTMLValidate();
151+
expect(results).toHaveNoViolations();
152+
});
152153

153-
it('Should be required when required prop is true', async () => {
154-
const { container } = renderProvider(
155-
<Checkbox
156-
label={{ content: 'label' }}
157-
name="conditions"
158-
required={true}
159-
variant="DEFAULT"
160-
onChange={jest.fn()}
161-
/>
162-
);
163-
const checkbox = screen.getByRole('checkbox');
164-
165-
expect(checkbox).toBeRequired();
166-
167-
const results = await axe(container);
168-
expect(container).toHTMLValidate({
169-
rules: {
170-
'attribute-boolean-style': 'off',
171-
},
154+
it('Should be required when required prop is true', async () => {
155+
const { container } = renderProvider(
156+
<Checkbox
157+
label={{ content: 'label' }}
158+
name="conditions"
159+
required={true}
160+
variant="DEFAULT"
161+
onChange={jest.fn()}
162+
/>
163+
);
164+
const checkbox = screen.getByRole('checkbox');
165+
166+
expect(checkbox).toBeRequired();
167+
168+
const results = await axe(container);
169+
expect(container).toHTMLValidate({
170+
rules: {
171+
'attribute-boolean-style': 'off',
172+
},
173+
});
174+
expect(results).toHaveNoViolations();
172175
});
173-
expect(results).toHaveNoViolations();
174-
});
175176

176-
it('Should show message error when the status is error', async () => {
177-
const { container } = renderProvider(<Checkbox {...mockProps} error />);
177+
it('Should show message error when the status is error', async () => {
178+
const { container } = renderProvider(<Checkbox {...mockProps} error />);
178179

179-
const textErrorMessage = screen.getByText(mockProps.errorMessage.content);
180+
const textErrorMessage = screen.getByText(mockProps.errorMessage.content);
180181

181-
expect(textErrorMessage).toBeInTheDocument();
182+
expect(textErrorMessage).toBeInTheDocument();
182183

183-
const results = await axe(container);
184-
expect(container).toHTMLValidate();
185-
expect(results).toHaveNoViolations();
186-
});
184+
const results = await axe(container);
185+
expect(container).toHTMLValidate();
186+
expect(results).toHaveNoViolations();
187+
});
187188

188-
it('Should allow to be checked and disabled at the same time', async () => {
189-
const { container } = renderProvider(<Checkbox {...mockProps} checked disabled />);
189+
it('Should allow to be checked and disabled at the same time', async () => {
190+
const { container } = renderProvider(<Checkbox {...mockProps} checked disabled />);
190191

191-
const checkbox = screen.getByRole('checkbox');
192+
const checkbox = screen.getByRole('checkbox');
192193

193-
expect(checkbox).toBeDisabled();
194-
expect(checkbox).toBeChecked();
194+
expect(checkbox).toBeDisabled();
195+
expect(checkbox).toBeChecked();
195196

196-
const results = await axe(container);
197-
expect(container).toHTMLValidate({
198-
rules: {
199-
'attribute-boolean-style': 'off',
200-
},
197+
const results = await axe(container);
198+
expect(container).toHTMLValidate({
199+
rules: {
200+
'attribute-boolean-style': 'off',
201+
},
202+
});
203+
expect(results).toHaveNoViolations();
201204
});
202-
expect(results).toHaveNoViolations();
203-
});
204205

205-
test('Checkbox component with helpContent as Element and without helperText', async () => {
206-
const helpContent = <div>This is an element</div>;
207-
const { container, getByText, queryByText } = renderProvider(
208-
<Checkbox {...mockProps} helperContent={{ content: helpContent }} id="checkboxid" />
209-
);
206+
it('Checkbox component with helpContent as Element and without helperText', async () => {
207+
const helpContent = <div>This is an element</div>;
208+
const { container, getByText, queryByText } = renderProvider(
209+
<Checkbox {...mockProps} helperContent={{ content: helpContent }} id="checkboxid" />
210+
);
210211

211-
const helpContentAsElement = getByText('This is an element');
212-
const helperTextAsString = queryByText(mockProps.helperText.content as string);
212+
const helpContentAsElement = getByText('This is an element');
213+
const helperTextAsString = queryByText(mockProps.helperText.content as string);
213214

214-
expect(helpContentAsElement).toBeInTheDocument();
215-
expect(helperTextAsString).not.toBeInTheDocument();
215+
expect(helpContentAsElement).toBeInTheDocument();
216+
expect(helperTextAsString).not.toBeInTheDocument();
216217

217-
const results = await axe(container);
218-
expect(container).toHTMLValidate();
219-
expect(results).toHaveNoViolations();
220-
});
218+
const results = await axe(container);
219+
expect(container).toHTMLValidate();
220+
expect(results).toHaveNoViolations();
221+
});
221222

222-
test('Checkbox component with helperText', async () => {
223-
const helpContent = 'This is a description';
224-
const { container, getByText } = renderProvider(
225-
<Checkbox {...mockProps} helperContent={{ content: helpContent }} id="checkboxid" />
226-
);
223+
it('Checkbox component with helperText', async () => {
224+
const helpContent = 'This is a description';
225+
const { container, getByText } = renderProvider(
226+
<Checkbox {...mockProps} helperContent={{ content: helpContent }} id="checkboxid" />
227+
);
227228

228-
const helperTextAsString = getByText('Helper text');
229-
const helpContentAsElement = getByText('This is a description');
229+
const helperTextAsString = getByText('Helper text');
230+
const helpContentAsElement = getByText('This is a description');
230231

231-
expect(helperTextAsString).toBeInTheDocument();
232-
expect(helpContentAsElement).toBeInTheDocument();
232+
expect(helperTextAsString).toBeInTheDocument();
233+
expect(helpContentAsElement).toBeInTheDocument();
233234

234-
const results = await axe(container);
235-
expect(container).toHTMLValidate();
236-
expect(results).toHaveNoViolations();
235+
const results = await axe(container);
236+
expect(container).toHTMLValidate();
237+
expect(results).toHaveNoViolations();
238+
});
239+
240+
it('When Screen Reader Text, it appears as aria-describedBy', async () => {
241+
const checkboxId = 'checkboxid';
242+
const screenReaderText = 'This is a screen reader text';
243+
const { container } = renderProvider(
244+
<Checkbox {...mockProps} id={checkboxId} screenReaderText={screenReaderText} />
245+
);
246+
247+
const checkbox = screen.getByRole('checkbox');
248+
249+
expect(checkbox).toBeInTheDocument();
250+
expect(checkbox).toHaveAttribute('aria-describedby', `${checkboxId}ScreenReader`);
251+
252+
const results = await axe(container);
253+
expect(container).toHTMLValidate();
254+
expect(results).toHaveNoViolations();
255+
});
237256
});

‎src/components/checkbox/checkboxStandAlone.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ const CheckboxStandAloneComponent = (
131131
hasError,
132132
errorText: errorMessage?.content,
133133
checkBoxErrorId,
134+
screenReaderText,
134135
screenReaderId,
135136
})}
136137
aria-invalid={hasError}

0 commit comments

Comments
 (0)