Incorrect tutor message for input with readonly state and role="combobox"

[mlhulek]

Summary

We use input elements as select boxes, so that you can't enter free text but select a value from a drop down list.

For the input we set the readonly property as well as role="combobox".

Please find a (very raw) example here: https://codepen.io/mlhulek/pen/yLVdyWL

Expected result

JAWS shouldn't announce that it is possible to type a value.

Actual result

JAWS will announce "To set the value use the Arrow keys or type the value." as a tutor message.

Additional Information

We can't switch to select and option as there are limited possibilities regarding design and styling.

JAWS version and build number

JAWS 2021.2102.34

Operating System and version

MS Windows 10 Enterprise
Version 10.0.18363 Build 18363

Browser and version:

Chrome Version 89.0.4389.72 (Official Build) (64-Bit)

[JAWS-test]

readonly for combobox means that neither text entry nor selection of a list entry is possible. Thus, the tutorial message from JAWS is incorrect (it also occurs with <input list=ID readonly>).

However, regardless of this, you are using combobox incorrectly, because if you want to emulate a <select> element, you must not use readonly, but combobox at a <div> (see https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html)

[mlhulek]

Thank you for your quick response. I really appreciate it. It would be great if the tutorial message from JAWS could be changed if there's a readonly property set at the input element.

Actually we hope to be compliant with ARIA1.2 when using role="combobox" at the input element. Please refer to example 6 here: https://www.w3.org/TR/wai-aria-1.2/#combobox

[JAWS-test]

It would be great if the tutorial message from JAWS could be changed if there's a readonly property set at the input element

I can only support that. This is indeed a JAWS error

Actually we hope to be compliant with ARIA1.2 when using role="combobox" at the input element.

No, your example is unfortunately not compliant:

• input with role=combobox may only be used if free text input is possible (corresponds to <input list=ID> and <datalist>)
• div with role=combobox must be used if free text input is not possible (corresponds to <select> and <option>)

[mlhulek]

I adjusted the example, so that role="combobox" is now placed at the surrounding div container:
https://codepen.io/mlhulek/pen/yLVdyWL

However, the tutorial message remains the same:
"To set the value use the Arrow keys or type the value."

[JAWS-test]

As I said, the JAWS error exists independently of the erroneous code and should be fixed. Your code is still not correct in the sense of ARIA 1.2, because a combobox that simulates a select must not contain any input at all, but only a div

[mlhulek]

Okay, thanks. Can you point me to the W3C specification for that, please?

[JAWS-test]

https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html

The following example implementation of the ARIA design pattern for combobox demonstrates a single-select combobox widget that is functionally similar to an HTML select element. Unlike the editable combobox examples, this select-only combobox is not made with an input element, and it does not accept freeform user input. However, like an HTML select, users can type characters to select matching options

https://w3c.github.io/aria/#combobox

A combobox functionally combines a named input field with the ability to assist value selection via a supplementary popup element. A combobox input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.

https://github.com/w3c/aria/wiki/Resolving-ARIA-1.1-Combobox-Issues

No select support: The input in the above code can be replaced with a div or span whose content displays the current value. This exactly replicates the functionality of combobox widgets that do not have a textbox.

See also: w3c/aria#1349 and w3c/aria#1051

[JAWS-test]

The problem occurs in Chrome, Edge and Firefox