Office UI Fabric ReactJS Dropdown可訪問性問題

Question

我在React.js中使用Office UI Fabric Dropdown。 我正在使用Keros for Web測試應用程序的可訪問性問題。

它顯示了此下拉列表的問題：

aria-valid-attr-value: ARIA attributes must conform to valid values
Fix the following: Invalid ARIA attribute value: aria-labelledby="usercountryRegion-label" 
Snippet: <div data-is-focusable="true" id="usercountryRegion" tabindex="0" aria-expanded="false" role="listbox" aria-labelledby="usercountryRegion-label" aria-describedby="usercountryRegion-option" aria-activedescendant="usercountryRegion-option" name="country" class="ms-Dropdown root_aecb6435">

我搜索了一些答案，得到的只是“確保每個屬性中的值正確拼寫並對應於有效值。”，但是我找不到解決方案。

Answer 1

在您的代碼中搜索“ usercountryRegion-label”。 aria-labelledby的值必須是另一個對象的ID 。 確保ID屬性（ 不是 NAME屬性）是您指向的元素的“ usercountryRegion-label”。

好：

<div id="usercountryRegion-label">Africa</div>

壞：

<div name="usercountryRegion-label">Africa</div>