Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(checkbox): Set aria-checked to mixed for indeterminate checkbox #8089

Merged
merged 1 commit into from
Nov 20, 2017

Conversation

tinayuangao
Copy link
Contributor

Fixes #7932

@tinayuangao tinayuangao requested a review from jelbourn October 27, 2017 23:40
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 27, 2017
@@ -303,6 +303,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
this._changeDetectorRef.markForCheck();
}

getAriaChecked() {
return this.checked ? true : (this.indeterminate ? 'mixed' : false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Return type should be 'true' | 'false' | 'mixed' (since the attr should always be a string)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Thanks for review!

@@ -303,6 +303,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
this._changeDetectorRef.markForCheck();
}

getAriaChecked(): string {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just also realized: method should be internal _getAriaChecked

The return type can really the string literal type 'true' | 'false' | 'mixed'

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just some style nits. Add merge-ready when you're ready

@@ -87,13 +87,17 @@ describe('MatCheckbox', () => {
expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked');
expect(inputElement.checked).toBe(false);
expect(inputElement.indeterminate).toBe(false);
expect(inputElement.getAttribute('aria-checked'))
.toBe('false', 'Expect aria-checked to be false');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+2 more indent

@@ -303,6 +303,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
this._changeDetectorRef.markForCheck();
}

_getAriaChecked(): 'true'|'false'|'mixed' {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We typically put spaces between the types like this

'true' | 'false' | 'mixed'

@tinayuangao tinayuangao added the action: merge The PR is ready for merge by the caretaker label Nov 1, 2017
@jelbourn jelbourn merged commit 3037a90 into angular:master Nov 20, 2017
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

checkbox a11y issue: Partially done task is getting read out as 'Checkbox not checked'.
3 participants