Open abuna1985 opened 2 years ago
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)
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 :)
Availability: Tuesday - Thursday ETA: End of day Wednesday
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!
@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.
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.
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
@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.
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.
@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.
@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.
I am finished with this issue and looking for it to get reviewed. Here is the Spreadsheet @hackforla/website-merge
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
@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?
Do the drop downs on the https://www.hackforla.org/ and https://www.hackforla.org/#press count too?
@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.
@hackforla/website-merge Can I get a review on this please 🙂
@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.
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
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
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.
@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.
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 :)
i. Availability: Tuesday 6-9 pm ii. ETA: 11/10/22
Progress: I have reviewed the past work and spreadsheets that were completed. Blockers: No blockers at the moment. Availability: Will have time today
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.
@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.
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.
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
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):
<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.<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.WCAG Standards:
Progress: currently waiting for approval from dev lead Availability: Sunday 12p - 4p
@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.
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.
@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.
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.
@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.
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.
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!!
@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.
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.
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.
Progress: Just made some changes recommended by the merge team Blockers: No blockers currently Availability: 6 hours ETA: 1/15/2023
@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.
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.
@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.
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.
@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.
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.
@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
Dependency
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
Resources/Instructions
Click here to see example of the dropdown element