Design System: Audit Sticky Side Nav element

[Aveline-art]

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

• [x] Find all instances of the HTML, CSS, or (inclusive) JS code for the sticky side nav from all pages (one can be found on the about page) as of issue creation.
• [x] Research online on what the standards are in terms of HTML tags, accessibility, etc. for this component.
• [ ] Do a write-up on your research as a comment on this issue.
  • [ ] If the recommendation requires visual changes, bring to Sunday meeting to have designers create a new redesign issue for design.
  • [ ] If the recommendation requires a refactor or other non-visual changes to the component (and can be made before redesign), please release dependency on #2174
    • [ ] Add a link to your write-up in issue #2174

Resources/Instructions

Where the sticky nav can currently be seen

• about page
• Figma, Guides pages - Alyssa is the designer and developer who started the new guides page layout that includes the sticky menu

[Aveline-art]

@abuna1985 I have made this issue and #2174 for the side nav. Please give me feedback on whether this is up to your standards for the design system and your plans for its rollout.

[github-actions[bot]]

@adrian-zaragoza

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: "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, November 2, 2021 at 12:03 AM PST.}

[github-actions[bot]]

@adrian-zaragoza

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: "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 8, 2021 at 11:03 PM PST.}

[github-actions[bot]]

@adrian-zaragoza

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: "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 Thursday, November 18, 2021 at 4:50 PM PST.}

[github-actions[bot]]

@adrian-zaragoza

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: "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 22, 2021 at 11:19 PM PST.}

[ExperimentsInHonesty]

@adrian-zaragoza I see that you removed your assignment. Do you want this issue to be moved back to prioritized backlog?

[adrian-zaragoza]

Hi @ExperimentsInHonesty , Yes that is correct. This should be moved back to the prioritized backlog.

[A-BMT02]

I will try to work on this issue

[ExperimentsInHonesty]

Hi @A-BMT02 The issues you are eligible to work are defined by the last issue you worked on, and you progress through issues with increasing complexity in the following order: Good first issue Good second issue Small Medium Large

Please do not do the issues out of order. We are trying to teach you the team methodology through the issues themselves. If you skips to a large issue, it placed a burden on the tech leads to explain things that will be obvious if you do each size issue in turn. It also ensures you understand what we expect and quality of contributions.

I have unassigned you from this issue.

[A-BMT02]

I didn't realize there was an order of complexity to follow Thank you so much for the clarification I appreciate

[1anya1]

Availability for this week: 8 hrs My estimated ETA for completing this issue: Tuesday March 22, 2022

[1anya1]

Progress: Still researching Blockers: None Availability: 8hrs ETA: By monday Mar 28, 2022

[github-actions[bot]]

@1anya1

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

[JessicaLucindaCheng]

@1anya1 Please provide an update that includes Progress, Blockers, Availability, and ETA. Thanks.

[github-actions[bot]]

@1anya1

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

[github-actions[bot]]

@1anya1

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

[SAUMILDHANKAR]

@1anya1 Please let us know if you are still working on this issue or your availability has changed. Will leave a slack message as well. Thank you.

[1anya1]

@SAUMILDHANKAR Thank you for follow up. I am still workin on this issue. Progress: Still researching Blockers: None Availability: 8hrs ETA: By monday April 25, 2022

[github-actions[bot]]

@1anya1

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: "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, April 26, 2022 at 12:21 AM PST.}

[github-actions[bot]]

@1anya1

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

[SAUMILDHANKAR]

@1anya1 Just wanted to follow up on your progress update. Please let us know in a comment below. Thank you.

[github-actions[bot]]

@1anya1

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: "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, May 10, 2022 at 12:23 AM PST.}

[github-actions[bot]]

@1anya1

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: "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, May 17, 2022 at 12:21 AM PST.}

[SAUMILDHANKAR]

@1anya1 Please let us know if you are still working on this issue or your availability has changed. Will leave a slack message as well. Thank you.

[github-actions[bot]]

@1anya1

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: "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, May 24, 2022 at 12:21 AM PST.}

[SAUMILDHANKAR]

@1anya1 Planning to unassign you from this issue due to inactivity. Please let us know when your availability changes. Will send an email as well. Thanks.

[github-actions[bot]]

@1anya1

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: "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, May 31, 2022 at 12:19 AM PST.}

[github-actions[bot]]

@1anya1

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: "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, June 7, 2022 at 12:21 AM PST.}

[github-actions[bot]]

Hi @AzaniaBG, 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 :)

[AzaniaBG]

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 ETA: 10/11/2022 by 7 PM