angular / angular/components

Accessibility: mat-form-field redundant focus on Android WebView with keyboard

Đang mở
#31,669 0 bình luận 6 reaction 1 người được giao Được @adolgachev nhận Xem trên GitHub
Accessibility area: material/form-field P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When navigating an Angular Material application within an **Android WebView** using an external keyboard (Accessibility), the `

` inside a `` incorrectly receives keyboard focus.

This is caused by a known behavior in **Android's WebView** where any element with a keyboard event is added to the tab order. The div has a click listener, presumably to focus the native `` when any part of the field is clicked.

This results in a redundant tab stop, creating a confusing navigation experience for keyboard users.

The recommended fix is to add `tabindex="-1"` to the div.mat-mdc-text-field-wrapper. This will remove the element from focus sequence while preserving its click functionality.

The error probably occurs in other Angular Material components, so please fix it there as well.

### Reproduction

Sample usage of component - to be verified on Adroid WebView!
**StackBlitz link:** https://stackblitz.com/edit/components-issue-starter-jwyrngj8?file=src%2Fmain.ts

**Steps to reproduce:**
1. Create a basic Angular application that includes a form with `` matInput component.
2. Build this application and run it inside an Android WebView (e.g., in a Capacitor, Cordova, or native Android project).
3. Connect physical keyboard to the Android device (e.g. bluetooth keyboard connected to Mobile with Android).
4. Open the app and use the Tab key to navigate through the page elements.

### Expected Behavior

When tabbing towards a mat-form-field, focus should move directly from the previously focused element to the inner `` element. The wrapper _div (.mat-mdc-text-field-wrapper)_ should be skipped entirely in the tab order, as it is not an interactive control itself.

### Actual Behavior

The keyboard focus first lands on the _div.mat-mdc-text-field-wrapper_. The user must then press Tab a second time to move focus from the wrapper to the actual `` element. This creates a "ghost" tab stop that provides no user-facing functionality and disrupts the logical navigation flow.

### Environment

- **Angular:** any from 5.2.5 to 20.1.5 (latest)
- **CDK/Material:** any from 5.2.5 to 20.1.5 (latest)
- **Browser(s):** Android System WebView
- **Operating System:** verified on Android 14 and 15

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.