[5.2] Fix a11y issue in accordion (role)

[chmst]

Pull Request for Issue # .
The issue was mentioned in JAT channel by @rytechsites. Thanks for reporting. Replaces #40572

Summary of Changes

This PR removes the role attribute from bootstrap accordion. Thanks @drmenzelit.

Testing Instructions

Add a few page breaks into an article, set the layout in the page break plugin to "slider".
Check the result with an a11y tool.

Similar for menu item types modal or other occurrences of accordions

Actual result BEFORE applying this Pull Request

You will get a11y issues for the role attribute.

Expected result AFTER applying this Pull Request

No a11y issues.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

Not at a pc but I am fairly certain that this is not correct as the code is used in many places where it is correct. Can a layout override not be created for the specific issue and not be so generic as this is

[chmst]

AXE and other tools mark this as an issue not only for pagebreak but also on other places, for example in menuitem type modal. See also https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

We found another issue in this bootstrap method, but it is not in scope of this PR.

[brianteeman]

You are absolutely correct that the slider should not have any roles.

The problem, as I suspected, is that the bootstrap accordion is used in other places where it is absolutely correct for it to have the roles we have specified. The main example of this in the core is the mobile display in the admin of the options page. This uses the bootstrap accordion to display the tabs vertically and collapsed. This view is correctly using role=tab etc.

Please update this PR to not update the accorsdion in th library but to just correct the output of only the pagebreak slider.

I am currently at JoomlaDagen and have verified this with one of the leading accessibility consultants in the Netherlands.

[drmenzelit]

The function addSlide in the library Bootstrap.php is being used only on four places:
administrator\components\com_finder\src\Service\HTML\Filter.php
administrator\components\com_menus\tmpl\menutypes\default.php
components\com_config\tmpl\modules\default_options.php
plugins\content\pagebreak\pagebreak.php
all having the same issues.

[chmst]

The bootstrap accordion itself is correct. But the code generated in the Helper is wrong.

[hans2103]

@chmst I've added two page breaks to article = Typography and changed the setting of page-break plugin to sliders.
The JooA11y plugin does not notice a failure on the page.

[chmst]

@hans2103 jooa11y discovers only some rules like missing alt texts, coloour contrast issues for example, but not all issues.

Use another tool and you get this:

Interesting: different Tools find different issues. In this accordion alsió the expanded attribute is wrong.

@brianteeman said that he found a better solution. Looking forward ...

[HLeithner]

This pull request has been automatically rebased to 4.4-dev.

[brianteeman]

@brianteeman said that he found a better solution. Looking forward ...

I did?

[HLeithner]

This pull request has been automatically rebased to 5.2-dev.

[softforge]

I have tested this item ✅ successfully on 29111d5

The role was removed once the patch applied in the area suggested.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40578.}

[Bodge-IT]

I have tested this item ✅ successfully on 29111d5

Tested this, for the accordion only. Noticed an empty space left before closing button tag, where role was declared.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40578.}

[alikon]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40578.}

[brianteeman]

#40578 (comment)

[chmst]

I chcked this again and again, in backend, with every device, with modals and option panel but cannot see where the role is needed.

[brianteeman]

ARIA: tabpanel role
The ARIA tabpanel is a container for the resources of layered content associated with a tab.

The tabpanel role indicates the element is a container for the resources associated with a tab role, where each tab is contained in a tablist.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role#description)

[drmenzelit]

What you say is correct @brianteeman but we are talking about the output of the pagebreak plugin that is incorrect

[brianteeman]

my bad - the accordion in the component options doesnt use the library as I had expected. Luckily it uses its own custom-element

[brianteeman]

according to the WAI best practices there should still be a role but this type =region to indicate a landmark region that contains the currently expanded accordion panel.

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

[drmenzelit]

I have tested this item ✅ successfully on a9a836d

Before PR: error in accessibility testing tools because of wrong "tab" role in the slider layout
After PR: no error

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40578.}

[Bodge-IT]

I have tested this item ✅ successfully on a9a836d

Issue with 'Child roles required' from parent "tablist" role, no longer present.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40578.}

[Hackwar]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40578.}

[Hackwar]

Thank you!