html - angular2中的Aria Angular 色属性

Question

我觉得奇怪的是 ARIA role 属性似乎在 Angular 2 中不起作用——至少对我来说是这样。我试着给一个 div role="listbox"并将子项定义为 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

每当您在属性绑定(bind)([]) 中传递任何内容时，然后属性值会根据组件上下文进行评估，这意味着当attr.aria-role 值尝试评估时，它检查组件上下文 (this) 中的 option 值 undefined(未定义)，因此您在 DOM 上看不到属性。

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

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

或

aria-role="option"

Forked Plunker