-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Foundation is adding role to the dropdown HTML - Google Lighthouse ADA Audit is failing #11097
Comments
Hi @gkanukuntla. Thanks for the report ! |
@ncoden Can you please reopen this? I updated the issue with more details. In the text doc called moreInfo.txt. Thanks! |
@ncoden Also attached a copy of app.js for your reference. |
Same here. Did you check the latest release? |
@DanielRuf Hey Daniel did you try the google lighthouse extension tool to run the audit on the url I mentioned in moreInfo.txt file? |
I guess you mean this. |
@DanielRuf Yes. and the google lighthouse ADA audit is failing saying that |
The code snippet of the failing element is in the attachment in the Issue description dropdown_lighthouse_ADA_Issue_Menu_CodeSnippet.txt |
Please see the linked PR @gkanukuntla |
@DanielRuf Daniel, are you saying to change menu to menubar in my code base in foundation.util.nest.js file? Please confirm. Thanks! |
This is the only place where |
@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. |
@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. |
@DanielRuf Sorry missed attachment |
What shall I do with this file? |
@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? |
https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable
|
I just see |
Please check Foundation 6.4.3, I did not find other occurences of |
Manually changing foundation.js is not recommended, |
@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. |
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. |
@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. |
Changing the sourcefiles is not recommended. 6.4.3 already uses |
@DanielRuf Few things:
|
@gkanukuntla As no patch version is planned for 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 I think that what @DanielRuf was trying to say is that he already took care of the |
@ncoden Thank you so much for all your support that makes sense. |
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! |
@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. |
You can fork https://codepen.io/DanielRuf/pen/xWYvXK and fill the HTML pane. |
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.- I explicitly added role=”menubar” as per https://www.w3.org/TR/html52/dom.html#allowed-aria-roles-states-and-properties standards.
- 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.
- 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.
- Add google lighthouse chrome extension to chrome browser
- Open the html file, in the browser click on lighthouse extension and click on Generate report.
Here are some work arounds I’ve tried in an effort to resolve the ADA issue:
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:
dropdown_lighthouse_ADA_Issue_Menu_CodeSnippet.txt
into a already setup foundation project.
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
The text was updated successfully, but these errors were encountered: