Fix the dropdown menu design for toolkit page, projects page, and wins page

[sijiapitts]

Overview

During a site audit on Figma design file and on the website, we noticed that the drop-down menu design is not consistent. Each page has its own font size, margin, padding, etc.

We decide the first step is to fix the dropdown menu on the toolkit page. Afterwards, we will move on to the projects page and wins page.

Update

Originally we thought this would be a quick task since updating the dropdown UI is an easy fix. But after looking into the issue, the team decided to move the dropdown menu from the top of the section to a side bar. After a few rounds of iteration and usability testing, the team decided to use this design.

Action Items

• [x] Fix the inconsistency of padding
• [x] Fix the inconsistency of font sizes
• [x] Determine the layout
• [x] Determine design details of the dropdown
• [ ] Implement the new design on toolkit page
• [x] Implement the new design on project page
• [ ] Implement the new design on wins page
• [ ] Review with design lead

Resources/Instructions

Design Systems Figma workfile

[github-actions[bot]]

Hi @sijiapitts.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing: Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[phuonguvan]

@sijiapitts Please give me updates on what you will be working on. Please also give me the Figma file so I can clean up the details on the issue.

[sijiapitts]

@phuonguvan I have included the Figma link to the descriptions.

I will still be working on fixing the dropdown menu. But because we may add more toolkit categories in the future, we will need to change the web menu design to dropdown menus as well (like the project page and wins page). When working on this issue, I will use the project page as a reference.

[sijiapitts]

Blocker: Do we need a multi select dropdown (dropdown with check box) for the toolkit page?

Because the nature of the toolkit page, I think users rarely will need to select multiple categories at the same time. In this case, a single select dropdown may be more intuitive and easier to use.

[sijiapitts]

1. Progress: Clarified the design direction for toolkit filters during the meeting on 7/10. We are trying to make the toolkit page filter work the same way as the landing page. Will create multiple filters(practice area, tools, and status) and checkboxs inside of dropdown (so people can select multiple items).
2. Blockers: No blockers
3. Availability: 5 hours
4. ETA: by the next meeting on 7/13

[ExperimentsInHonesty]

Filters Needed

• ~Program~ Practice Areas (Product Management, Design, Research, etc.)
• Tool (Figma, GitHub, Miro, etc.)
• Type (article, plugin, video, guide, etc.)
• Status (Completed, Work In Progress, Depreciated)
• Contributors (for internal guides all contributors will be listed)
• Source (Hack for LA, Code for America, Other)

Example of left filter from another project

http://civictechindex.org/search-projects (search for food to see filter)

[ExperimentsInHonesty]

@sijiapitts fyi, I opened this issue to have the development team add the other filter content to the code so that when the design is done, they can make the new filters right away

• https://github.com/hackforla/website/issues/3357

[github-actions[bot]]

@sijiapitts

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, August 30, 2022 at 12:27 AM PST.}

[7kram]

@ExperimentsInHonesty Lets add a Homepage launch milestone to the issue

[github-actions[bot]]

@sijiapitts

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 6, 2022 at 12:28 AM PST.}

[sijiapitts]

We did usability testing with the entire team on 9/11 to check what works best for Hack for LA website regarding filter items. We showed the team members two options, as seen here.

The team decided that the best option for our website would be:

• Filter items should stay on the side bar
• Dropdown menu stays open by default
• Add show all when the list gets too long
• The list items with the most results should be on the top. When users click show all, then the results will be displayed in an alphabetical order.

Please refer to the link above as an example.

[github-actions[bot]]

@sijiapitts

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 20, 2022 at 12:39 AM PST.}

[github-actions[bot]]

@sijiapitts

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.}

[github-actions[bot]]

@sijiapitts

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, October 4, 2022 at 12:32 AM PST.}

[ExperimentsInHonesty]

• [ ] Create new issues:
  • [x] Adapt new Projects page Filters and Search design to Toolkit page
  • [x] Adapt new Projects page Filters and Search design to Wins page
• [ ] Put a screen shot of the New designs in this issue and a link to the Figma file
• [x] Close issue (which will send it to Q&A
• [ ] Q&A/Product will review and send to dev leads for new development issue creation.

[github-actions[bot]]

@sijiapitts

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, October 11, 2022 at 12:39 AM PST.}

[sijiapitts]

The design has been completed and approved. The final design (ready for developers) can be found here or under the project description.

In Figma, I have added some notes to the side and added additional comments on the design to better help the developers understand the design and interaction.

[7kram]

See the previous comment from Sijia.

Additional Note for Dev Lead Writing This Issue: This is a new visual version of how the filters will appear. When refactoring it, the goal is to make it a component that can be re-used on multiple pages with different filters specified

[ExperimentsInHonesty]

once you make the issue stick it in the icebox with the following

### Dependency 
- #3256 

[blulady]

Reached out to Sijia with questions.

[blulady]

• Should we do some research about accessibility like we were going to with issue #2286 (Do we still need to do this audit if the drop down menu is changing?) or Azania's issue #2173

[ExperimentsInHonesty]

• I don't think issue has anything to do with the sticky nav #2173. If you think it does, please be specific in your note.

[ExperimentsInHonesty]

@blulady I am unclear what you are asking in your comment above

Should we do some research about accessibility like we were going to with issue https://github.com/hackforla/website/issues/2286 (Do we still need to do this audit if the drop down menu is changing?)

I tried to look at the issue you reference, but it's too big for that. It has so much info in the comments and there is no summary at the top. In fact, I have no idea what work is left to be done on that issue, because all the checkboxes are checked. If the comments require new work, they should be summarized into action items in the top of the issue.

If you want me to do something on this issue, please summarize your ask and the information I would need to make the decision into one comment.

[blulady]

@ExperimentsInHonesty All apologies for being unclear. What I was trying to suggest was that we should do research on how to make the drop down menu accessible like Azania did here? Or should I just move forward in creating an issue to create the drop down menu for the projects page?

[ExperimentsInHonesty]

@blulady I think we can make an issue for dev to build this function and while they are building it, take into account accessibility of navigating the filters with keyboard. See these Resources come from this comment from Z on another issue

Resources

• Keyboard Accessible - sufficient techniques
• Using CSS when component receives focus - Focus visible
• Navigable Guideline 2.4
• Focus Not Obscured
• Draft - Understanding Focus Not Obscured

Dependency

once you make the issue stick it in the icebox with the following

### Dependency 
- #3256 

[blulady]

See the previous comment from Sijia.

Additional Note for Dev Lead Writing This Issue: This is a new visual version of how the filters will appear. When refactoring it, the goal is to make it a component that can be re-used on multiple pages with different filters specified

Drafting up this issue, saw that issue #3626 is also ready for dev lead per the comment quoated above do we want to make this issue a dependency for #3626?

• #3626

[blulady]

• Keyboard Accessible - sufficient techniques

• Using CSS when component receives focus - Focus visible

• Navigable Guideline 2.4

• Focus Not Obscured

• Draft - Understanding Focus Not Obscured

So I went to make the new issue and went ahead and looked at issue

• #3256 And realized that the issue was no longer in the icebox and is currently being worked on. I went to take a look at that issue and that issue has the Developer creating a file called _dropdown_filters.scss in the elements folder. It looks like this is where I should have the developer working on this issue put the css they will be working on. Just wanted to explain my thought process on how to structure the issue
• #3744

[blulady]

@blulady I think we can make an issue for dev to build this function and while they are building it, take into account accessibility of navigating the filters with keyboard. See these Resources come from this comment from Z on another issue

Resources

* [Keyboard Accessible - sufficient techniques](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=211#principle2)

* [Using CSS when component receives focus](https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html) - [Focus visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)

* [Navigable Guideline 2.4](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)

* [Focus Not Obscured](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#2412-focus-not-obscured-minimum-aa)

* [Draft - Understanding Focus Not Obscured](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum)

Dependency

once you make the issue stick it in the icebox with the following

### Dependency 
- #3256 

So I went to make the new issue and went ahead and looked at issue

• #3256 And realized that the issue was no longer in the icebox and is currently being worked on. I went to take a look at that issue and that issue has the Developer creating a file called _dropdown_filters.scss in the elements folder. It looks like this is where I should have the developer working on this issue put the css they will be working on. Just wanted to explain my thought process on how to structure the issue
• #3744

[ExperimentsInHonesty]

• @blulady thanks for the info
• I added a dependency label to #3744 and put it in the icebox