-
-
Notifications
You must be signed in to change notification settings - Fork 766
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
Design System: Audit Sticky Side Nav element #2173
Comments
This comment has been minimized.
This comment has been minimized.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
Hi @AzaniaBG, thank you for taking up this issue! Hfla appreciates you :) Do let fellow developers know about your:- You're awesome! P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :) |
Availability: 7 AM - 8 AM 10/8/2022; 7 AM - 8 AM 10/9/2022; 10 AM - 11 AM 10/10/2022; 1 - 4 PM 10/11/2022 |
Weekly update: I'm almost finished with the write-up, but I have a question that I was not able to address at Tuesday's meeting. I will also be attending Sunday's meeting to discuss this issue, so my new ETA is 10/16/2022 by 10 AM. |
Write Up:Research Findings:
(see this article for details)
Summary:The CSS styles and JavaScript logic for the sticky sidebar addressed many of the problems that a sticky sidebar might cause. Therefore, my recommendations include keeping the dynamic styles using JavaScript. I also recommend adding features related to keyboard accessibility and navigation as well as using proper color contrast ratios for the links within the sidebar (according to this color contrast checker, the color contrast is not sufficient for font sizes below 18pt/24px). Recommendations (based on Research Findings above):
Research links / Resources:
WCAG Standards:
|
Update: I added my Write Up via comment and Released #2174 by moving the issue to the "New Issue Approval" column. I'll be attending Sunday's meeting (tomorrow) to discuss re-design. |
@blulady I spoke with @sijiapitts on the design team regarding re-design recommendations and she provided this link to Figma with 3 possible designs (current, larger font-size, same font-size, different color) for the sticky side nav. Should this link also be added to #2174? |
Update: at the All-Team meeting Sunday, we discussed the new Figma designs Sijia created based on WCAG recommendations set forth in this issue. Bonnie approved one of the options and Sijia put this final design in a pink box. I'm not able to edit the Figma to add this issue number, but I gave it to, and I believe she will add it. |
Update: Issue number 2174 has been added to Figma next to the design frame. |
Looks like amazing work as always @AzaniaBG. You did everything the issue asked and more. I love the test sections of the comment you left. Do you think I could possibly ask you to do one more thing and add this to the wiki? It would be a shame if we had all of this great info on how to make a sticky side nav and just left it in a comment on an issue somewhere. |
@blulady ~ thank you! yes, of course ~ i can add it to the wiki. Can you clarify which wiki i should add it to? |
Add write up to Wiki ETA: 10/27/2022 by 5 PM; Availability: 10/27/2022 10 am - 11 am; 4 - 5 PM |
Thank you. I believe this issue is closed. |
Overview
We need to review the current sticky side nave and create a standard for the component so that when you see two pages with that navigation style, they function the same and that they are WCAG compliant and have the best industry practices.
Action Items
Resources/Instructions
Where the sticky nav can currently be seen
The text was updated successfully, but these errors were encountered: