On Safari only, a focus outline is appearing upon clicking of slider element

Question

The site where this is occurring: https://elearning.scranton.edu/

On safari desktop and mobile, if you scroll down to the program slider and click on the arrows you will see the entire slider module receives a grey dotted focus outline. I can't figure out why this happening. This outline should only be happening upon tabbing with the keyboard not upon clicking. I don't want to completely remove the :focus styling as this leaves keyboard users with no indication of where they are on the screen. I cant figure out why this is happening. The slider in use is Tiny Slider but i don't see anything in the docs related to focus outline and safari.

Answer 1

Looks like you're talking about the carousel. If you click on the left or right buttons, the entire carousel gets a dotted focus indicator.

This is because the carousel <div> has a tabindex="0" whereas the actual arrow buttons do not (tabindex="-1"), so the focus ends up going to the carousel and receives a dotted outline. Firefox and Chrome are allowing the focus to move to the <button> when you click on them even though they have tabindex="-1" so you don't (initially) see the dotted outline on the carousel container itself but you can see the same outline if you tab backwards after clicking on one of the arrows.

Here's a Firefox screenshot:

I'm not sure why there's a difference in behavior but it does show an accessibility problem with the site. The left/right arrow buttons should not have tabindex="-1". A keyboard user has no (obvious) way to navigate to the buttons and move to the next carousel item. If you play around with it, you eventually find that when you tab to the carousel (<div tabindex="0">), you can then use the left and right keyboard arrow keys to scroll the carousel left and right.

So if you remove tabindex="-1" from the <button> elements, I suspect you'll get the same focus behavior on all browsers.

I'm guessing you want to keep the tabindex="0" on the carousel (third party library?) to allow the left/right arrow keys to scroll the carousel, although if the buttons are keyboard focusable, the left/right arrow keys are superfluous.