fix(a11y): completed-step focus accessibility

[harmeet01singh]

Changed completed-step outline color to secondary color on focus

Checklist:

• [x] I have read and followed the contribution guidelines.
• [x] I have read and followed the how to open a pull request guide.
• [x] My pull request targets the main branch of freeCodeCamp.
• [x] I have tested these changes either locally on my machine, or GitPod.

Closes #50023

[ghost]

:eyes: Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[bbsmooth]

The focus outline looks good in both light/dark mode.

From the issue:

Also, while we are fixing this, I would recommend we increase the font weight from 700 to 900 and the font size from 1.3rem to 1.5rem on the completed steps to make the difference in those numbers stand out a little more since we can't rely on the background color for the completed steps to convey their state since they don't have enough color contrast with the background.

Any objection to doing this? I feel like the current difference in the display of the completed step numbers is barely enough to be detectable and thus we are just barely fulfilling the requirement for WCAG 1.4.1.

[harmeet01singh]

Had some doubts in that, you only want this behaviour to occur when the elements are keyboard focused only or on mouse hover as well. I think it makes sense to do it for both.

[harmeet01singh]

Hi @bbsmooth , any update on this? Are we taking the font size changes on as other features? Or should I do the changes in this PR itself?

[Sboonny]

@harmeetsingh01, adding hover is outside the scope of the issue, and what Bruce and I worried about based on the original issue.

We can discuss it after the original issue is closed, because we can improve the design as well if needed.

[harmeet01singh]

Understood @Sboonny , will add the discussed font changes on focus in a while then.

[bbsmooth]

@harmeetsingh01 Sorry, I've been gone for the past couple of weeks and forgot to get back to you on the font size and weight. It's not my decision, but it sounds like @Sboonny is OK with increasing both to my suggestions for completed steps.

Please note, this has nothing to do with either focus or hover. The font changes should be present at all times for the completed step. Right now the font size on a completed step is 1.3rem and the font-weight is 700. But that change is hardly noticeable. So I am suggesting we up it to 1.5rem and 900 to make it stand out more.

[harmeet01singh]

Oh, Thanks for clearing it up, I was a bit confused and thought we want the increase in font size on focus or hover. Understood, will push the necessary change.

[harmeet01singh]

Thanks to you @Sboonny and @bbsmooth as well for helping me. Looking forward to more such collaborations in the future.