[FIX][Accessibility]: #44575 Improve differentiation of clickable elements in top tab navigation

[ZallaxDev]

According to the BITV test for ILIAS 9, the clickable elements in the top tab navigation were only distinguishable by color contrast, which did not meet accessibility requirements. This PR updates the styles by adding clearer border-bottom indicators and adjusting hover/active states to ensure sufficient contrast and non-color-based differentiation.

These changes improve compliance with WCAG and BITV accessibility guidelines and provide a more accessible user experience.

For reference, see the related ticket: https://mantis.ilias.de/view.php?id=44575

[yvseiler]

Dear @ZallaxDev Thanks for your contribution.

In a discussion with @catenglaender , we reconsidered the original visual proposal and would like to suggest a few changes to make the tab navigation appear less rough and give it a sense of “lightness”. Some of your changes in this PR can still be applied.

Could you please check, if you could add the following changes to your PR?

• [x] Nav Tabs Border should be smaller and lighter -> Services/UIComponent/Tabs >#ilTab: border-bottom: $il-main-border
• [x] Hovered Tab should not have any background color on hover (gives more contrast to tab label)
• [x] Tabs (not hovered, not active ones) needs to have a transparent border so they don't "jump" and text is aligned -> Services/UIComponent/Tabs > #ilTab > li > a: border-bottom: 2px solid transparent

If possible please provide this changes also for ILIAS 10 and trunk.

This would end in following visual design:

Thanks for looking into this. If you have further questions, please contact us.

Best regards @yvseiler & @catenglaender

[ZallaxDev]

Hello @yvseiler and @catenglaender,

Thank you for your feedback and your time! 😊

We have made the changes requested, and the result is as shown in the image.

We have some doubts about one of the changes made, specifically in lines 60, 61, and 62 of the _component_tabs.scss file.

#ilTab > li > a:focus {
    border-bottom: 2px solid $nav-tabs-active-link-hover-bg;
}

After multiple tests, we noticed that the focus state of the ilTab buttons showed the color of the new black border as transparent.

This problem was caused by the include on line 37 in the same file: @include focus.clear-focus-for-override($clearAfter: true);

Inside, the border is set with the inherit property, which assigned the initial transparent color to the border in the focus state.

After several attempts to fix it where the hover and focus states are set, the only way we have found to persist the black border in this state has been to add these additional lines to maintain the priority of this rule.

We are not sure if this is the most appropriate solution in this situation, but we have not found a better solution to the problem.

We look forward to your review and will be ready to make further modifications if indicated.

Once again, thank you all very much for your time.

Best regards, Daniel.