search

oblique-bit / oblique

An Angular front-end framework Tailored for your swiss branded business web application, Oblique provides a standardized corporate design look and feel as well as a collection of ready-to-use Angular components. Oblique, through its fully customizable master layout, takes care of the application's structure, letting you focus on the content.
https://oblique.bit.admin.ch
MIT License
56 stars 13 forks source link

Focus selectable doest display the glow effect #133

Open ice-blaze opened 3 months ago

ice-blaze commented 3 months ago

Oblique version

11.3.2

Browser & version

No response

Node version

No response

Device and operating system

No response

Is this a regression?

I don't know

Screenshots

No response

Description

After we programmatically focus on the selectable component, there is no glow effect around the selectable.

Reproduction

https://stackblitz.com/edit/oblique-master-layout-uxtymi?file=src%2Fapp%2Fhome%2Fhome.component.ts

click with the mouse on the focus button, then press one time left shift, only then you will see the glow appearing.

Expected behaviour

Glow should be visible after we programmatically call the `focus()` function.

Context

No response

Proposed solution

No response

nina-egger commented 2 months ago

Hello @ice-blaze

I see what you mean. I noticed we use the :focue-visible selector to apply the focus styling. 

.ob-master-layout *:not(input,textarea,mat-select,select):focus-visible {
    box-shadow: 0 0 0 3px #8655f6;
    outline: none;
}

If I change it to :focus your focus() works. Right now I don't know why we used that selector. Will talk to the team and create a ticket in our backlog.

Regards Nina

nina-egger commented 2 months ago

Progress tracked with ticket OUI-3274