Angular CDK Trap Focus 지시문을 사용하는 방법

포커스 트랩은 웹 애플리케이션 내에서 매우 중요한 접근성 기능입니다. 이 게시물에서는 먼저 이것이 무엇인지, 그다음 왜 중요한지 이해하는 데 도움을 주고, 마지막으로 필요할 때 Angular 앱 내에서 개념을 빠르고 쉽게 추가하는 방법을 보여 드리겠습니다. 그리고 Angular CDK 덕분에 꽤 쉽습니다. 좋아, 시작해 보자.

다양한 기기에서 웹을 쉽게 보고 듣고 사용할 수 있는 사람이라면 접근성에 대해 이해하거나 생각조차 하기 어려울 수 있습니다. 캔트.

포커스 트랩이란 무엇입니까?

포커스 트랩은 이러한 사람들에게 더 나은 경험을 제공하는 데 도움이 되는 기능입니다. 이는 특정 컨테이너 내에서 사용자 포커스를 관리하는 방법입니다.

예를 들어 모달을 생각해 보십시오. 사용자가 포커스를 관리하지 않고 모달을 여는 경우 탭 키를 사용하여 키보드를 통해 탐색을 시작하면 모달 뒤에 있는 항목이 계속 포커스를 받습니다. 이것은 이상하고 사용자가 기대하는 것과는 다릅니다. 그렇죠? 프로그래밍 방식으로 모달 내에서 초점을 맞춰야 합니다.

그러나 이것만으로는 충분하지 않습니다. 여기서 멈추면 모달을 탭하면서 결국 포커스 가능한 모든 항목을 탭하게 되고 다시 모달 뒤에 있는 원본 문서 내의 항목에 포커스를 맞추는 상태로 돌아갑니다.

대신 우리가 해야 할 일은 사용자가 모달의 마지막 항목에 초점을 맞출 때 초점이 다음 탭의 모달에서 초점을 맞출 수 있는 첫 번째 요소에 다시 배치되도록 초점을 잡는 것입니다.

이제 우리는 포커스 트랩이 무엇인지 알았으니 이 기능을 만들기 위해 어느 정도 노력이 필요하다는 사실을 깨닫기 시작했을 것입니다. 그렇죠?

글쎄요, Angular에는 없습니다. CDK에서는 A11yModule 의 cdkTrapFocus 지시문을 사용하면 매우 쉽습니다.

Angular cdkTrapFocus 지시문

예를 살펴보겠습니다. 여기 Vans 신발 브랜드를 위한 웹 앱이 있습니다.

상단에 가입 버튼이 있습니다. 클릭한 다음 탭하면 배경에 있는 항목 주위로 초점이 이동하는 것을 볼 수 있습니다.

우리가 원하는 건 아니죠?

좋습니다. cdkTrapFocus 를 추가해 보겠습니다. 이를 사용하기 위해 가장 먼저 해야 할 일은 A11yModule 을 가져와야 한다는 것입니다.

가입-modal.comComponent.ts

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

이 약어가 익숙하지 않은 분들을 위해 Ally는 접근성이라는 단어의 약어입니다. 이는 단어가 A로 시작하고 Y로 끝나며 그 사이에 11개의 문자가 있다는 개념에서 비롯되었습니다.

Angular CDK에는 접근성 모듈 내에 여러 가지 접근성 기능이 있으며 cdkTrapFocus 지시문은 그 중 하나입니다.

따라서 가져온 후에는 이제 템플릿 내에서 사용할 수 있습니다. 양식을 래핑하는 요소에 추가하기만 하면 됩니다.

가입-modal.comComponent.html

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

cdkTrapFocusAutoCapture @Input 사용하여 초기화에 초점 제공

좋은 소식은 cdkTrapFocus 지시문에 자동 초점 기능이 내장되어 있다는 것입니다. cdkTrapFocusAutoCapture @Input 사용할 수 있습니다. 이 입력은 초기화될 때 지시문 내에서 첫 번째 초점을 맞출 수 있는 항목에 자동으로 초점을 맞춥니다. 기본값은 false이므로 true 값을 제공해야 합니다.

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

이제 모달을 열면 이름 필드가 열릴 때 적절하게 초점이 맞춰집니다. 그리고 탭을 하면서 닫기 버튼에 도달하면 이름 필드로 돌아가게 됩니다. 또한 뒤로 탐색하기 위해 shift + tab 누르면 모달을 떠나지 않고 모두 역순으로 이동합니다.

따라서 모든 사용자에게 매우 유용할 뿐만 아니라 구현하기도 매우 쉽습니다.

마지막으로 주목해야 할 점은 트랩 포커스 지시문은 초기화 전에 마지막으로 포커스된 요소를 추적하므로 모달을 닫을 때 포커스가 해당 요소를 연 버튼으로 돌아간다는 것입니다.

좋습니다. 우리는 엄청난 양의 작업을 절약하고 모달의 접근성을 더욱 높였습니다.

실제로 보고 싶으십니까?

아래 stackblitz 예제에서 이러한 기술의 데모 코드와 예제를 확인하세요. 질문이나 의견이 있으시면 주저하지 말고 댓글을 남겨주세요.