Eingabehilfen für die Dropdown-Komponente

Question

Ich implementiere Barrierefreiheit für Dropdown-Komponente, die Besonderheit meiner Dropdown ist es füllt Werte im Optionsmenü nur beim Öffnen Dropdown, dh es im laufenden Betrieb kompiliert die Vorlage und hängt an die Dropdown-Box.

Dropdown HTML: 

<div id="dropdown" ng-click="openDropdown()"> 
    <div id="selectedValue" role="listbox" tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div> 
</div> 

DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) : 

<div id="dropDownMenu"> 
    <li ng-click="selectItem()" role="option">item1</li> 
    <li ng-click="selectItem()" role="option">item2</li> 
</div> 

Ich bin vor zwei Probleme

1. Wie mein #dropdownMenu auf Klick von #dropdown (dynamische Vorlage Generation) Backen haben keinen Zugriff auf #dropdownMenu generiert wird, wenn der Fokus so #selectedValue kommt es gibt nicht die Anzahl der Optionen usw. an, wie im Fall einer typischen Auswahlbox.

2. Ich gebe aria-label = "{{selectedVal}}" für #selectedValue also beim Klick auf die Pfeiltasten javascript kümmert sich um die Aktualisierung von selectedVal, obwohl #dropdownMenu nicht geöffnet ist, aber der Wert von selectedVal wurde nicht bekanntgegeben durch Backen 16.0, es meldet es nur erst einmal als Benutzer Tabs hinein. Beachte, dass dies in Backen 14.0 funktioniert.

Wir freuen uns für einige Lösungen ....

Answer 1

1. Hinzufügen aria-live = höflich sollte dieses Problem zu beheben.
2. Gibt es einen Grund, warum Sie keine Standard-Auswahlbox verwenden und die Optionselemente mit Ihren dynamischen Inhalten füllen? Das würde die Notwendigkeit, eine Aria-Eigenschaft mit der aktuellen Option zu aktualisieren, beseitigen, da die Screenreader sie selbst finden. Aria-Label sollte auch der Name der Selectbox (oder deren Zweck) und nicht die ausgewählte Option sein. Wenn Sie eine HTML-Auswahl mit Optionen verwenden, können Sie auch den Tabindex und Aria-Live entfernen, da die Eingaben für native Formulare standardmäßig vollständige Unterstützung für Tastatur und Bildschirmleser bieten.