下拉组件

Question

我正在实现下拉组件的可访问性，我的下拉列表的特殊功能是它只在打开下拉列表时填充选项菜单中的值，这意味着它会动态编译模板并附加到下拉框。

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>

我面临两个问题

1. 当我的#dropdownMenu点击#dropdown（动态模板生成）生成时，当焦点到达#selectedValue时，下颚无法访问#dropdownMenu，因此它不会宣布选项的数量等如果是典型的选择框。

2. 我正在给aria-label =＆＃34; {{selectedVal}}＆＃34;对于#selectedValue所以点击箭头键javascript负责更新selectedVal，即使#dropdownMenu没有打开，但是下颚16.0没有公布selectedVal的更改值，它只会在用户选中它时第一次宣布它.Noted that这在下巴14.0中工作得很好。

期待一些解决方案......

Answer 1

1. 添加aria-live = polite应解决此问题。
2. 您是否有理由不使用标准选择框并使用动态内容填充选项元素？这将消除使用当前选项更新aria属性的需要，因为屏幕阅读器将自己找到它。 aria-label也应该是selectbox的名称（或其目的）而不是其选择的选项。如果您使用带有选项的HTML选择，则可以删除tabindex和aria-live，因为默认情况下本机表单输入具有完整的键盘和屏幕阅读器支持。

Answer 2

您可能应该等到元素被渲染并出现在DOM中，然后才使用本机函数.focus()将焦点设置到第一个子菜单项。这样就可以了。

但是...请确保如果请求花费的时间太长，并且用户已经离开页面的其他位置在该页面上进行其他操作，那么在这种情况下，您就不会浪费他的注意力使他回到下拉菜单否则他可能会很生气。

对于交互元素（无论使用tabindex=0的地方），也不要使用ng-click，我建议您使用实际的本机元素，例如<a>或<button>。这样，您可以确保元素既可以通过键盘也可以在视觉上聚焦，并且对所有keyboard keys which the users are used to use and thus expect it to react（例如SPACE或ENTER）做出反应，而无需手动实现。