search

Finastra / finastra-design-system

The Finastra Design System provided as a theme and components library
https://design.fusionfabric.cloud/
MIT License
122 stars 44 forks source link

[Flat button] Add 2px black border on focus state #304

Closed ronyfinastra closed 3 years ago

ronyfinastra commented 3 years ago

Hello UXG and @ttalbot in order to meet a better wcag compliance i would appreciate if we could add a 2px black border attribute to the flat button component .

Maulik has created the code solution if would be nice if you could assist us with the pool request

**here are the dashed border values:

background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23333' stroke-width='4' stroke-dasharray='14' stroke-dashoffset='40' stroke-linecap='round'/%3e%3c/svg%3e"); border-radius: 10px;``**

link to JPG:

https://ibb.co/x7gKjsJ tnx

ttalbot commented 3 years ago

Hi Rony 👋 ,

Thanks for reaching out. The overall accessibility of the design system is an important concern for the team. We need to keep a balance between appealing design, branding accuracy and good user experience.

Light theme current rating regarding accessibility is WCAG AA.

If you want to deliver your product with even stronger focus, we already provide a simple solution, check here: https://stackblitz.com/edit/uxg-strong-focus

If you need to go even deeper with accessibility in mind, I encourage you to check all the possibilities offered by angular-material.

ttalbot commented 3 years ago

Were you able to move forward with this solution?