optgroup is not output for drop-down lists (Firefox)

JAWS-test commented 5 years ago

Summary

optgroup is not output

save as HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>select optgroup</title>
</head>
<body>
    <label for=1>ingredients 1</label><br>
    <select size=6 id=1>
        <optgroup label=vegetables>
            <option>tomato
            <option selected>carrot
        </optgroup>
        <optgroup label=fruits>
            <option>apple
            <option>pear
        </optgroup>
    </select>
    <label for=2>ingredients 2</label><br>
    <select id=2>
        <optgroup label=vegetables>
            <option>tomato
            <option>carrot
        </optgroup>
        <optgroup label=fruits>
            <option>apple
            <option>pear
        </optgroup>
    </select>
</body>
</html>

Navigate with Tab key, arrow keys, C, F, overview (INS+Ctrl+C, INS+F5), with arrow keys in forms mode (after focusing the select elements)

Expected result

optgroup is output with different navigation methods
Output is consistent across different browsers
Output is consistent with select size=1 and select size>1

Actual result

optgroup is not output with most navigation methods (and never with Chrome)
The output differs from browser to browser
The output differs between select size=1 and select size>1.
The use of optgroup sometimes leads to incorrect output, especially with Chrome

Some of the problems have existed for many years.

Firefox

Output for tab and arrow key navigation within select element only for select size>1
No output for select size=1

Chrome

No output for select size=1 and select size>1
With select size>1 wrong output of the list entries with arrow key navigation within the select element (the focused element is not output but an other element)
When navigating with the arrow keys within the select element, the label, role and operating instructions are output again when changing to a new optgroup. In addition, JAWS automatically switches from Forms Mode to Reading Mode before the last list entry, outputting "readonly"

IE

Output for tab and arrow key navigation within select element only for select size=1 but only when the list is closed
No output for select size>1 but the optgroup elements are counted as list entries, so that e.g. the fourth of four elements is output as "6 of 6"

Recommendation

Since many other problems occur in connection with the output of select elements (this is especially true for select size>1 and select multiple), it is recommended not to use them and to use checkboxes (multiple selection) or radio buttons (single selection) instead. Instead of optgroup, fieldset and legend can be used.

Additional Information

JAWS version and build number

JAWS 2019.1906.10

Operating System and version

Windows 8

Browser and version:

Internet Explorer 11.0.9600.19431 Chrome 76.0.3809.100 Firefox 68.0.2

MotassemJa commented 1 year ago

I believe this is a duplicate of #46

JAWS-test commented 1 year ago

@MotassemJa

I believe this is a duplicate of https://github.com/FreedomScientific/standards-support/issues/46

This is partly correct, but not completely:

It's true for Chrome and Edge. In fact, the group is still not transmitted to the Accessibility API and therefore the screenreaders (JAWS, NVDA etc.) cannot output the group.
It's not true for Firefox. Firefox correctly transmits the group to the Accessibility API. NVDA also outputs the group label correctly in the selection list and open drop-down list. JAWS only outputs the group label for the selection list, but not for the open drop-down list although JAWS recognises the groups and therefore outputs the list entries with the number and position within the group and not within the entire list. I adjust the title of the issue.
When navigating through the closed drop-down list, neither JAWS nor NVDA with Firefox output the groups and their labels. One might think that this is correct because they are not displayed visually either. But it is still problematic because mouse users will open the list (and thus always see the groups), while screen reader users will not usually open the list

Example: https://codepen.io/jaws-test/pen/QWzQoPE

JAWS-test commented 1 year ago

As long as the problem is not solved, the ARIA-listbox with grouping is a good workaround

MotassemJa commented 1 year ago

@JAWS-test thanks for the detailed reply. When using the aria-listbox, JAWS will not announce the label of each group. On the other hand, using a treeview would make JAWS announce it. Do you believe I should extend the listbox to force JAWS to read the labels of each group, or just use the treeview?

JAWS-test commented 1 year ago

@MotassemJa

When using the aria-listbox, JAWS will not announce the label of each group

I cannot confirm that. JAWS 2023 (and older versions), in combination with Firefox, Chrome and Edge, outputs the group label correctly when navigating through the ARIA listbox with the arrow keys. Which test environment are you using?

stevefaulkner commented 10 months ago

test case

stevefaulkner commented 10 months ago

I have spent some time working on this issue. What i have found is that (I think its due to how native select>optgroup>option is rendered), it differs between Firefox and Chrome and between size=1 and size>1 the differences effect both NVDA and JAWS and there are disparities between how the information is announced (or not announced) across browsers and screen readers.

From the chrome issue:

In any case, we need to refactor our support for <select>, which is a medium to large task.

In the meantime, this is an unfortunate gap in our support.

While @JAWS-test suggests using ARIA listbox as a work around:

As long as the problem is not solved, the ARIA-listbox with grouping is a good workaround

I have found through trial and error, a work around, so native selects can be coded (with a little ARIA) to consistently announce the information in both NVDA and JAWS in Firefox and Chrome.

Using aria-labelwith a text string that includes the option label and the group label, the information is consistently announced by both JAWS and NVDA in Chrome and Firefox in the case of select size=1 (in both collapsed and expanded states) and size>1

EXAMPLE CODE

<optgroup label="fruits">
   <option aria-label="fruits apple">apple
   <option aria-label="fruits pear">pear
  </optgroup>

test case

stevefaulkner commented 10 months ago

Can be re-opened once browser bugs are fixed

FreedomScientific / standards-support