-
Bug
-
Resolution: Fixed
-
Highest
-
8.3.0
-
Severity 3 - Minor
-
Issue Summary
In "create space" dialog, the template options are not accessible for screen reader users.
Steps to Reproduce
- Navigate to confluence
- Navigate to "Create from Template (...)" button in header & activate it.
- Inspect the code.
Actual Results
The Template options such as "Black space", "Blog post", etc have incorrect role=button & aria-pressed attributes defined. Also the options are not grouped programatically.
This makes keyboard & screen reader users difficult to access the functionality.
Note: this issue is also applicable to the options available in dialog when you click "create space" button in main content. Hence needs to be fixed there as well.
Screenshot
Expected Results
Remove <ul> & <li> elements from the code. The Template options behaving as radio buttons hence they need coded as radio buttons programatically. Also ensure that the radio buttons are associated with respective labels. Also use <fieldset> & <legend> to group the radio buttons programatically.
Code snippet
<fieldset> <legend> Template options </legend> <label><input type="radio" name="options"><div class="template-name">Blank page</div><div class="template-description">Start with a blank page.</div></label> <label><input type="radio" name="options"><div class="template-name">Blog post</div><div class="template-description">Share news with your team.</div></label> </fieldset>
Note: Use CSS to maintain the presentation.
If above method can’t be used then create custom radio button group experience using ARIA role, state & properties.
Refer to this link for more details: https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available