Design System: Audit Dropdown Element

[abuna1985]

Dependency

• [x] #3635
• [ ] Waiting for wiki to be moved to its new repo and be ready for new content

Overview

As a developer, we need to audit the HTML, CSS, and JavaScript for the dropdown element in order to ensure best practices are being applied.

Action Items

• [x] Find all instances of the HTML, CSS, or (inclusive) JS code for the dropdown element from all pages (one can be found on the about page) as of issue creation.
  • [x] Document all instances on a spreadsheet in the Audits folder in our drive with columns for Webpage, Dropdown Name, Permalink to Lines in the Code, and any other columns you think would be helpful
  • [x] Once the spreadsheet is created, add a link to the spreadsheet under the "Resources/Instructions" section below
• [x] Research online on what the standards are in terms of HTML tags, accessibility, etc for this component.

Resources/Instructions

Click here to see example of the dropdown element

• Audit folder
• Spreadsheet
• Research

[github-actions[bot]]

Hi @abuna1985.

Good job adding the required labels to this issue.

Just a friendly reminder to also move the issue into the "New Issue Approval" column under the Project Board. For more info on that, check Github's documentation here. Thanks!

Additional Resources: Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done) Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[github-actions[bot]]

Hi @d-perez-8, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[d-perez-8]

Availability: Tuesday - Thursday ETA: End of day Wednesday

[d-perez-8]

Blocker: I have created the spreadsheet here from a template already existing in the audit folder, and I would confirmation that this is what was need. Thank you!

[github-actions[bot]]

@d-perez-8

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 13, 2022 at 12:32 AM PST.}

[d-perez-8]

Progress: I have learned how to create permalink to add to the spreadsheet. Blockers: No blockers at the moment. Availability: Will have time today and tomorrow, and I expect to finish it by Monday

[github-actions[bot]]

@d-perez-8

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 27, 2022 at 12:45 AM PST.}

[kathrynsilvaconway]

@d-perez-8 Hi, just checking in to see if you need any assistance with this issue. Be sure to comment your ETA and Availability for the week, and please do reach out on Slack if you are having a blocker.

[d-perez-8]

@kathrynsilvaconway Hi Kathryn. I do not need assistance yet, but I am still working on it! ETA by EOD, and I'm available all day today.

[d-perez-8]

I am finished with this issue and looking for it to get reviewed. Here is the Spreadsheet @hackforla/website-merge

[arpitapandya]

I am finished with this issue and looking for it to get reviewed. Here is the Spreadsheet @hackforla/website-merge

Will review by EOD 2022-10-10 Availability : 4hrs

[blulady]

@d-perez-8 Thanks for working on this Danny!! I noticed this instruction "Research online on what the standards are in terms of HTML tags, accessibility, etc for this component." I was wondering if I missed where you put the research?

[blulady]

Do the drop downs on the https://www.hackforla.org/ and https://www.hackforla.org/#press count too?

[d-perez-8]

@blulady Hey Sarah. I attached the research google doc on google sheets, and I have included it in the folder.

The drop-downs on the homepage are the same ones that are on the projects page. I included the homepage in the same line as the projects page on the google sheet.

I did not see drop-downs on press. I checked the desktop and mobile views, and it appears as a list to me.

[d-perez-8]

@hackforla/website-merge Can I get a review on this please 🙂

[blulady]

@blulady Hey Sarah. I attached the research google doc on google sheets, and I have included it in the folder.

The drop-downs on the homepage are the same ones that are on the projects page. I included the homepage in the same line as the projects page on the google sheet.

I did not see drop-downs on press. I checked the desktop and mobile views, and it appears as a list to me.

The one on press is the same drop down that is on the home page and projects page.

[blulady]

Thanks for attaching the Research document. I took a look at it and It would be helpful to have a bit more discussion on the accessibility aspect. I saw that you attached a really awesome article. I was hoping you could maybe include some of the key points from that article about accessibility and tags. And maybe a paragraph at the end summarizes your research findings stating which tags are preferred.

Things you might consider including in the research/research summary (obviously paraphrase or otherwise shorten this to include it in a research document): W3 "People with reduced dexterity, such as tremors, often have trouble operating fly-out menus. For some, it might be impossible. Make sure to provide other ways to reach the submenu items, for example by repeating them on the page of the parent menu item." "In addition, scripting is used to slightly delay the immediate closing of submenu items when the mouse leaves the area. This delay makes it easier to use the menu when navigation by a mouse is not very precise."

Mozilla Here you discuss the proper use of the select element. It would be helpful to also mention how hard the select element is to style with css for accessibility. "The element is notoriously difficult to style productively with CSS... consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics." Including a brief discussion of when you should look to using WAI-ARIA with a drop down menu. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

blulady commented 1 year ago

Building Accessible Menu Systems Some things you might include "Navigation systems are really tables of content and this is how tables of content are structured. The only thing that really makes us think “menu” is the styling of the nested lists and the way they are revealed on hover or focus." "That’s where some go wrong and start adding WAI-ARIA semantics: ARIA menus are not designated for navigation but for application behavior. Imagine the menu system for a desktop application. The top-level link should be usable as a link, meaning it does not behave like a menu button."

"Navigation submenus (or "dropdowns" to some) work well with a mouse or by keyboard, but they’re not so hot when it comes to touch. When you press the top-level "Shop" link in our example for the first time, you are telling it to both open the submenu and follow the link." This can be resolved by "Make sure each top-level destination page has a table of contents as an alternative to the submenu."

"A true menu (in the WAI-ARIA sense) should identify itself as such using the menu role (for the container) and, typically, menuitem children" And why you shouldn't use them.

"And

elements are menus of sorts, with similar semantics to the button-triggered menu we shall soon be constructing. However, just as with the checkbox toggle button, we’re using an element associated with entering input"

[blulady]

Building Accessible Menu Systems Some things you might include "Navigation systems are really tables of content and this is how tables of content are structured. The only thing that really makes us think “menu” is the styling of the nested lists and the way they are revealed on hover or focus." "That’s where some go wrong and start adding WAI-ARIA semantics: ARIA menus are not designated for navigation but for application behavior. Imagine the menu system for a desktop application. The top-level link should be usable as a link, meaning it does not behave like a menu button."

"Navigation submenus (or "dropdowns" to some) work well with a mouse or by keyboard, but they’re not so hot when it comes to touch. When you press the top-level "Shop" link in our example for the first time, you are telling it to both open the submenu and follow the link." This can be resolved by "Make sure each top-level destination page has a table of contents as an alternative to the submenu."

"A true menu (in the WAI-ARIA sense) should identify itself as such using the menu role (for the container) and, typically, menuitem children" And why you shouldn't use them.

"And

[blulady]

Also a brief summary/discussion of True Menus and Keyboard And Focus Behavior would provide a lot of clarity to whoever reads this Research and is perhaps the most important part to mention and reference.

[blulady]

@d-perez-8 Isn't feeling well and is also going on Vacation until November 10th so he won't be able to keep working on this issue.

[github-actions[bot]]

Hi @gstemmann, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[gstemmann]

i. Availability: Tuesday 6-9 pm ii. ETA: 11/10/22

[gstemmann]

Progress: I have reviewed the past work and spreadsheets that were completed. Blockers: No blockers at the moment. Availability: Will have time today

[gstemmann]

Progress: I went over more expectations on the research document with some members of the merge team. Blockers: No blockers Availability: I have interviews and I'm stating a new job (unrelated to the interview) so I will not be active/available this week.

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 21, 2022 at 11:17 PM PST.}

[gstemmann]

Progress: Still progressing through the research and writing up the document with a new format Blockers: Moving and started new job along with family time through the holidays Availability: Friday Sat 11a - 3pm ETA: Dec 3

[gstemmann]

Write up:

Summary: Navigation Submenus can be great with mouse and keyboard. But with touchscreens and for accessibility purposes, it's better to have a single menu with all available options. So when you press the top-level "Shop" link in our example for the first time, you should get a list of all the submenus instead of following a link. Also, we may want every top-level destination page to have a 'table-of-contents' as an alternative to the submenu. ARIA rules will override HTML roles, so in order to avoid creating a true menu with clickable menu items, the menu is not opened and closed by a “true menu button”.

Remember that navigation systems are just tables of content. We think of 'menu' because the lists are nested and they appear on hover. However, for accessibility, it’s important to make sure that each menu item element does not have interactive descendants. Also, adding a slight delay instead of immediately closing submenus (fly-out menus/dropdowns) when your mouse leaves the area can also help when the mouse isn’t precisely hovering over the menu.

As for keyboard accessibility, the best thing to do is use the correct elements. ENTER and SPACE buttons will fire events with <button> elements properly. Signposts like search bars and lists also are great for keyboard users and can be implemented with WAI-ARIA. (WAI-ARIA also is best to be used to help with nested div along with CSS and JavaScript since they can get complex and screen readers have a tough time working out what each feature does.)

Recommendations (Based on Research Findings above):

• [ ] The <select> element can be difficult to style with CSS so consider using a library that works well for styling form widgets. Also, some libraries aren’t readable by screen readers at all. So it may be easier to create your own dropdown menus with non-semantic elements (<nav>, <footer>, etc.), JavaScript, and WAI-ARIA for semantics.
• [ ] Nested <div> along with CSS and JavaScript can get complex and native control is changed with JavaScript. So it’s better to use the <a> element.
• [ ] Adding a slight delay instead of immediately closing submenus when your mouse leaves the area can help when the mouse isn’t precisely hovering over the menu item. This is especially true for touchscreens. This can be done with scripting.

Research links / Resources:

• Building accessible menu systems
• Fly-out menus
• When to use WAI-ARIA
• Select Elements

WCAG Standards:

• Focus Appearance
• How to Meet WCAG (Quick Reference)
• Grouping related links using the nav element
  • ARIA11 Technique - using ARIA landmarks
  • ARIA Landmarks - General Principles
• Keyboard Accessible - sufficient techniques
  • Using CSS when component receives focus - Focus visible
  • Navigable Guideline 2.4
  • Focus Not Obscured
  • Draft - Understanding Focus Not Obscured

[gstemmann]

Progress: currently waiting for approval from dev lead Availability: Sunday 12p - 4p

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, December 12, 2022 at 11:15 PM PST.}

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, December 19, 2022 at 11:16 PM PST.}

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, December 26, 2022 at 11:15 PM PST.}

[blulady]

Hey George!! This is really good,thorough, work. I appreciate you picking it up. I apologize for taking so long to get back to you about it. I have a few suggestions. Let me know if you think they make sense. I think we should also place this content into the research google doc although it doesn't expressly say it in the issue because it's nice to have as much information in one place as possible (namely the audits folder). With that in mind, we might also add a link in the research to this issue. I think it would also be nice to have a link to the Shop example you cite in the first paragraph, third sentence. Thank You!!

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, January 2, 2023 at 11:15 PM PST.}

[gstemmann]

Hey George!! This is really good,thorough, work. I appreciate you picking it up. I apologize for taking so long to get back to you about it. I have a few suggestions. Let me know if you think they make sense. I think we should also place this content into the research google doc although it doesn't expressly say it in the issue because it's nice to have as much information in one place as possible (namely the audits folder). With that in mind, we might also add a link in the research to this issue. I think it would also be nice to have a link to the Shop example you cite in the first paragraph, third sentence. Thank You!!

Awesome, Sarah! Thank you for your feedback. I made the changes you recommended and I absolutely agree it'd be helpful to have as much information as possible in the Audits folder. Please let me know if you have any other thoughts.

[gstemmann]

Progress: Just made some changes recommended by the merge team Blockers: No blockers currently Availability: 6 hours ETA: 1/15/2023

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, January 16, 2023 at 11:16 PM PST.}

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, January 23, 2023 at 11:16 PM PST.}

[github-actions[bot]]

@gstemmann

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, January 30, 2023 at 11:17 PM PST.}

[ExperimentsInHonesty]

@gstemmann Thank you for your work on this. We are putting it in the icebox until we can move the wiki and then it will get added to the wiki in an appropriate section. In the meantime its available here https://github.com/hackforla/website/wiki/Resources#web-developer