Skip to content

Commit b2d636f

Browse files
authored
fix(checkbox): set aria-checked of indeterminate checkbox to 'mixed' (#29115)
Issue number: resolves Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> We are not ever explicitly setting `aria-checked`. For checked and unchecked states (i.e. `true` and `false` for aria-checked), we don't need to set `aria-checked` because an input with a type of 'checkbox' has built-in semantics making `aria-checked` redundant. However, when the checkbox is in an indeterminate state, `aria-checked` should have a value of 'mixed'. We are not currently ever setting it to 'mixed'. See [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#description) for more details. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The checkbox's `aria-checked` has a value of 'true' when it is checked - The checkbox's `aria-checked` has a value of 'false' when it is unchecked - The checkbox's `aria-checked` has a value of 'mixed' when it is indeterminate ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
1 parent edc74c8 commit b2d636f

File tree

2 files changed

+16
-0
lines changed

2 files changed

+16
-0
lines changed

core/src/components/checkbox/checkbox.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,7 @@ export class Checkbox implements ComponentInterface {
251251

252252
return (
253253
<Host
254+
aria-checked={indeterminate ? 'mixed' : `${checked}`}
254255
class={createColorClasses(color, {
255256
[mode]: true,
256257
'in-item': hostContext('ion-item', el),

core/src/components/checkbox/test/checkbox.spec.ts

+15
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,18 @@ describe('ion-checkbox: disabled', () => {
3939
expect(checkbox.checked).toBe(false);
4040
});
4141
});
42+
43+
describe('ion-checkbox: indeterminate', () => {
44+
it('should have a mixed value for aria-checked', async () => {
45+
const page = await newSpecPage({
46+
components: [Checkbox],
47+
html: `
48+
<ion-checkbox indeterminate="true">Checkbox</ion-checkbox>
49+
`,
50+
});
51+
52+
const checkbox = page.body.querySelector('ion-checkbox')!;
53+
54+
expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
55+
});
56+
});

0 commit comments

Comments
 (0)