DS Implementation - SkipNav

[TylerAPfledderer]

🚨As of the initial posting of this issue, a new design needs to be created in Figma by @nloureiro before executing this update. The issue can still be assigned by a contributor in the meantime.

Update the existing SkipNav component to use a new design.

Currently, this component is fully custom in it's styles and handling of the link redirect to content in the given page. Recommend investigating the use of the SkipNavLink and SkipNavContent provided by Chakra to handle in consideration of accessibility.

Be aware that SkipNavLink under the hood renders a primitive a tag with needed logic passed to it. We should retain this render, as its only job is to send the user to the specified section of content.

It also has it's own theme config SkipLink. See source code.

In summary of initial recommendations:

• Remove the custom SkipLink file in favor of keeping styling in the component theme configuration
• Any translated content and href can be supplied at the parent level RootLayout.
• Import SkipNavLink / SkipNavContent directly from Chakra

cc @pettinarip Do NOT assign me! 😅

[murluki]

Could you assign me, please?

[Dharmik79]

@wackerow I want to work on this issue, once the Figma design is updated.

[nloureiro]

@murluki are you able to do the Figma design proposal?

[murluki]

@nloureiro yes, I can help you with this.

[nloureiro]

@nloureiro yes, I can help you with this.

great! will you create a Figma file? or do you want me to create one.

[pettinarip]

@murluki just to clarify, are you doing the design and the implementation in the code? or just the design part? assigning to you in the meantime.

[murluki]

@nloureiro could you please create the Figma file?
@pettinarip I’ll be doing the front end coding part for this task.

[nloureiro]

@nloureiro could you please create the Figma file? @pettinarip I’ll be doing the front end coding part for this task.

go for it!!!
https://www.figma.com/design/EecunGD6oTh62h7rdukaFL/Skip-Nav-component?node-id=1%3A49&t=lHyaiG0J1dR9xp0Q-1

Thank you for your collaboration

[TylerAPfledderer]

@pettinarip @murluki I updated this issue's description to give better clarity in describing what Chakra's SkipNavLink renders.

[surajpsuresh]

Hi I would like to help out on this, is it possible to assign me also to this?

[murluki]

@surajpsuresh Hi, I am actually done with it and will be pushing it tonight

[surajpsuresh]

Okay cool

[surajpsuresh]

@murluki Is it possible to talk to you regarding contributing, best practices and how to actually share design work on GitHub.
I have been looking at tutorials online, but would rally appreciate talking to an actual person on how to navigate in GitHub.

Any time that is convenient for you would work!

Cheers!

[murluki]

@surajpsuresh of course, if you have telegram, hit me up at murluki_prg. I can share some tips with you :)

[surajpsuresh]

Done

[TylerAPfledderer]

@murluki and @surajpsuresh you may reach out to me if you need any clarification of the requirements! 😁

[surajpsuresh]

@murluki and @surajpsuresh you may reach out to me if you need any clarification of the requirements! 😁

Sure @TylerAPfledderer will do, I guess @murluki has completed this for now, keeping an eye out for any new design tasks that may pop up.