Design a fix the dropdown menu design for projects 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 decided that 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.

• Toolkit page issue Design a fix for the dropdown menu design for toolkit page #3626
• Wins page issue Fix the dropdown menu design for wins page #3627

Update

The toolkit page met a blocker, so the team decided to finish the project page first

Action Items

• Fix the inconsistency of padding
• Fix the inconsistency of font sizes
• Determine the layout
• Determine design details of the dropdown
• Implement the new design
• Review with design lead

Resources/Instructions

Design Systems
Figma workfile
Final design

[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]

@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?

• Design a fix for the dropdown menu design for toolkit page #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

• Create filter_dropdown.scss File in Elements Folder #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
• Fix the dropdown menu design for projects page #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

• Create filter_dropdown.scss File in Elements Folder #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
• Fix the dropdown menu design for projects page #3744

[ExperimentsInHonesty]

• @blulady thanks for the info
• I added a dependency label to Fix the dropdown menu design for projects page #3744 and put it in the icebox