Foundation-sites: Foundation is adding role to the dropdown HTML - Google Lighthouse ADA Audit is failing

[gkanukuntla]

We are using Foundation for our project and I’m working on an WCAG (accessibility) issue that is generated by the Google Lighthouse Chrome Extension (but this is the same as running an Accessibility audit via Chrome Inspect tool > Audit tab).
The HTML that is pasted below is the html developed by us for mobile navigation menu of our application. We didnot add any ADA roles or attributes added as a part of initial development.
But, looks like Foundation is adding the role=”menu” to the first

element of the menu as per the compiled HTML loading in the DOM and failing by the lighthouse tool and the code snippet below.

Here are some work arounds I’ve tried in an effort to resolve the ADA issue:

1. I explicitly added role=”menubar” as per https://www.w3.org/TR/html52/dom.html#allowed-aria-roles-states-and-properties standards.
2. I explicitly copied just the htmls for dropdown menu and accordion menu from foundation site and ran the lighthouse tool the results show the same error below.

Google lighthouse error details in the attachment below.
google_lighthouse_error.txt
and link to https://dequeuniversity.com/rules/axe/2.2/aria-allowed-attr?application=lighthouse

Any suggestions to fix this problem, or are there any known issues with Foundation that may be causing this?

How to reproduce this bug:

1. Not sure if this can be replicated it is very specific to HTML layout for accordion menu. But can try copying the menu html code snippet for menu we developed in the attachment.
   dropdown_lighthouse_ADA_Issue_Menu_CodeSnippet.txt
   into a already setup foundation project.
2. Add google lighthouse chrome extension to chrome browser
3. Open the html file, in the browser click on lighthouse extension and click on Generate report.

What should happen:

You should get zero errors on lighthouse ADA audit.

What happened instead:

See this error when ran google Audit.
Google lighthouse error details in the attachment below.
google_lighthouse_error.txt
and link to https://dequeuniversity.com/rules/axe/2.2/aria-allowed-attr?application=lighthouse

Everything specified below is being added by foundation to the div element.
role="menu" aria-multiselectable="true" data-accordion-menu="7385d8-accordion-menu" data-mutate="2cnxqc-responsive-menu", of which the concerning and the current show stopper is role="menu" and google lighthouse tool is failing.

Browser(s) and Device(s) tested on:

Chrome browser but happening on HTML related to Mobile.

Foundation Version(s) you are using:

6.3.1

Moreinfo:
moreinfo.txt
App.js
blt_appjs.txt

[ncoden]

Hi @gkanukuntla. Thanks for the report !
I am not able to reproduce it v6.4. role="menubar" is applied on responsiveMenu, and the accessibility audit run well. Please reopen if I am wrong.

[gkanukuntla]

@ncoden Can you please reopen this? I updated the issue with more details. In the text doc called moreInfo.txt. Thanks!

[gkanukuntla]

@ncoden Also attached a copy of app.js for your reference.

[DanielRuf]

I am not able to reproduce it v6.4. role="menubar" is applied on responsiveMenu, and the accessibility audit run well.

Same here. Did you check the latest release?

[gkanukuntla]

@DanielRuf Hey Daniel did you try the google lighthouse extension tool to run the audit on the url I mentioned in moreInfo.txt file?

[DanielRuf]

https://github.com/zurb/foundation-sites/blob/03fd670d33a921d68ef794f5c16a260e1b128a33/js/foundation.util.nest.js#L38

[DanielRuf]

I guess you mean this.

[gkanukuntla]

@DanielRuf Yes. and the google lighthouse ADA audit is failing saying that
Google lighthouse error details:View failing elements
[aria-*] attributes do not match their roles

[gkanukuntla]

The code snippet of the failing element is in the attachment in the Issue description dropdown_lighthouse_ADA_Issue_Menu_CodeSnippet.txt

[DanielRuf]

Please see the linked PR @gkanukuntla

[gkanukuntla]

@DanielRuf Daniel, are you saying to change menu to menubar in my code base in foundation.util.nest.js file? Please confirm. Thanks!

[DanielRuf]

This is the only place where menu is used. Please search for the code in foundation.js and try changing it like I do in my PR.

[gkanukuntla]

@DanielRuf Found it made changes already, just wanted to make sure if this is the only js file. Will keep you posted about the results.

[gkanukuntla]

@DanielRuf I changed in the mentioned js file and still see ADA failing. Just searched through app.js and I find 2 more places, do you recommend changing in the all the places wherever role="menu" is being used change it to menubar? Attached is the app.js you can find the other places. Also our project is using Float grid just want to let you know.

[gkanukuntla]

@DanielRuf Sorry missed attachment
updatedjs.txt

[DanielRuf]

What shall I do with this file?

[gkanukuntla]

@DanielRuf I just attached for your reference if you want to search for role="menu" which is being added in three other places other than foundation.util.nest.js . if you want to take a look at it. I also found that foundation.drilldown.js and foundation.accordionMenu.js also has references to role:"menu" in three places all together, do you suggest changing them to menubar as well?

[DanielRuf]

https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable

aria-multiselectable is only allowed on grid, listbox, tablist and tree.

[DanielRuf]

I just see tree here; https://github.com/zurb/foundation-sites/search?utf8=✓&q=multiselectable&type=

[DanielRuf]

do you suggest changing them to menubar as well?

Please check Foundation 6.4.3, I did not find other occurences of menu

[DanielRuf]

Manually changing foundation.js is not recommended,

[gkanukuntla]

@DanielRuf We are using 6.3.1 not 6.4.3 and on the manual changes I'm only changing the individual foundation javascript files and compiling them into app.js very specific to my applicaiton.

[DanielRuf]

Sure but these changes and a few more are only in 6.4.3 and the other change regarding the aria attribute is currently checked by me.

[gkanukuntla]

@DanielRuf Sorry I didn't understand, are you saying this might not work with 6.3.1 and the solution is to upgrade or is there any way to fix this issue in the current version we are using.

[DanielRuf]

Changing the sourcefiles is not recommended. 6.4.3 already uses menubar. The other change is still checked by me.

[gkanukuntla]

@DanielRuf Few things:

1. I understood that 6.4.3 has the solution.
2. But as I said we are using 6.3.1 - Are you suggesting an upgrade to 6.4.3
3. Or do you have or working on a specific fix for my issue? which I don't see is possible because it is happening due to the version of the foundation we are using. Please confirm
4. In your previous comments you mentioned "The other change is still checked by me" what do you mean, I didn't really get it.
   Thanks for your support.

[ncoden]

@gkanukuntla As no patch version is planned for v6.3.*, yes we recommand you to upgrade to a new version of Foundation. You can switch to v6.4.3 but we know that some users had some build issues with this version, so I would rather advise you to wait for v6.5.0 coming the next week.

We know this is not convenient to having to migrate to get new bug fixes, and we will pay attention to this for v6.5. You can expect all new bug fixes coming in the next releases to also come in a patch release for v6.5 (like v6.5.1 and so on).

I think that what @DanielRuf was trying to say is that he already took care of the role="menu" left in our code, so you can expect this issue to be fully fixed in the next release (next week).

[gkanukuntla]

@ncoden Thank you so much for all your support that makes sense.

[mveenstra]

Hi @ncoden,

Sorry for jumping in here last minute. We are using the Zurb template but not the latest version that includes the XY grid since it was released after we set up our site. We are using the float grid.

My thought is that we could download the JS files and update the existing JS files but this would more than likely mean we would also want to update all of the SCSS files.

The other option could possibly be to use the JS CDN for the v6.5 release coming next week.

Would love to hear your thoughts on that. Thanks so much!

[DanielRuf]

@mveenstra we will likely update the template shortly after the new release. Replacing the js and scss dirs with the js and scss dirs from the main repo might work.

[DanielRuf]

Sure but these changes and a few more are only in 6.4.3 and the other change regarding the aria attribute is currently checked by me.

aria-multiselectable is only on tree elements in the latest release.
Can you try to create a codepen and check if there is also the issue?

You can fork https://codepen.io/DanielRuf/pen/xWYvXK and fill the HTML pane.