accessibility: add focus state styles to interactive elements

[nisarhassan12]

This Pr addresses the following from #1149

This is how it looks with the changes in place.

The dotted outline does not look pretty and provides no benefits to users that are using a mouse. So I have made sure that:

• it only appears when the user is navigating via a keyboard.
• and if in the middle of Navigation let say the user swaps from using a keyboard to a mouse or vice versa for navigation then the handlers will be injected or ejected accordingly.

[shcheklein]

@nisarhassan12 CI failed, please check when you have time

[shcheklein]

@nisarhassan12 can we highlight buttons with some "glow" effect around them? border might look find around links (sometimes), but buttons should have some nice effect. Check the Slack website that you shared - they have some nice effects for buttons.

[nisarhassan12]

Thanks! @shcheklein hopefully I will try to fix the CI and adding the glow effect to the buttons tomorrow.

[jorgeorpinel]

LGTM. I see buttons already have a special style for this too:

No wait I was wrong...

[jorgeorpinel]

Other buttons are missing that indeed

[jorgeorpinel]

Also, and not withing the scope of this PR, but navigating with tab seems to be using hidden elements (probably responsive stuff?) because from [Get Started] to [Download] there's like 15 jumps.

[nisarhassan12]

Also, and not withing the scope of this PR, but navigating with tab seems to be using hidden elements (probably responsive stuff?) because from [Get Started] to [Download] there's like 15 jumps.

Thanks, @jorgeorpinel. yeah, there is the hamburger menu and the links( this is mentioned in #1153).

I will make a separate PR for that.

[nisarhassan12]

About the CI failure maybe it's just me but I think code climate is maybe too strict here depending on what we are trying to do here. indeed the code blocks are similar but they are doing the opposite of each other. @shcheklein do you have any ideas on how one can go about refactoring this. I can split the 2 lines that are responsible for adding/removing event listeners by splitting them into a separate module exported from a different file that both functions can use but that is too much in my opinion i.e they are already function calls with different arguments. What do you say 🙂?

[shcheklein]

@nisarhassan12 yeah, no need to solve all code climate warning! I was talking about CircleCi.

[shcheklein]

It also does not highlight docs sidebar properly.

[nisarhassan12]

let's put all this into src/utils/accessibility.ts looks like one file per function is too much

@shcheklein I tried this I was using a similar approach but it would cause Circle CI to fail because of the way the event handlers work, splitting them into different files was kind of a workaround so that Circle CI does not fail:

Should I do this anyway even if Circle CI fails?

[shcheklein]

@nisarhassan12 I see. splitting into two files probably not a good solution - I would explore if there is a better way to do this

[nisarhassan12]

It also does not highlight docs sidebar properly.

Thanks, I also noticed a few other places where it does not highlight properly I will update the Pr soon and also add some other effect to the buttons other than the outline.

[nisarhassan12]

Thanks, I also noticed a few other places where it does not highlight properly I will update the Pr soon and also add some other effect to the buttons other than the outline.

I have made the changes. @shcheklein please have a look whenever you'll have time.

[jorgeorpinel]

This particular button doesn't feel focused going from transparent to white backgroud:

The other ones in the landing page at least look good but the dashed border is gone from all buttons. Should we keep both things?

[shcheklein]

I asked to remove dashed board from buttons, it think it looks nice that button just have different glow/highlight - looks like enough visually.

[shcheklein]

thanks @nisarhassan12 ! cool stuff.