Screen Reader announced incorrect result number when an option is selected

[derekhcchou]

I am working on making the page more accessible but have been struggling on this issue for several days. I created a regular element and had most of the required aria attributes in it. When testing it, I turned on VoiceOver on Mac and run the application on Google Chrome. When one of the option was selected and the dropdown list collapsed, the screen reader read: "0 results available. Select Option Dropdown List is focused .....". Why is it saying "0 results available" from the script even though there are multiple options in the dropdown? Or is there any way to remove this part from the script? Thanks a lot for helping me!!

[ebonow]

@derekhcchou sorry for the long delay.

There is currently a screenReaderStatus which is used to return the results count which is used by the formatting functions to read back the number of results. It seems reasonable that this should only be read back when the menuIsOpen and options are being displayed which does not appear to be the case.

I apologize for the inconvenience for this, but until we get a fix in place, it would be possible to track/control the menuIsOpen state and return an empty string for this prop if the menu is not open.

const [menuOpen, setMenuOpen] = useState(false);
const onMenuOpen => setMenuOpen(true);
const onMenuClose => setMenuOpen(false);

const screenReaderStatus = ({ count }) => (
  menuOpen 
    ? `${count} result${count !== 1 ? 's' : ''} available`
    : ''
);

return <Select 
  onMenuOpen={onMenuOpen} 
  onMenuClose={onMenuClose} 
  screenReaderStatus={screenReaderStatus}
  {...otherProps}
/>

I will open an issue so that we can track this and resolve it.

[ebonow]

Created issue here: #4411