그리드 팝업이 있는 편집 가능한 콤보박스 예제

다음 예제는 제안 된 값 팝업에 그리드를 사용하는 콤보박스 설계 패턴을 구현합니다.

이 예제에서, 사용자는 상자에 값을 입력하거나 그리드 팝업에 존재하는 값 모음에서 선택하여 과일이나 채소 이름을 지정할 수 있습니다. 팝업은 텍스트상자가 값 제안 모음의 항목 중 하나의 이름의 시작과 일치하는 문자를 포함한 후에 사용 가능해집니다. 사용자는 텍스트상자에 어떤 값이든 입력할 수 있습니다; 이 구현은 값 제안 모듬에 있는 값으로 입력을 제한하지 않습니다.

제안 된 값을 표현하는 그리드는 두 개의 열을 가집니다. 그리드의 각 행은 한 개 제안을 나타냅니다; 열 1은 과일이나 채소의 이름을 포함하고 열 2는 과일인지 채소인지의 여부를 가리킵니다.

유사한 예는 다음과 같습니다:

예제

접근성 특성

브라우저는 초점과 마찬가지로 aria-activedescendant로 참조된 엘리먼트의 가시성을 관리하지 않습니다. 키보드 이벤트가 목록상자의 활성 선택 항목을 변경할 때, 자바스크립트는 aria-activedescendant로 참조된 선택 항목을 뷰(view) 안으로 스크롤합니다. aria-activedescendant 가시성을 관리하는 것은 콘텐츠의 크기를 키우기 위해 브라우저의 확대 기능을 사용하는 사용자에 대한 접근성에 필수적입니다.

키보드 지원

이 페이지의 예제 콤보박스는 다음의 키보드 인터페이스를 구현합니다. 키보드 인터페이스에 대한 다른 변형과 옵션은 콤보박스 설계 패턴의 키보드 인터랙션 섹션에 기술되어 있습니다.

Textbox

키 기능
Down Arrow 그리드가 노출되어 있다면. 초점을 첫 번째 제안 된 값으로 이동시킵니다.
Up Arrow 그리드가 노출되어 있다면, 초점을 마지막 제안 된 값으로 이동시킵니다.
Escape
  • 그리드가 노출되어 있다면, 그리드를 닫습니다.
  • 그리드가 노출되어 있지 않다면, 텍스트상자를 지웁니다.
표준 단일 라인 텍스트 편집 키
  • 키는 Delete와 Shift + Right Arrow 같이, 커서 이동과 텍스트 조작에 사용됩니다.
  • type=text를 가진 HTML input은 텍스트상자로 사용되므로 브라우저는 플랫폼별 편집 키를 제공할 것입니다.

그리드 팝업

참고: 시각적 초점이 그리드에 있는 경우, DOM 초점은 텍스트상자에 유지되고 텍스트상자의 aria-activedescendant 값이 시각적으로 초점을 얻은 것은 그리드의 엘리먼트를 가리키는 값으로 설정됩니다. 키보드 명령에 대한 다음 설명이 초점을 언급하는 경우, 이는 시각적 초점 표시기를 가리킵니다. 이 초점 관리 기법에 대한 더 자세한 정보는 초점 관리를 위해 aria-activedescendant 사용하기를 참고하세요.

키 기능
Enter
  • 텍스트상자 값을 초점을 포함하고 있는 행의 첫 번째 셀의 콘텐트로 설정합니다.
  • 그리드 팝업을 닫습니다.
  • 텍스트상자에 초점을 설정합니다.
Escape
  • 그리드를 닫습니다.
  • 텍스트상자에 시각적 초점을 설정합니다.
Down Arrow
  • 초점을 다음 행으로 이동시킵니다.
  • 초점이 마지막 행에 있다면, 초점을 첫 번째 행으로 이동시킵니다.
  • 참고: 이 행 변경 동작은 Home과 End가 아래 기술 된 대로 편집 커서를 이동시킬 경우 유용합니다.
Up Arrow
  • 초점을 이전 행으로 이동시킵니다.
  • 초점이 첫 번째 행에 있다면, 초점을 마지막 행으로 이동시킵니다.
  • 참고: 이 행 변경 동작은 Home과 End가 아래 기술 된 대로 편집 커서를 이동시킬 경우 유용합니다.
Right Arrow
  • 초점을 다음 셀로 이동시킵니다.
  • 초점이 행의 마지막 셀에 있다면, 다음 행의 첫 번째 셀로 초점을 이동시킵니다.
  • 초점이 마지막 행의 마지막 셀에 있다면, 첫 번째 행의 첫 번째 셀로 초점을 이동시킵니다.
Left Arrow
  • 초점을 이전 셀로 이동시킵니다.
  • 초점이 행의 첫 번째 셀에 있다면, 이전 행의 마지막 셀로 초점을 이동시킵니다.
  • 초점이 첫 번째 행의 첫 번쩨 셀에 있다면, 마지막 행의 마지막 셀로 초점을 이동시킵니다.
Home 초점을 텍스트상자로 이동시키고 이동시키고 편집 커서를 필드 시작 부분에 위치시킵니다.
End 초점을 텍스트상자로 이동시키고 편집 커서를 필드 마지막 부분에 위치시킵니다.
출력 가능한 문자
  • 초점을 텍스트상자로 이동시킵니다.
  • 텍스트상자에 문자를 입력합니다.

Role, Property, State, Tabindex 어트리뷰트

이 페이지의 예제 콤보박스는 다음 ARIA 역할(role), 상태(state), 속성(property)를 구현합니다. 역할(role), 상태(state), 속성(property)을 적용하는 다른 방법에 대한 정보는 콤보박스 설계 패턴의 역할(role), 상태(state), 속성(property) 섹션에서 볼 수 있습니다.

Textbox

역할(role) 어트리뷰트 엘리먼트 사용법
combobox input[type="text"] 엘리먼트를 콤보박스로 식별시킵니다.
aria-haspopup="grid" input[type="text"] 콤보박스가 grid를 팝업하여 값을 제안할 수 있음을 나타냅니다.
aria-expanded="false" input[type="text"] 팝업 엘리먼트가 노출 되어 있지 않음을 나타냅니다.
aria-expanded="true" input[type="text"] 팝업 엘리먼트가 노출되어 있음을 나타냅니다.
id="string" input[type="text"]
  • 접근 가능한 이름을 제공하기 위해 label 엘리먼트의 for 어트리뷰트가 참조됩니다.
  • 레이블을 클릭하는 것이 input에 초점을 주기 때문에 HTML input 엘리먼트에 대한 이름 지정 방법이 권장됩니다.
aria-autocomplete="list" input[type="text"] input의 자동완성 동작이 팝업에 가능한 값 목록을 제안하는 것임을 나타냅니다.
aria-controls="IDREF" input[type="text"] 팝업 엘리먼트가 제안된 값을 나열함을 나타냅니다.
aria-activedescendant="IDREF" input[type="text"]
  • 그리드의 셀이 키보드 초점을 가지는 것으로 시각적으로 나타난다면, 그 셀을 가리킵니다.
  • Down Arrow과 같은 탐색 키가 눌렸을 경우, JavaScript가 값을 변경합니다.
  • input 엘리먼트에 DOM 초점이 유지되는 동안 어플리케이션이 어떤 엘리먼트가 초점을 얻은 것으로 간주하는지를 보조기술이 알도록 합니다.
  • 이 초점 관리 기법에 대한 더 자세한 정보는 초점 관리를 위해 aria-activedescendant 사용하기를 참고하세요.

그리드 팝업

역할(role) 어트리뷰트 엘리먼트 사용법
grid div 엘리먼트를 grid로 식별시킵니다.
aria-labelledby="IDREF" div 콤보박스에 의해 제어되는 grid 엘리먼트에 대한 레이블을 제공합니다.
row div 행에 대한 모든 셀을 포함하는 엘리먼트를 식별시킵니다.
aria-selected="true" div
  • 셀을 포하하는 행이 시각적으로 선택된 것으로 나타나는 경우 셀에 지정됩니다.
  • 그리드의 셀이 aria-activedescendant로 참조 될 때에만 발생합니다.
gridcell div 단일 셀에 대한 콘텐츠를 포함하는 엘리먼트를 식별시킵니다.

Javascript와 CSS 소스 코드

HTML Source Code