[OutSystems UI] Outsystems UI - Accordion accessibility issue
outsystems-ui
Reactive icon
Forge component by Platform Maintenance
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

Please refer to the solution at the end.

You asked what accessibility tool, Bernardo, I too am having the same parent / child role issue, using AXE accessibility tool and although the issue does not appear with me on WAVE, our company policy requires all Outsystems software pass accessibility checks on each of these 2 accessibility tools.

Widget Tree for accordion:

The accordion consists of a tablist of accordion items, each containing address data only, ie no input fields.


AXE advises the following url for the solution, but not sure of solution to this would be in Outsystems: https://dequeuniversity.com/rules/axe/4.3/aria-required-parent?application=AxeChrome

F


As you can see below, the accordion item, has already been assigned (role="tab"), but the list had not been assigned (role="tablist").

This is how I assigned the role of tablist to the list:


By this action, of assigning the list the role of tablist, the critical issue was resolved.

Kind regards

Fearghal


Hi Ashraf Girgis,
Could you please provide that module to allow us to do some tests and make sure we're in the exact same scenario?

Best Regards,
GM

The file exceeds the limit allowed (4MB).


But as you can see, I found the solution, which in the end, was easy, ie I just needed to add assign to the parent list of the accordion, the role of "tablist".

Hi @Fearghal Murray
We don't need the all module, only the screen/blocks with this use case.
I was asking this since we would like to explore the use case and try to understand how could we make this easier in the future.
Best Regards,
GM

I hope this is the best way of sending you a particular block!

Accordion AXE issue solution.oml


Hi @Fearghal Murray
That worked just fine. We'll analyze this internally and try to improve this experience.
Meanwhile, Ashraf Girgis since you already have a solution for this could you mark this thread as solved? 

Cheers,
GM 

How do I mark it as solved, apart from saying so?

It needs to be the person who started this post, which in this case is  Ashraf Girgis .

Cheers,
GM

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