Question

我觉得奇怪的是ARIA角色属性似乎不起作用 - 至少对我来说 - 在Angular 2中。我尝试给出一个div角色=＆＃34; listbox＆＃34;并将孩子定义为角色=＆＃34;选项＆＃34;但它似乎仍无效。

有人可以帮助我吗？

    <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>

这里是吸血鬼 - https://plnkr.co/edit/Pex56Ou3BRInPCfoh6mX

Answer 1

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

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

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

或

aria-role="option"

Forked Plunker

angular2中的Aria角色属性

1 个答案: