[Link/SegmentedButton]: [SF][A11y] Styling and focus issue of Segmented buttons and Link in Windows High Contrast theme

[Ankitadoshi]

Describe the bug

When we apply High contrast theme in windows system using following steps:

1. Select Start then Settings then Ease of Access then High contrast
2. Turn on the toggle under Turn on high contrast
3. Select a theme from the drop-down menu
4. Select Apply

Then the styling for segmented buttons is not proper. Also when we focus on Link elements, the focus styles are not clearly visible

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/data-display-link--default&globals=theme:sap_horizon_dark, https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/inputs-segmentedbutton--default&globals=theme:sap_horizon_dark

Reproduction steps

1.Turn on Windows High contrast theme by following below steps:

• Select Start then Settings then Ease of Access then High contrast
• Turn on the toggle under Turn on high contrast
• Select a theme from the drop-down menu
• Select Apply

2. Open storybook link for segmented button and observe that the buttons are not styled correctly
3. Open storybook link for the Link and focus on the link via tab key. Observe that the focus is not clearly visible

Expected Behaviour

In windows HC themes, 1) Styling for the segmented button should be correct 2) Link focus should be clearly visible

Screenshots or Videos

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

No response

Organization

SF

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[IlianaB]

Hello @ui5-webcomponents-topic-b , I am not sure this is a supported scenario, but I am forwarding this ACC issue to you, so that ACC experts can decide.

When using High Contrast Theme on Windows machine with sap_horizon_dark theme SegmentedButton and Link do not have correct styles, including when focused.

To reproduce:

• on a Windows machine: Settings > Accessibility > Contrast themes --> choose one from the drop-down menu and click Apply button then open the samples links, mentioned above.

Regards, Iliana