Chore(focus): new focus indicator

[AugustinMauroy]

Description

Fixing unclear focus indicator and remove useless indicator

Context of this choice:

Context

Render:

Related Issues

Related issue #2925

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run lint:js -- --fix and/or npm run lint:md -- --fix for my JavaScript and/or Markdown changes.
  • This is important as most of the cases your code changes might not be correctly linted
• I have run npm run test to check if all tests are passing, and/or npm run test -- -u to update snapshots if I created and/or updated React Components.
• I have checked that the build works locally and that npm run build work fine.
• I've covered new added functionality with unit tests if necessary.

[github-actions]

Please find a preview at: https://staging.nodejs.dev/3253/

[ovflowd]

I still don't believe this is a good focus indicator. Not to mention you're removing the outline of one of the components, which is not a good idea.

We already went over and over the why's. I appreciate you want to come up with a solution, but this is not a good solution, and it was explained why in the Issue.

As mentioned before, the issue is that for items with a green border or background, adding a "focus" class with a very similar colour isn't suitable for contrast reasons. For example, the screenshot below:

Not to mention, the focus colour should also be different based on our theme. I still believe we could either:

• Pick two neutral contrast colours for each theme (light/dark)
• Pick two accent colours (accent colours are colours that follow our colour schema) for each theme (light/dark) with the caveat that for elements that have borders/backgrounds similar to the accent colour, we should provide a different colour for 'em.

We should apply outline-offset CSS property and use :outline-visible instead of :outline.

[AugustinMauroy]

We should apply outline-offset CSS property and use :outline-visible instead of :outline.

I will add this.