bug(a11y): sbb-form-field should support negative context

[WalkingOS]

Preflight Checklist

• [X] I have read the Contributing Guidelines for this project.
• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Bug type

Accessibility

It affects the following packages

Design Tokens

Which version of Lyne Components are you using

0.33.10

Operating system

No response

Browser / Browser version

No response

Input mode

None

Additional settings

No response

What happened?

If we have a dark background and want to use a form-field, we should have a light focus style when tabbing to the field.

use case (search-overlay with a negative sbb-dialog)

Steps to reproduce the issue

1. Step one
2. Step two
3. ...

Relevant log output

No response

[jeripeierSBB]

Hi @WalkingOS

This is probably not well documented, but wherever you set the dark background in styles, you should set `--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); With that, all arbitrary usage of the focus outline will be changed.

[jeripeierSBB]

@WalkingOS : My answer was wrong!

For the sbb-form-field we don't use normal focus outline, so we need to create a special solution here for negative context. @mcilurzo, Can you think about a solution?

[WalkingOS]

@jeripeierSBB at least you can give the delete-button the focus style.

I'm not sure if this the scope of this. But it seems that the cursor of the input field is not visible when the background is negative

[jeripeierSBB]

hmm I see the cursor. In which browser you don't see the cursor?

Fix for cases like the delete button: https://github.com/lyne-design-system/lyne-components/pull/1947

[WalkingOS]

@jeripeierSBB True.. in Macos Chrome/safari its working. In Windows chrome i dont see the cursor :D

[jeripeierSBB]

@jeripeierSBB True.. in Macos Chrome/safari its working. In Windows chrome i dont see the cursor :D

At least with a remote connection to a windows computer I couldn't reproduce this. I'll have to try later. Did you also test with https://lyne-components-preview-pr1815.app.sbb.ch/iframe.html?args=&id=pages-search-overlay--search-instant-results&viewMode=story ?

[mcilurzo]

negative form-fields: https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?type=design&node-id=140%3A23&mode=design&t=wTD4Pg1oFNHF8scT-1