1

For a11y(accessibility) I added this css which I can't change .Below css is always present in my demo application. I don't have any control to change that css.

button:focus,
a:focus {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

but issue is when I click on button it show me outline . how to remove that outline on button click .

to resolve this issue I saw two option .

  1. use blur event on click .It hide the outline . but for few second it show the outline .this does not work for me
  2. use this pseudo https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible .but it does not work on safari

is there any better way or any custom. hook which remove focus on button click ?

Here is my code

https://codesandbox.io/s/angry-lamarr-lz586?file=/src/styles.css:59-207

function handleProductNavigation(event) {
    btnRef.current.blur();
    console.log(btnRef.current.blur);
    //event.currentTarget.blur();
  }
user944513
  • 12,247
  • 49
  • 168
  • 318
  • 2
    That MDN page refers to a [polyfill](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#polyfill) for Safari. Maybe that can work for you? – jmargolisvt Jun 09 '21 at 02:27
  • `:focus-visible` is the way to go. And for Safari you can either introduce a polyfill or to add a `shame.css` with some good old hacking: `button:focus:not(:focus-visible) { outline-color: transparent !important; }` – Martin Jun 09 '21 at 10:29
  • can you please check this question https://stackoverflow.com/questions/67901731/cannot-focus-button-using-tab-key-navigation-on-safari/67901876#67901876 – user944513 Jun 09 '21 at 10:38
  • not working on safari browser ..I have already done all steps which is mentioned in answer https://codesandbox.io/s/charming-paper-k7bg3?file=/src/styles.css – user944513 Jun 09 '21 at 10:39

1 Answers1

1

You can use the :focus-visible approach with a polyfill for Safari and old Chrome/Firefox versions:

https://github.com/WICG/focus-visible

That polyfill adds a focus-visible class to the elements that are focused using the keyboard.

AqueleHugo
  • 168
  • 6
  • can you please change codesandbox how to use polyfil – user944513 Jun 09 '21 at 04:12
  • @user944513 I saw you created a question about not being able to focus the button at all because of the default Safari tabbing behavior. Did you manage to solve that? I may try to help you solve the style issue, but if it is about the default behavior issue, the polyfill will not be enough. – AqueleHugo Jun 10 '21 at 01:47