This repository was archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
demos(select): select header example is not accessible #11139
Copy link
Copy link
Open
Labels
P2: requiredIssues that must be fixed.Issues that must be fixed.a11yThis issue is related to accessibilityThis issue is related to accessibilityneeds: investigationThe cause of this issue is not well understood and needs to be investigated by the team or communityThe cause of this issue is not well understood and needs to be investigated by the team or communitytype: demos
Milestone
Description
Bug, feature request, or proposal:
As mentioned in #10342 (comment), the current md-select-header
demo is not accessible and will lead developers to implement inaccessible select search boxes in their apps.
What is the expected behavior?
All of the demos should be using accessibility best practices and be considered 'accessible'.
What is the current behavior?
Currently the demo just sticks an input
in the md-select-header
. While that input
has a placeholder
, it lacks a number of the accessibility features of md-input
. There may also be some accessibility issues in the general interaction with the component and initial focus state as described in #9146.
CodePen and steps to reproduce the issue:
CodePen Demo which shows your issue:
https://material.angularjs.org/latest/demo/select#select-header
Detailed Reproduction Steps:
Test with screen reader.
What is the use-case or motivation for changing an existing behavior?
To align with the accessibility goals of this project.
Which versions of AngularJS, Material, OS, and browsers are affected?
AngularJS 1.1.7
Is there anything else we should know? Stack Traces, Screenshots, etc.
No
Metadata
Metadata
Assignees
Labels
P2: requiredIssues that must be fixed.Issues that must be fixed.a11yThis issue is related to accessibilityThis issue is related to accessibilityneeds: investigationThe cause of this issue is not well understood and needs to be investigated by the team or communityThe cause of this issue is not well understood and needs to be investigated by the team or communitytype: demos