Repository navigation
[Accessibility] ui5-input / ui5-date-picker do not expose aria-readonly; read-only state is not conveyed to AT #13995
Description
Bug Description
Summary
The inner <input> rendered by Input sets the native HTML readonly attribute but never aria-readonly. On a bare textbox that would suffice, but Input/DatePicker decorate the same element with composite-widget semantics (role, aria-haspopup, aria-roledescription), and in that context screen readers (verified JAWS/NVDA, de-DE) announce the role/popup but drop the read-only state.
Select renders aria-readonly explicitly and is announced correctly, so on the same read-only form ui5-select reads as read-only while ui5-date-picker does not.
Steps to reproduce
<ui5-select readonly> <!-- state announced (has aria-readonly) -->
<ui5-option selected>Personal goals</ui5-option>
</ui5-select>
<ui5-date-picker readonly value="2026-01-01"></ui5-date-picker> <!-- NOT announced -->
<ui5-input readonly value="hello"></ui5-input> <!-- NOT announced -->Navigate with a screen reader; inspect the shadow inner <input>: readonly present, aria-readonly absent.
Observed (de-DE): ui5-select → "… Listenfeld … Die Auswahl ändern Sie mit den Pfeiltasten" ✅; ui5-date-picker → "Datumseingabe · Hat Popup · …", no read-only state ❌.
Expected
Read-only ui5-input/ui5-date-picker expose aria-readonly="true" on the focusable inner input, consistent with ui5-select.
Root cause (@ui5/webcomponents@2.26.0)
src/InputTemplate.tsx (inner <input>) sets native readonly but none of its 9 aria-* attributes is aria-readonly:
readonly={this._readonly} // line 35 — native attr only
aria-haspopup={this.accInfo.ariaHasPopup} // line 44
aria-roledescription={this.accInfo.ariaRoledescription}// line 46
aria-required={this.required} // line 50
// no aria-readonlyInput.accInfo / DatePicker.accInfo expose no read-only key, so there is nothing to bind (DatePicker even adds aria-haspopup="grid" — the semantics that suppress the native readonly announcement). The signal exists but is used only for behavior: get _readonly() { return this.readonly && !this.disabled; }.
Contrast — src/SelectTemplate.tsx: role="combobox" (line 30) + aria-readonly={this.readonly} (line 38).
Emitter matrix (grep -l aria-readonly dist/*Template.js): CheckBox, MonthPicker, RatingIndicator, Select, Switch, Tokenizer, YearPicker, YearRangePicker emit it; Input and DatePicker (and all Input-based controls: DateTimePicker, DateRangePicker, ComboBox, MultiInput, …) emit 0.
Identical in 2.25.0 and current latest 2.26.0 — not fixed by upgrade.
Suggested fix
Emit aria-readonly from Input so all Input-derived components inherit it:
- Add
"ariaReadonly": this._readonly || undefinedtoInput.accInfo(andDatePicker.accInfoif overridden). - Bind
aria-readonly={this.accInfo.ariaReadonly}on the inner input inInputTemplate.tsx.
Environment
@ui5/webcomponents 2.25.0 & 2.26.0 · Chromium/Edge · Windows · JAWS/NVDA de-DE · affects ui5-input, ui5-date-picker and other Input-based controls.
Organization
SF
- I’m not disclosing any internal or sensitive information.
Metadata
Metadata
Assignees
Type
Projects
- Status
- Status
- Status
Activity
s-todorova commentedon Aug 28, 2026
Hello @UI5/ui5-team-ctr-ril,
Could you please take a look at this?
Regards,
Siyana
ndeshev commentedon Sep 4, 2026
Hello @zhangliangyi I can not reproduce the issue with JAWS 2026 - the readonly state of the ui5-input is announced in all cases that I tried. Could you please test it with english language also, I am wondering if it is possible to be a language specific problem?
As a note - we don't specify aria-readonly for the input because of this guidance in the MDN official documentation for the attribute:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-readonly
15 remaining items
unazko commentedon Sep 14, 2026
Hello,
I've tested as per @judith9209 example and analysis.
There is no difference between the JAWS 2025, 2026 and NVDA at my side with the all of the examples in the snippet: https://snippix.only.sap/#384829
The read only state configurations:
So the native readonly attribute couldn't be applied. For that reason there is an aria-readonly attribute instead.
For comparison with Windows Narrator the read only state gets announced for all components (input, select, date picker).
With the select component it seems that we have a screen reader limitation.
For the date picker it could also be framed as a screen reader limitation, but
we also have a good workaround, which is to move the contents from aria-roldescription
to aria-labelledby attribute.
There is already a logged incident into the FreedomScientific github about
Readonly state not announced when aria-roldescription is set:
FreedomScientific/standards-support#571
and also another FreedomScientific issue about read only state not announced for a
combobox role:
FreedomScientific/standards-support#481
Couldn't find a similar issue logged for NVDA although it is reproducible in the same way.
judith9209 commentedon Sep 14, 2026
Hi @unazko,
thanks a lot for your additional information. Good to know.
ui5-datepicker:
The JAWS bugs are open since 2021, so it look like this will not be worked on soon. For the workaround for datePicker, "move the contents from aria-roldescription to aria-labelledby attribute." -> Have you meant aria-describedby instead? Should this come from the framework or the app developer? Should we use https://github.com/UI5/webcomponents/pull/846/changes?
Agree that the html should not be aria-readonly="true" https://w3c.github.io/aria/#aria-readonly. However i find the html still improvable. Currently on ui5-datepicker you are using readonly="true". Referring to https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes "The values "true" and "false" are not allowed on boolean attributes. However if the html is now incorrect or not, when you would use readonly="readonly" like in UI5, or readonly like in version 1.0 https://snippix.only.sap/snippets/401874 readonly is still not announced. So the answer to this question might not be directly linked to the cause of the problem.
ui5-select
Can you think about adding a workaround to avoid running into the jaws bug? In the switch https://github.com/UI5/openui5/blob/master/src/sap.m/src/sap/m/Switch.js#L197 you add read only as part of the message key CONTROL_READONLY. You don't add it as part of an html property readonly. Than you might have to remove aria-haspup/maybe other properties in addition that jaws does not announce "To activate press enter". Or any other suggestion?
In NVDA readonly is announced in https://jsbin.com/yeqocirogu/edit?html,output but not on ui5-select.
unazko commentedon Sep 16, 2026
Hi @judith9209,
Yes, you're right. The aria-roldescription text could be moved into aria-describedby instead of aria-labelledby. That is something we can do at framework side. We can also try and fix the aria-readonly attribute occurrences to have a proper value.
For the ui5-select I don't see a good workaround, but maybe @dobrinyonkov can comment for this component.
dobrinyonkov commentedon Oct 2, 2026
Hi @zhangliangyi, @judith9209,
FYI, for ui5-select - you mention that removing the roledescrption fixes this bug, but in my testing the case with the ui5-select stays bugged. BTW, this case was long ago reported to JAWS - FreedomScientific/standards-support#481. It seems to be accepeted as bug but still not resolved. In fact, multple aria attributes are ignored as like haspopup, readonly and expanded.
We can for sure remove the aria-roledescription and prepare for a potentional fix from JAWS side, hopefully will work the way the date picker works.
Let me know your thoughts, have you managed to isolated this with ui5-select where readonly state is being readout?
judith9209 commentedon Oct 2, 2026
Thank you for following up with a workaround for datepicker/timepicker and keep us updated :).
ui5-select:
@dobrinyonkov Removing roledescription does not fix the bug in jaws for me as well. "have you managed to isolated this with ui5-select where readonly state is being readout?" -> No.
I hope we can find a way to expose the read-only state as an accessible announcement. I'm not fully confident in my suggestions. On reflection, I might withdraw them.
Option 1
https://www.w3.org/TR/wai-aria-1.3/#aria-readonly can be used on those roles: checkbox combobox grid gridcell listbox radiogroup slider spinbutton textbox
For jaws aria-readonly seems to be reliable supported on textbox. Should we try adding role=textbox; removing role=combobox when readonly? In addition to removing roledescription and removing aria-expanded(not allowed on role textbox).
Option 2:
Or keep the roledescription and add "read only" via a message key like mentioned in previous comment.
judith9209 commentedon Oct 20, 2026
multi-combobox/ui5-multi-input
@dobrinyonkov Discovered that on the UI where the customer reported the issue ui5-multi-combobox/ui5-multi-input is available and read only announcement is missing. https://snippix.only.sap/#742367
Would you continue working on a code fix of ui5-multi-combobox and ui5-multi-input? The code fix looks straight forward by adding readonly to the div that includes "Contains 2 tokens"
judith9209 commentedon Oct 20, 2026
ui5-select(role=combobox)
When comparing https://www.w3.org/TR/core-aam-1.2/#mapping_state-property_table
you notice that on role=combobox EditableText interface is missing.
This is available for textbox. The readonly announcement works in ui5-input/ui5-textarea:
I am therefore not convinced that any screen reader vendor will make readonly announcement working on role=combobox(ui5-select/ui5-combobox) and that FreedomScientific/standards-support#481 will be fixed at all.
ROLE_SYSTEM_COMBOBOX is a composite/container role in MSAA. It internally has two children:
In MSAA's model, STATE_SYSTEM_READONLY belongs to the text child, not the container. A combobox container cannot be read-only. Only its contained text input can.
-> As a code fix, shouldn't the html be restructured in a way to add readonly on the text control?
In discussions of TGM-28655 it turned out that it is possible to use ui5-input instead when ui5-select is readonly. This is ok for the customer fix. Such a workaround won't work for UI's that are purely metadata driven. So a long term fix would be appreciated.
judith9209 commentedon Oct 20, 2026
ui5-datepicker
Is the assumption correct that you have the intention to merge #14072 ?
judith9209 commentedon Oct 21, 2026
Rechecked again this comment #13995 (comment) and realized that read only announcement was only made in jaws because i had played around a lot on html and had role=combobox removed. So the fix proposal will not work.
Noticed
https://whatsock.com/Templates/Comboboxes/Native%20Inputs,%20Editable%20and%20Readonly/index.htm has following html
<input type="text" name="country-input-value" required="" readonly="" id="ctry" class="aria-combobox" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" aria-description="Press the down arrow to browse available options" aria-required="true">and even aria-description and role=combobox are available, jaws announces it as readonly.
I have extracted the html into a https://snippix.only.sap/snippets/359683 (last control). But even with similar html the announcment is not made. So assumingely they have implemented the trick in js code somewhere in https://github.com/WhatSock/apex/blob/main/4X/Standard/Modules/Combobox.js . Appreciate it a lot if webcomponent team analyzes what makes the read only announcement working to have an impression if similar thing can be applied to our controls.
judith9209 commentedon Oct 26, 2026
Here the snippix where jaws would read read only https://snippix.only.sap/#896885 on role=combobox based on https://whatsock.com/Templates/Comboboxes/Native%20Inputs,%20Editable%20and%20Readonly/index.htm. The trick they have done is el.value = sel.options[sel.selectedIndex].text;.
dobrinyonkov commentedon Oct 29, 2026
I'm still looking on this issue, I will post updates later today :)
dobrinyonkov commentedon Oct 29, 2026
Hi all, this issue got long, so here's a short summary.
What we learned (JAWS)
inputthat has a value.aria-roledescriptionbreaks read-only, unless the input hasrole="combobox".div[role=combobox](ui5-select) read-only is never announced (Some aria attributes are not read out on DIV with role="combobox" FreedomScientific/standards-support#481).Status per component
aria-roledescriptionaria-describedby(#14072)aria-roledescription, and the input is empty (only tokens)aria-describedby; empty input: see MultiComboBoxdiv, not aninputinputwith the selected text when read-onlyTest cases: https://jsbin.com/mokopepijo/1/edit?html,output
Open questions
value), so JAWS sees a filled input and announces read-only?inputinstead of thedivin read-only mode acceptable?aria-describedbyan acceptable fallback, even though NVDA/Narrator would then say it twice?Demo pages: MultiInput, MultiComboBox
judith9209 commentedon Nov 4, 2026
Tracking a remaining gap: does not announce "read only" in JAWS when the input has no value. Asked for a workaround in FreedomScientific#509.