Read only combo boxes are read out as input-fields

[Moritz-Leistner]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Affected component

Summary

When configuring the to be readonly the screen reader detects this as input field resulting in incorrect instructions read out by the screen reader.

Version

@simpl/element-ng: 48.10.0

Steps to reproduce

1. Configure the select input in a context that is able to either switch edit modes or is readonly
2. check the role attribute of the element
3. (optional) start a screen reader (e.g. JAWS) and let it read out the element attributes

Code reproduction example

https://github.com/siemens/element/blob/main/projects/element-ng/select/select-input/si-select-input.component.ts#L39

What is the current bug behavior

The screen reader detects combo boxes that are marked as read only as input fields. Therefore it reads out 'edit' causing confusion for the user.

What is the expected correct behavior

Read only combo boxes should still have the same role. When starting a screen reader it should read out the correct role and state of the element (e.g. combobox read only) as well as the instructions to that element (this should already be default behaviour for the role=combobox and does not need any adaptations)

[spliffone]

@spike-rabbit Removing the SiSelectInputComponent role toggle between 'textbox' and 'combobox' is not a big deal, but do you know why we introduced the toggling when we set the input to readonly or disable?

[spike-rabbit]

The only real way forward here would be removing the readonly state from si-select.
Readonly only indicates, that a user cannot edit in terms of typing, see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly .

So it is technically impossible to have a combobox, which is flagged as readonly. Thats why we switch the role.