JAWS reads the wrong <select> option if the <select> has hidden options

nikola-zitko commented 3 years ago

Summary

Go to https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

Paste the code provided below inside the editor and run the code

Navigate to the dropdown using JAWS

Observe the difference between the focused options and the read text.

NOTE: For the number of hidden options, that many options below from the focused one will JAWS read. e.g. one hidden option, JAWS reads the option below the focused one. Two hidden options, JAWS reads the second one below the focused one.

Expected result

JAWS should announce the focused option.

Actual result

JAWS announces the wrong option.

Example

<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option hidden value="volvo"></option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>
</body>
</html>

Additional Information

JAWS version and build number

JAWS Version 2021.2105.53 ILM

Operating System and version

Windows 10 Pro 20H2

Browser and version:

Chrome Version 91.0.4472.114

JAWS-test commented 3 years ago

A similar false output occurs when optgroup is used: https://github.com/FreedomScientific/VFO-standards-support/issues/243

menovak commented 3 years ago

hi nikola-zitko,

Not sure what is going on, but I hear the same incorrect item announced in both JAWS and NVDA (in Chrome)

I also don't know exactly why, but if you substitute for , .hidden { display: none; } in your code, it seems to clean up the incorrect item announcement - but NVDA will announce x of 4 items, even though only 3 are visible.

Another option is to replace hidden with disabled, as suggested by others - not sure if this is an option.

good luck mark

nikola-zitko commented 3 years ago

Hi @menovak, we're actually using both hidden and disabled. Refactoring and removing the hidden attribute would take a lot of dev and QA time since a huge platform is in question. Also announcing the wrong number of items is not ideal in our case.

I'm not sure if it's a JAWS or Chrome issue, but we would be more inclined to wait a fix on their end. We will have to see what to do, probably come up with some sort of a compromise if the issue persists.

Thanks for the help anyway!

menovak commented 3 years ago

hi nikola-zitko,

I totally understand how size can sometimes dictate choices. Generally, if we see the same behavior exhibited in NVDA and JAWS, we are not quick to point fingers at the screen readers so tracking the real cause of this issue down may take some time.

And for what it is worth, it seems to announce better in Firefox, but perhaps that is still not good enough for what you are seeking. I just dumped your code into an codepen and added a select element with the disabled attribute, but personally i like the hidden class better.

https://cdpn.io/menovak/debug/gOWbYab/xJAjOeYngOzk

Please let me know if there is anything else I can assist with, regards mark

menovak commented 3 years ago

hi nikola-zitko,

I had a little time, and did a bit of digging, and seems there is a bug in Chrome related to this - but I struggle to follow all the details.

https://bugs.chromium.org/p/chromium/issues/detail?id=759369

leads to :

https://github.com/whatwg/html/issues/3063

regards, mark