Skip to content

refactor(select): use aria-activedescendant to manage focus - #6856

Merged
kara merged 1 commit into
angular:masterfrom
crisbeto:select-activedescendant
Oct 3, 2017
Merged

refactor(select): use aria-activedescendant to manage focus#6856
kara merged 1 commit into
angular:masterfrom
crisbeto:select-activedescendant

Conversation

@crisbeto

@crisbetocrisbeto commented Sep 5, 2017

Copy link
Copy Markdown
Member
  • Refactors the select to use aria-activedescendant to announce the highlighted item to screen readers. Previously we would do this through focus, however using focus prevents us from being able to do things like feat(select): add md-select-header directive #3211.
  • Fixes a hack that was used to get a hold of the panel element using querySelector. Now it properly uses a ViewChild query, however this meant some tests had to be updated.

Relates to #3211.
Fixes#6690.

@crisbetocrisbeto added Accessibility This issue is related to accessibility (a11y) pr: needs review labels Sep 5, 2017
@crisbeto
crisbeto requested a review from kara as a code ownerSeptember 5, 2017 21:49
@googlebotgooglebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Sep 5, 2017
@crisbeto
crisbetoforce-pushed the select-activedescendant branch from 14f5414 to 1f992aeCompareSeptember 6, 2017 05:16

@jelbournjelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Overall looks good; @kara should do a quick pass
(I'll get her to look at it tomorrow)

Comment threadsrc/lib/select/select.spec.ts Outdated
it('should open the panel when trigger is clicked', fakeAsync(() => {
trigger.click();
fixture.detectChanges();
tick(200);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Make constants for 200 and 500 so that the different have some semantic meaning tied to it?

@crisbeto
crisbetoforce-pushed the select-activedescendant branch from 5f54f1b to 624ddffCompareSeptember 13, 2017 16:42
@crisbetocrisbeto added the P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful label Sep 14, 2017

@karakara left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM. Needs rebase now, though.

@karakara assigned crisbeto and unassigned jelbourn and karaSep 19, 2017
@crisbeto
crisbetoforce-pushed the select-activedescendant branch from 624ddff to 23a5494CompareSeptember 19, 2017 20:30
@crisbetocrisbeto added action: merge The PR is ready for merge by the caretaker and removed pr: needs rebase labels Sep 19, 2017
@mmalerbammalerba added pr: needs rebase and removed action: merge The PR is ready for merge by the caretaker labels Sep 22, 2017
@mmalerba

Copy link
Copy Markdown
Contributor

please rebase

@crisbeto
crisbetoforce-pushed the select-activedescendant branch from 23a5494 to a518536CompareSeptember 23, 2017 16:44
@crisbetocrisbeto added action: merge The PR is ready for merge by the caretaker and removed pr: needs rebase labels Sep 23, 2017
@crisbeto

Copy link
Copy Markdown
MemberAuthor

Ready to go @mmalerba.

@andrewseguin

Copy link
Copy Markdown
Contributor

Needs rebase

@andrewseguinandrewseguin added pr: needs rebase and removed action: merge The PR is ready for merge by the caretaker labels Sep 29, 2017
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211.
* Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated.
Relates to angular#3211.
Fixesangular#6690.
@crisbeto
crisbetoforce-pushed the select-activedescendant branch from 26fd20e to 6ea8424CompareSeptember 30, 2017 10:12
@crisbetocrisbeto added action: merge The PR is ready for merge by the caretaker and removed pr: needs rebase labels Sep 30, 2017
@kara
kara merged commit b5ada20 into angular:masterOct 3, 2017
@angular-automatic-lock-bot

Copy link
Copy Markdown

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-botangular-automatic-lock-botBot locked and limited conversation to collaborators Sep 7, 2019
essjay05 added a commit to essjay05/angular-components that referenced this pull request Aug 27, 2024
…iveDescendant
Updates previous fix to account for previous fixangular#6856 which refactored
focus on listbox to use aria-activedescendant instead to manage focus.
Fixes b/285945157
essjay05 added a commit to essjay05/angular-components that referenced this pull request Aug 28, 2024
…iveDescendant
Updates previous fix to account for previous fixangular#6856 which refactored
focus on listbox to use aria-activedescendant instead to manage focus.
Fixes b/285945157
essjay05 added a commit to essjay05/angular-components that referenced this pull request Aug 29, 2024
…iveDescendant
Updates previous fix to account for previous fixangular#6856 which refactored
focus on listbox to use aria-activedescendant instead to manage focus.
Fixes b/285945157
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

AccessibilityThis issue is related to accessibility (a11y)action: mergeThe PR is ready for merge by the caretakercla: yesPR author has agreed to Google's Contributor License AgreementP1Impacts a large percentage of users; if a workaround exists it is partial or overly painful

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Focus is lost when opening md-select options list

6 participants

@crisbeto@mmalerba@andrewseguin@jelbourn@kara@googlebot