Office UI Fabric ReactJS Dropdown Accessibility issue

Question

I am using Office UI Fabric Dropdown in React.js. I am testing the application for accessibility issues using Keros for Web.

It is showing this issue for dropdowns:

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

I searched for some answer and all I got is "Ensure the value inside each attribute is spelled correctly and corresponds to a valid value.", but I could not find a solution to this.

Answer 1

Search your code for "usercountryRegion-label". The value of aria-labelledby must be the ID of another object. Make sure the ID attribute (not the NAME attribute) is "usercountryRegion-label" of the element you're pointing to.

Good:

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

Bad:

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