Minor cosmetic issues with the visible focus outline fixed

[AllanOXDi]

Summary

This PR fixes minor cosmetic issues with the visible focus outline.
closes #9484

References

Before:
## Reviewer guidance

After:

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[marcellamaki]

Hi @AllanOXDi - this looks good. I see the change you have on the manage permissions page grid. 👍 However, I think maybe you forgot to push some of your changes - the "Add new address" updates aren't here.

[AllanOXDi]

I think that's the only change I made. It should be able to work as intended.

[pcenov]

Hi @AllanOXDi there are 3 specific issues mentioned in #9484 while the only one that is actually fixed by this PR is the one on the 'Device permissions' page. How do we proceed with the other issues?

[AllanOXDi]

@pcenov, This commit should be able to address it. I am worried about the border moving up. Tagging @jtamiace for her insight on this.

screen-.3.webm.mp4

cc @radinamatic

[jtamiace]

@AllanOXDi I'm not sure what the solution here is via code, but it would be ideal if the border could remain on the gray line.

[AllanOXDi]

This would be the best option . But that would require us to make changes from the header tab. My fear is when we make a change from that component, it will break a lot of things.

[jtamiace]

I see. I'm not sure if this makes more sense as a separate issue, but if changes are needed to the component itself, I've been looking at an alternative layout for these tabs in designs for a separate project that might also address this outline problem?

[marcellamaki]

Hi @AllanOXDi and @jtamiace -

Jessica, these are interesting updates! I think better addressed in a separate issue, and we can make sure that the focus changes are still prioritized there, though. But, thanks for sharing this as an option. When we create a KTabGroup component, then at least on the code side, this side panel would be a place we would want to refactor and use it. (Not saying it has to inform your designs.... just that we will be happy to add these designs as we refactor that - we can do it all in one project perhaps!)

Allan - I have a suggestion for a way to update the HeaderTab.vue component that doesn't require making too many changes that might break things. My idea is to swap your changes and instead add:
outline-offset: -2px !important;

to the .header-tab class to get:

This is not something you could have reasoned out without knowing more, so here's some context:

• Generally, we try to avoid using !important where we can, as it's an override, and it might indicate that there is another or better way to do something
• However, this focusOutline and it's "offset" are set in KDS in the main theme to be 4px (this is kind of KDS trivia, but good to remember!)
• This means that the focus outline being slightly larger than the element is the default behavior
• In almost all instances, this makes sense! It looks cleaner to have the focus outline going around a button, for example, than on top of it, and prevents potentially covering up or cutting off information, especially on smaller sizes.
• However, I think you may have found an instance where we need an exception, not the rule! There are a handful of other places where we use the same fix in other places in Kolibri (search for "outline-offset" and you'll see it)
• The most common places we have to adjust is situations like this - where we have a focusable element, such a link or button, that is visually distinct from the KDS defaults, or when they are layered or immediately next to other elements. In this example, the focus outline is there, it's just behind the rest of the side panel.

Give it a try and see what you think. The outline is not quite as pretty this way, as it is not entirely in the shape of the nice rounded tab, but I think that's okay.

[pcenov]

Fantastic @AllanOXDi - the visible focus is now displayed correctly in all 3 cases.

[radinamatic]

Great job, thank you @AllanOXDi!

Manual QA passed, good to go! 🥳 💯

[marcellamaki]

Nice work @AllanOXDi!