PDA

View Full Version : Missing button menu causing ARIA warnings



maciej.zabielski
4 Jul 2019, 5:30 AM
When buttons with submenus are generated and look like this:


<a class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" aria-label="Object" aria-haspopup="true" aria-owns="menu-1037" id="button-1036" tabindex="0" data-componentid="button-1036" style="left: 0px; margin: 0px; top: 0px;">

It will create a lot of warnings:
[aria-*] attributes do not have valid values

I was puzzled by this, as all attributes look valid. The problem is that
aria-owns="menu-1037"

refers to an object that is not present in DOM.
When i run a query, it will return NULL

document.querySelector('#menu-1037')

After pressing the button, it will create the menu and the query will succeeds.
It's hard to think about a "fix" for that, as we do not want these menus to be created.
There would have to be an override that adds this attribute when the menu is actually added to the DOM.

Any thoughts? :)

Mike

Forum_Adm
8 Jul 2019, 5:30 AM
Hi Mike,

I am not aware of a fix at the present time but I will send this to support to see if they have any suggestions. We appreciate your patience!

Kindly,

Michele

maciej.zabielski
8 Jul 2019, 9:09 AM
Hi Mike,

I am not aware of a fix at the present time but I will send this to support to see if they have any suggestions. We appreciate your patience!

Kindly,

Michele

Hi, thanks, but I already have a support request open for that...

I have created a Fiddle for that, but this problem is not reported by Chrome Accessibility audit there....
https://fiddle.sencha.com/#view/editor&fiddle/2tk0

I don't know who is cheating here.... but the Chromes audit seems to be very unpredictable (for example, it does not report duplicated ID that are injected in this example by Font Awesome script....but it does report them in my app)
What's more, if I compare the output from this sample and my app, they are identical. In both cases the menu referenced as
"aria-owns" is a problem in my app, but its not a problem in the fiddle...?

There are no other suspicious aria-tags that could have an invalid values.

Regards,
Mike