Elementy niestandardowe i dostępność

Question

Chciałbym zaimplementować widget listbox przy użyciu aktualnych specyfikacji składników sieci. Co więcej, wynikowy listbox powinien być zgodny ze standardem ARIA. Utworzenie widgetu listbox powinno być tak proste, jak:

<x-listbox> 
    <x-option>Option 1</x-option> 
    <x-option>Option 2</x-option> 
</x-listbox> 

Dla celów czystości i enkapsulacji wszystko inne powinno być renderowane w cieniu domowym. Aby zaimplementować ten widget, zarejestrowano dwa niestandardowe elementy: <x-listbox> i <x-option>. Element najwyższego poziomu DOM cienia <x-listbox> jest <div> że niesie role=listbox i aria-activedescendent atrybuty dostępności (nie chcę tych atrybutów na elemencie <x-listbox> ponieważ są szczegóły implementacji).

Aby aria-activedescendent do pracy, potrzebny jest identyfikator na elementach opcjonalnych. Umieszczanie identyfikatorów bezpośrednio na elementach <x-option> nie będzie działać z dwóch powodów: Po pierwsze, spowodowałoby to zanieczyszczenie przestrzeni nazw dokumentu, który korzysta z widgetu listbox. Po drugie, a co ważniejsze, identyfikatory nie działają na granicach cienia (co jest jednym z celów domeny cienia), więc identyfikatory tych opcji muszą znajdować się w tym samym cieniu, co atrybut <div> z atrybutem aria-activedescendent.

Rozwiązanie tego będzie otaczać każdy <x-option> która jest uznana jako zawartość wnętrza dom cienia <x-listbox> innego <div> (należącego do tej strefy DOM), w którym ID mogą być wprowadzane.

Moje pytanie brzmi: czy to jest właściwa droga i jak zaimplementować to za pomocą niestandardowego elementu i shadow dom web apis?

Answer 1

Twój prawdopodobnie powinien lepiej to zaimplementować, tworząc element select (używając JavaScript). Powinno to zapewnić, że czytniki ekranu rozpoznają to poprawnie jako dane wejściowe do wybierania wartości/wartości z listy.

Dodaj element select jak ten poniżej elementu <x-listbox>:

<select class="only-screenreader"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
</select> 

Następnie dodać aria-hidden="true" do elementu niestandardowego <x-listbox>.

Na koniec zastosuj CSS, aby uczynić element wybierania ekranu jako niewidoczny.

.only-screenreader { 
    position:absolute; 
    left:-10000px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden; 
} 

To moje podejście, ale może jest lepszy.