Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

fix(input): update aria-describedby to also include errors #6239

Merged
merged 3 commits into from Aug 4, 2017
Merged

fix(input): update aria-describedby to also include errors #6239

merged 3 commits into from Aug 4, 2017

Conversation

mmalerba
Copy link
Contributor

@mmalerba mmalerba commented Aug 2, 2017

fixes #6131

@mmalerba mmalerba added Accessibility This issue is related to accessibility (a11y) pr: needs review labels Aug 2, 2017
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 2, 2017
crisbeto
crisbeto approved these changes Aug 3, 2017
View reviewed changes
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

LGTM, a few nits.

src/lib/input/input-container.ts Outdated
ids.push(endHint.id);
}
} else {
if (this._errorChildren) {
Copy link
Member

Choose a reason for hiding this comment

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

This one can be moved up and turned into an else if.

src/lib/input/input-container.spec.ts Outdated
fixture.detectChanges();

let errorIds = fixture.debugElement.queryAll(By.css('.mat-input-error'))
.map((el) => el.nativeElement.getAttribute('id')).join(' ');
Copy link
Member

Choose a reason for hiding this comment

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

nit: you can remove the parentheses around el.

src/lib/input/input-container.spec.ts Outdated
let hintId = fixture.debugElement.query(By.css('.mat-hint')).nativeElement.getAttribute('id');
let describedBy = inputEl.getAttribute('aria-describedby');

expect(hintId).not.toBeFalsy('hint should be shown');
Copy link
Member

Choose a reason for hiding this comment

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

toBeTruthy instead of .not.toBeFalsy.

src/lib/input/input-container.spec.ts Outdated
.map((el) => el.nativeElement.getAttribute('id')).join(' ');
describedBy = inputEl.getAttribute('aria-describedby');

expect(errorIds).not.toBeFalsy('errors should be shown');
Copy link
Member

Choose a reason for hiding this comment

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

Also toBeTruthy.

src/lib/input/input-container.ts Outdated

if (endHint) {
ids.push(endHint.id);
if (this._getDisplayedMessages() == 'hint') {
Copy link
Member

Choose a reason for hiding this comment

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

Triple equals for consistency.

jelbourn
jelbourn reviewed Aug 3, 2017
View reviewed changes
src/lib/input/input-container.ts
@@ -100,10 +101,13 @@ export class MdHint {
@Directive({
selector: 'md-error, mat-error',
host: {
'class': 'mat-input-error'
'class': 'mat-input-error',
Copy link
Member

Choose a reason for hiding this comment

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

Why add a css class just for querying in a test?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This class has always been here, it's used for styling to avoid having to target both element selectors

src/lib/input/input-container.ts
ids.push(endHint.id);
}
} else if (this._errorChildren) {
ids = this._errorChildren.map(mdError => mdError.id);
Copy link
Member

Choose a reason for hiding this comment

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

It looks like this always clobbers any existing aria-describedby. We want to augment an existing value if there already is one. @andrewseguin ran into the same thing w/ tooltip and was going to write some common code to handle this

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We could try to add to a static aria-describedby, but if the user has set up some binding like [attr.aria-describedby]="myStuff" I'm not sure there's much we can do. I'll sync with Andrew

Copy link
Member

Choose a reason for hiding this comment

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

We'd probably have to update after every ngOnChanges. This is good for now and we can revisit later

src/lib/input/input-container.ts
let startHint = this._hintChildren ?
this._hintChildren.find(hint => hint.align === 'start') : null;
let endHint = this._hintChildren ?
this._hintChildren.find(hint => hint.align === 'end') : null;
Copy link
Member

Choose a reason for hiding this comment

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

You could simplify a lot of this to

const ids = [...this._hintChildren.toArray(), ...this._errorChildren.toArray()].map(c => c.id);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reason this is more complicated is because there's also a hintLabel property that can be used to set the start hint. The extra logic is to make sure we put the start hint first (whether its from a md-hint or hintLabel, followed by the end hint)

@jelbourn
Copy link
Member

jelbourn commented Aug 3, 2017

Looks like some test failures on CI

@mmalerba
Copy link
Contributor Author

mmalerba commented Aug 3, 2017

CI issues resolved

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Aug 4, 2017
jelbourn
jelbourn approved these changes Aug 4, 2017
View reviewed changes
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

@tinayuangao tinayuangao merged commit 2af284c into angular:master Aug 4, 2017
crisbeto pushed a commit to crisbeto/material2 that referenced this pull request Aug 5, 2017
@mmalerba @crisbeto
fix(input): update aria-describedby to also include errors (angular#6239
dad17a8 
)

* fix(input): update aria-describedby to also include errors

* comments addressed

* check for null errorChildren
@mmalerba mmalerba deleted the input-hint branch April 3, 2018 15:19
@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 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jelbourn jelbourn jelbourn approved these changes

@crisbeto crisbeto crisbeto approved these changes

Assignees

@jelbourn jelbourn

@crisbeto crisbeto

Labels
Accessibility This issue is related to accessibility (a11y) 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
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add aria-describedby for md-error and md-hint
5 participants
@mmalerba @jelbourn @crisbeto @googlebot @tinayuangao