search

SAP / fundamental-styles

SAP Design System component library for building SAP user interfaces with any web technology.
https://sap.github.io/fundamental-styles
Apache License 2.0
185 stars 60 forks source link

fd-button focus not visible for input type buttons #5276

Closed yoganjan closed 1 month ago

yoganjan commented 5 months ago

Describe the bug When input tag is used as a button (Type button and submit) , focus outline is not visible for fd-button classes when the button is in focus. This is failing the accessibility norms.

Is this issue related to a specific component? Yes . Button

What version of the Fundamental Library Styles are you using?

0.29

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Successfactors

What front-end framework are you implementing in, e.g., Angular, React, etc.?

Juic

Expected behavior Focus outline should be visible

Screenshots When Button tag is used as Button , when the button is in focus

image

When Input tag is used as button , when the button is in focus

image

Desktop (please complete the following information):

droshev commented 5 months ago

@yoganjan You are right and this is due to the button design. We rely on the pseudo-selectors :before and :after, which are not supported by input. Can't you use the html element button instead?

yoganjan commented 5 months ago

Hi @droshev , We are trying to apply fundamental styles to all the legacy pages. We will not be able to modify for the all pages as that will have impact on automation scripts as well.

is there any other way we can fix these issue using css ?

Thanks, Yoganjan