[WDTK] Improved focus state for buttons

[lucascumsille]

Relevant issue(s)

Discovered while working on a blog about accessibility for WDTK

What does this do?

Makes the focus state more obvious for users with visual impairments

Screenshots

Screen.Recording.2024-09-09.at.15.31.03.mov

Notes to reviewer

[garethrees]

So nice! ✨

[gbp]

There are a few buttons I've found which don't have the new focus state.

All Pro styled buttons:

Donate button in the footer:

And the homepage "Make a request" button unfocused state is yellow so there isn't much difference when focused:

[gbp]

@lucascumsille can I check if the focus state should be shown on all footer anchors or not. Seems a bit strange...

footer-active-state.mov

[gbp]

@lucascumsille also the yellow button on the homepage... looks like you've increased the size of boarder but haven't changed the colour of the button. Are you happy with the focus state on that now?

[lucascumsille]

@gbp I have included the changes made on this PR on the current PR instead. I think with these commits, we should be covering all cases.

As a summary:

• Added transition effect to footer button.
• Added a more visible focus state. Using a light outline and a dark box-shadow with no blur, we cover scenarios where the button background has a different level of lightness.
  The default button has a hover effect and a background that is slightly different from white, so when hovering over it right next to a tertiary button, the user doesn't get confused.
  Remove transitions from hover effects. We don't need to duplicate them; as long as the transition is in the default state, the other states will inherit it.
  The styling for hover and focus has changed so that it changes only two properties compared with the default button, making it clearer for users with visual impairments.
• The hover effect for the links in the footer wasn't accessible, so I made them lighter.

Pending(Potentially):

can I check if the focus state should be shown on all footer anchors or not. Seems a bit strange...

• At the beginning, I included the focus state for links as well; I took as an inspiration GOVUK. It's not so strange, and might not be the most aesthetically pleasing effect, but it's familiar for users that use the keyboard to navigate. I didn't include it in this PR, though, because in your video, I noticed that it messed up links with logos(footer and navbar). But if you think those are the only two cases where we might end up with a problem, then it might be easier to add a rule to exclude those classes with logos(assuming we are happy to move ahead with the effect for the focus state with yellow bg).

We are currently using transitions for buttons. Do you want me to include one for the links as well? I was wondering if there was a reason why it wasn't included initially.

Preview

Screen.Recording.2024-09-19.at.11.21.21.mov

Screen.Recording.2024-09-19.at.11.19.21.mov

Screen.Recording.2024-09-19.at.10.36.37.mov

Screen.Recording.2024-09-19.at.10.35.46.mov

[gbp]

This is looking good. Only one point, the preview video of the yellow homepage button doesn't look like what I'm seeing. It is first going to dark blue then suddenly to the lighter shade of blue. Where there any changes made after the video was made or could it be an issue with the browser I'm using?

[lucascumsille]

@gbp the :visited was overriding the styling, I added a fixup that should prevent that from happening.

Screen.Recording.2024-10-08.at.08.35.23.mov

[gbp]

Amazing - thank you 👍

[lucascumsille]

@gbp Thanks =) I just rebased, but would you prefer me to make everything one commit or maybe two(buttons and one for the footer)?

[gbp]

@gbp Thanks =) I just rebased, but would you prefer me to make everything one commit or maybe two(buttons and one for the footer)?

Whatever you feel makes the best sense, even if it's just the 4 commits as they are.