mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
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. -->
This commit is contained in:
@ -251,6 +251,7 @@ export class Checkbox implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<Host
|
||||
aria-checked={indeterminate ? 'mixed' : `${checked}`}
|
||||
class={createColorClasses(color, {
|
||||
[mode]: true,
|
||||
'in-item': hostContext('ion-item', el),
|
||||
|
@ -39,3 +39,18 @@ describe('ion-checkbox: disabled', () => {
|
||||
expect(checkbox.checked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ion-checkbox: indeterminate', () => {
|
||||
it('should have a mixed value for aria-checked', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Checkbox],
|
||||
html: `
|
||||
<ion-checkbox indeterminate="true">Checkbox</ion-checkbox>
|
||||
`,
|
||||
});
|
||||
|
||||
const checkbox = page.body.querySelector('ion-checkbox')!;
|
||||
|
||||
expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user