Cách sử dụng Chỉ thị tập trung vào bẫy CDK góc

Bẫy tiêu điểm là một tính năng trợ năng rất quan trọng trong ứng dụng web. Trong bài đăng này, trước tiên tôi sẽ giúp bạn hiểu nó là gì, sau đó tại sao nó quan trọng và cuối cùng, tôi sẽ chỉ cách thêm khái niệm này một cách nhanh chóng và dễ dàng vào ứng dụng Angular của bạn khi cần. Và điều đó khá dễ dàng nhờ Angular CDK. Được rồi, bắt đầu thôi.

Khả năng truy cập có thể hơi khó hiểu hoặc thậm chí khó nghĩ đến nếu bạn là người có thể nhìn, nghe và sử dụng web một cách dễ dàng với các thiết bị khác nhau, do đó, bạn cũng có thể dễ dàng tạo ra những thứ không hoạt động tốt cho những người không thể.

Bẫy tập trung là gì?

Bẫy tập trung là một tính năng giúp mang lại trải nghiệm tốt hơn cho những người này. Đó là một cách quản lý tiêu điểm của người dùng trong một vùng chứa nhất định.

Lấy ví dụ, một phương thức. Nếu người dùng mở một phương thức mà không quản lý tiêu điểm thì khi họ bắt đầu điều hướng qua bàn phím bằng cách sử dụng phím tab, các mục phía sau phương thức đó sẽ tiếp tục nhận được tiêu điểm. Điều này thật kỳ lạ và không phải những gì người dùng mong đợi, phải không? Chúng ta cần tập trung chúng theo phương thức theo chương trình.

Nhưng điều này là chưa đủ; nếu chúng ta dừng ở đây, khi chúng ta duyệt qua phương thức, thì cuối cùng, chúng ta sẽ duyệt qua tất cả các mục có thể lấy tiêu điểm và sau đó, chúng ta sẽ quay lại tập trung vào các mục trong tài liệu gốc phía sau phương thức.

Thay vào đó, những gì chúng ta cần làm là giữ tiêu điểm để khi người dùng tập trung vào mục cuối cùng trong phương thức, tiêu điểm sẽ được đặt lại vào phần tử có thể lấy tiêu điểm đầu tiên trong phương thức trên tab tiếp theo.

Được rồi, bây giờ chúng ta đã biết bẫy tập trung là gì, có lẽ chúng ta bắt đầu nhận ra rằng cần phải nỗ lực để tạo ra chức năng này, phải không?

Chà, không phải trong Angular. Với CDK, việc này khá dễ dàng bằng cách sử dụng lệnh cdkTrapFocus từ A11yModule .

Chỉ thị Angular cdkTrapFocus

Hãy xem một ví dụ. Ở đây, chúng tôi có một ứng dụng web cho thương hiệu giày Vans.

Ở trên cùng, chúng tôi có nút đăng ký. Khi chúng ta nhấp vào nó và sau đó di chuyển tab xung quanh, chúng ta có thể thấy tiêu điểm đang di chuyển xung quanh các mục ở chế độ nền.

Không phải những gì chúng ta muốn, phải không?

Được rồi, hãy thêm cdkTrapFocus . Điều đầu tiên chúng ta cần làm để sử dụng nó là chúng ta cần nhập A11yModule .

đăng ký-modal.comComponent.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }

Dành cho những ai chưa quen với từ viết tắt này, Ally là viết tắt của từ khả năng tiếp cận. Nó xuất phát từ khái niệm rằng từ bắt đầu bằng chữ A, kết thúc bằng chữ Y và có 11 ký tự ở giữa.

Angular CDK có một số tính năng trợ năng trong mô-đun trợ năng của nó và lệnh cdkTrapFocus là một trong số đó.

Vì vậy, khi chúng tôi đã nhập nó, bây giờ chúng tôi có thể sử dụng nó trong mẫu. Chúng ta chỉ cần thêm nó vào một phần tử bao bọc biểu mẫu của chúng ta.

đăng ký-modal.comComponent.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 

Tập trung vào việc khởi tạo với cdkTrapFocusAutoCapture @Input

Tin vui là lệnh cdkTrapFocus có tính năng tự động lấy nét được tích hợp sẵn. Chúng ta có thể sử dụng cdkTrapFocusAutoCapture @Input . Đầu vào này sẽ tự động tập trung vào mục có thể lấy tiêu điểm đầu tiên trong lệnh khi nó được khởi tạo. Giá trị mặc định là sai nên chúng ta cần cung cấp giá trị đúng.

 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>

Bây giờ, khi chúng ta mở phương thức, trường tên sẽ được tập trung chính xác khi nó được mở. Và khi chúng ta xem qua tab, khi đến nút đóng, chúng ta sẽ quay lại trường tên. Ngoài ra, nếu chúng ta nhấn shift + tab để điều hướng lùi, chúng ta sẽ đi theo thứ tự ngược lại mà không rời khỏi phương thức.

Vì vậy, nó thực sự không chỉ cực kỳ hữu ích cho tất cả người dùng mà còn cực kỳ dễ thực hiện.

Một điều cuối cùng cần lưu ý, chỉ thị tiêu điểm bẫy theo dõi phần tử được lấy nét cuối cùng trước khi khởi tạo nó, vì vậy khi chúng ta đóng phương thức, tiêu điểm sẽ được trả về nút đã mở nó.

Thật tuyệt, chúng tôi vừa tiết kiệm được rất nhiều công việc và làm cho phương thức của chúng tôi dễ tiếp cận hơn.

Bạn muốn thấy nó hoạt động?

Hãy xem mã demo và ví dụ về các kỹ thuật này trong ví dụ về stackblitz bên dưới. Nếu bạn có bất kỳ câu hỏi hoặc suy nghĩ nào, đừng ngần ngại để lại nhận xét.