[OutSystems UI] Outsystems UI - Accordion accessibility issue
outsystems-ui
Forge component by Platform Maintenace
Application Type
Reactive
Platform Version
11.8.4 (Build 29614)

The accordion component and AccordionItem code that is generated is failing the accessibility check.  The main accordion div is created with role="tablist" and the accordionItem div is created with role="tab", but within the tab component, the accodionitem tile has a role="button" for the click to expand the accordion. 

The accessibility report failure:  Nested interactive controls are not announced by screen readers

Ideally there should be no button within the div with the tab role.  


Current:


We have added a java-script to update this (see below), but it is a hit and miss, as on ready sometimes the DOM is not ready with the aggregate list that the accordion is displayed based on and hence the below will not take effect and update the code.

var parent = document.querySelectorAll('#'+$parameters.RequestWrapper+ ' .section-expandable');

            for (var i = 0; i < parent.length; i++) {

                console.log('i am here');

                 parent[i].removeAttribute("role");

                 parent[i].querySelector('.section-expandable-title').setAttribute('role', 'tab');


            }


Any advice would be great.


Hi Ashraf,

i can't say anything about accessibility, and whether what you are doing is the best way to achieve it.  

But I had a look at the timing, my thinking was that if you would place your javascript in the OnRender, the DOM is complete and you could reach all accordion items.

No such luck, when doing it in the OnRender, the querySelectorAll only returns 2 items, but when executing the same javascript with a button click, the same querySelectorAll finds all accordion items.

It seems like the OS react.Js software is only rendering 2 and then calls the onRender, maybe to save some time or something ??

So, same observation as you, can't offer a solution.

Dorine

HI Ashraf Girgis,

What Accessibility tool are you using for audits? 

We mainly use and recommend the WAVE tool and the Google's Lighthouse Accessibility audit, and there're no errors related to Accordion on none of them.


Best regards,

Bernardo Cardoso

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.