Should `:focus-visible` override `:focus` styling?-CodePudding

Is :focus styling supposed to override :focus-visible?

I am trying to make a site keyboard accessible and apply my own :focus-visible styling where possible.

My :focus-visible styling is successfully working with most of my button elements but is not working with my 'Log Out' button in which some twitter bootstrap focus styling is overriding my own focus-visible styling despite the bootstrap import statement being a lower priority.

How do I make :focus-visible styling higher priority than :focus styling?

Update: Below is a link to a screenshot of the DevTools with the first 3 stylesheets listed being standard bootstrap found in the node_modules folder. The 4th stylesheet is my own which attempts to just style the :focus-visible elements. Screenshot of Devtools summary

HTML Button:

`<button id="logOut"  (click)="onLogout()"><i ></i>Log out</button>`

My SCSS:

`:focus-visible {
    background-color: #143a84;
    color: #fff;
}`

Bootstrap SCSS:

`.btn-dark:focus, .btn-dark.focus {
    color: #212529;
    background-color: #cdcdcd;
    border-color: #c7c7c7;
    box-shadow: 0 0 0 0.2rem rgb(195 196 197 / 50%);
}`

Currently when I tab onto the button with the keyboard the bootstrap focus styling applies as opposed to the :focus-visible styling I have set.

CodePudding user response：

Try with this code if you only want for :focus-visible. If you want for :focus also please add #logOut.btn-dark:focus

#logOut.btn-dark:focus-visible {
    background-color: #143a84 !important;
    color: #fff !important;
        border-color: unset !important;
        box-shadow: unset !important;
}

<button id="logOut"  (click)="onLogout()"><i ></i>Log out</button>



<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-reboot.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-grid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

CodePudding user response：

In accordance with @Meghna's answer (thank you btw!) I have discovered that adding the following code snippet does achieve my goal of getting the button to display the focus-visible styling rather than the focus styling, however, I'm still unclear as to why the original did not work resulting in me needing this additional styling.

`.btn-dark:focus-visible {
    background-color: #143a84;
    color: #fff;
}`

I have been trying to avoid using !important where possible as it can make future styling difficult and is widely advised against in what I have read but thanks again for your answer.

I therefore now have a fix but it is more of a workaround rather than understanding the original root cause of the problem.