OptionList accessibility doesn't work correctly?
Hello :)
I saw on the code, that the OptionList renders a "listbox" role for accessibility, and that function calls renderItem https://github.com/react-component/select/blob/bdbcdf6b10a93b5a7e2568df81b5f44a53c52438/src/OptionList.tsx#L230-L238 but, the value always is the prop "value", and this prop doesn't contain the real description. I saw also that the list use "mergedLabel" conditional with childrenAsData to use the prop "children". https://github.com/react-component/select/blob/bdbcdf6b10a93b5a7e2568df81b5f44a53c52438/src/OptionList.tsx#L291 https://github.com/react-component/select/blob/bdbcdf6b10a93b5a7e2568df81b5f44a53c52438/src/OptionList.tsx#L316
Why the renderItem for the listbox is not using that?
Changing the function like this works perfectly.
function renderItem(index: number) {
const item = memoFlattenOptions[index];
const value = item && (item.data as OptionData).value;
+ const mergedLabel = childrenAsData ? item && item.data.children : item && item.data.label;
return item ? (
<div key={index} role="option" id={`${id}_list_${index}`} aria-selected={values.has(value)}>
- {value}
+ {mergedLabel || value}
</div>
) : null;
}
Any thoughts? Thanks,