[OutSystems UI] Outsystems UI - Accordion accessibility issue

Back to Forums

Ashraf Girgis

[OutSystems UI] Outsystems UI - Accordion accessibility issue

Question

Reactive

Forge

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.

21 Jun 2021

Dorine Boudry

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

21 Jun 2021

Bernardo Cardoso

Staff

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

12 Oct 2021

6 replies

Last reply 14 Feb

Show thread

Hide thread

Fearghal Murray

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

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

13 Feb

Gonçalo Martins

Staff

Replying to Fearghal Murray's comment on 13 Feb 2022 13:03:00

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

13 Feb

Fearghal Murray

Replying to Gonçalo Martins' comment on 13 Feb 2022 15:37:37

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".

13 Feb

Gonçalo Martins

Staff

Replying to Fearghal Murray's comment on 13 Feb 2022 21:15:03

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

13 Feb

Fearghal Murray

Replying to Gonçalo Martins' comment on 13 Feb 2022 21:32:18

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

Accordion AXE issue solution.oml

13 Feb

Gonçalo Martins

Staff

Replying to Fearghal Murray's comment on 13 Feb 2022 22:05:56

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

14 Feb

Fearghal Murray

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

14 Feb

1 reply

14 Feb

Show thread

Hide thread

Gonçalo Martins

Staff

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