Issue Summary

In "create space" dialog, the template options are not accessible for screen reader users.

Steps to Reproduce

1. Navigate to confluence
2. Navigate to "Create from Template (...)" button in header & activate it.
3. 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