Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
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

Open
@Splaktar

Description

@Splaktar

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.a11yThis issue is related to accessibilityneeds: investigationThe cause of this issue is not well understood and needs to be investigated by the team or communitytype: demos

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions