angular2中的Aria角色属性

Question

我觉得奇怪的是 ARIA 角色属性似乎在 Angular 中不起作用 - 至少对我来说 - 2. 我尝试给出 div 角色="listbox" 并定义children as role="option" 但它似乎仍然不起作用。

有人可以帮我吗？

    <div>
    <h2>Hello {{name}}</h2>
    <div [attr.aria-role]="listbox" tabindex="0" id="listbox1"  [attr.aria-activedescendant]="listbox1-1">
    <div [attr.aria-role]="option" id="listbox1-1" class="selected">Green</div>
    <div [attr.aria-role]="option" id="listbox1-2">Orange</div>
    <div [attr.aria-role]="option" id="listbox1-3">Red</div>
    <div [attr.aria-role]="option" id="listbox1-4">Blue</div>
    <div [attr.aria-role]="option" id="listbox1-5">Violet</div>
    <div [attr.aria-role]="option" id="listbox1-6">Periwinkle</div>
    </div>
    </div>

这是 plunker - https://plnkr.co/edit/Pex56Ou3BRInPCfoh6mX

Answer 1

每当你在属性绑定中传递任何东西时（[]），然后属性值使用组件上下文进行评估，这意味着当 attr.aria-role 值尝试评估时，它会检查内部的 option 值undefined（未定义）的组件上下文（this），因此您看不到 DOM.

上的属性

因此，要么将 option 变量放入您的组件中，其值为 'option'。或者你可以直接使用下面

[attr.aria-role]="'option'"

或

aria-role="option"

Forked Plunker

angular2中的Aria角色属性

Aria role attribute in angular2

html

wai-aria

angular

angular4-forms