# 자동완성 적용 사례

### combobox = input + listbox

![](/files/-LRV_Yeli6AO-VI9iiZv)

출도착 도시 및 공항을 선택할 때 자동완성 기능을 사용할 수 있으며 키보드로 사용이 가능하다. 자동완성 컨테이너는`role="combobox"`를 가지게 되고, 검색결과가 표출되는 영역은 `role="listbox"`를 가진다. 

combobox는 input과 listbox의 조합으로 각 위젯의 키보드 인터랙션 방법으로 사용할 수 있어야 한다. 또한 자동완성 기능이 포함되어 있으므로 검색결과를 스크린리더에서도 읽을 수 있어야 한다.

### role="combobox"

상단 input에는 `role="combobox"`를 삽입하고 aria-autocomplete는 list를 삽입한다.\
하단 listbox가 펼쳐질 때는 `aria-expanded="true"`, 닫혀졌을 때는 false가 삽입된다.  검색된 결과를 읽어줄 수 있게 비어있는 \<div>요소에 `role="status"`와 `aria-live="polite"`를 삽입한다.

![](/files/-LSmKQdZXt1epFhaJfoW)

```markup
<input type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" 
 aria-owns="결과 리스트박스 id" aria-activedescentant="선택된 리스트박스의 옵션 id">
 //검색결과 읽는 영역
 <div role="status" aria-live="polite"></div>
```

#### aria-owns (나와 내 아이들과의 연결고리)

aria-owns 속성은 시각적으로는 어떤 하위 메뉴가 상위 메뉴 근처에 배치되어 있지만, DOM 상위 항목의 바로 하위 항목일 수는 없는 경우에는 `aria-owns`를 사용하여 하위 메뉴를 상위 메뉴의 하위 메뉴로 스크린 리더에 알려줄 때 사용할 수 있다.

#### aria-activedescendant (현재 선택된 내 아이)

input 에 현재 하위 항목 중 선택된 값을 스크린리더에게 알려줄 때 aria-activedescendant 를 사용할 수 있다. 현재 선택한 목록 항목에 맞춰 계속 업데이트된 상태로 나타낼 수 있으며 스크린리더는 현재 선택한 항목이 마치 포커스된 항목인 것처럼 나타나게 할 수 있습니다.

### role="listbox"

![](/files/-LSmhMbaeLZCxu-3dXhC)

하위 영역 컨테이너는 `role="listbox"`와 상위 input의 aria-owns와 연결되는 id 값을 가지고, 각각의 하위 리스트는 `role="option"` 과 선택되었을 때는 `aria-selected="true"`와 상위 input에 삽입된 aria-activedescendant 속성과와 연결되는 id값을 가지게 되고, 선택되지 않았을 때는 `aria-selected="false"`를 가진다.

```markup
<ul role="listbox" id="xxx">
    <li role="option" aria-selected="true">A Coruna(LCG)</li>
    <li role="option" aria-selected="false">Dallas/Love Field(DAL), TX</li>
    <li role="option" aria-selected="false">Gran Canaria(LPA)</li>
    <li role="option" aria-selected="false">La Crosse(LSE),WI</li>
    <li role="option" aria-selected="false">Lafayette(LFT),LA</li>
</ul>
```

### 복잡한 키보드 인터랙션

`role="combobox"`는 스크린리더 사용자가 일반적으로 기대하고 있는 키보드 인터랙션이 있으며 아래와 같다.&#x20;

* **Alt + 아래 방향키** : 비어있는 input에서 리스트가 닫혀있을 때 열린다.
* **Enter or Space bar** : 리스트에서 Enter와 Space bar를 누르면 항목은 선택되고 리스트는 닫힌다.
* **상하 방향키** : 리스트 내에서 위아래로 탐색한다.
* **ESC** : 리스트박스가 닫히고 input 내의 텍스트는 삭제된다.
* 비어있는 input에 알파벳을 한 개씩 누르면 매칭되는 결과값만 리스트에 남는다. (Native 셀렉트박스와 동일한 기능)

스크린리더로 LAX (로스앤젤레스)을 한 글자씩 입력하다가 리스트를 탐색해보면 아래와 같이 들린다.

> 출발지 combobox 닫혀짐\
> 편집창 자동완성\
> \&#xNAN;***L***\
> 24개의 검색 결과가 있습니다.\
> 펼쳐짐\
> \&#xNAN;***A*** \
> 6개의 검색 결과가 있습니다.\
> La Crosse(LSE), WI\
> Lafayette(LFT), LA\
> Lansing(LAN), MI\
> Las Vegas(LAS), NV, McCarran\
> Los Angeles(LAX), CA<br>

{% embed url="<https://youtu.be/5NYGkMG36mA>" %}

#### <mark style="color:orange;">AOA동영강 강의</mark>

{% embed url="<https://youtu.be/uZ5ttPknnJw>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/autocomplete.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.