Aria creating unwanted blue outlines on Minimal Theme in Safari

Store Design
1

Hi

I am developing a site which shows blue outlines on some page elements on click - see attached image of the slideshow.

Only happens in Safari, not in Chrome.

I have dug around in the code and it seems to be something to do with a protocol called Aria for screenreaders.

Does anyone know how to disable this?

Thanks

2

@nextnorth

store url and please share issue images

3

Hi Ketan

https://asianartgallery.myshopify.com

pw tweamu

Screenshot below - the blue marquee comes up when you click on the slider and items in the dropdown menus.

Thanks in advance for looking at this.

4

@nextnorth

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

5

It only happens in Safari on a Mac. Not an issue in Chrome. I’m pretty sure it is something to do with accessibility or screen-reading settings in Safari itself but I can’t find out how to switch it off.

It would be good to fix though if anyone your side can help.

6

@nextnorth

yes please try this code

add this code css bottom of the file

*:focus {
    outline: none;
}
7

That worked. Thanks so much! Spent hours trying to solve this.

8

@nextnorth

its my pleasure to help us