select icon indicating copy to clipboard operation
select copied to clipboard

OptionList accessibility doesn't work correctly?

Open krailler opened this issue 5 years ago • 0 comments

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,

krailler avatar Apr 14 '20 10:04 krailler