In the 1001st implementation of carousel I would like to "properly" handle the focus. The cyan arrow buttons are fine. They have role="button".
A few quick questions related to UI/UX of this component:
- the arrows and the page navigation can accept focus if the TAB key is used. Should I keep the focus on the arrow button after a click event? Is it possible to do it wo calling
element.focus()method - like pure HTML/CSS solution? - the page navigation area is suppose to handle the arrow keys inputs - the same question for it: Should I keep the focus once a page navigation button (the tiny greyish rect) is pressed? Is it doable wo
element.focus()? What should be ARIA role for this component? - the design requires 4px height navigation buttons - really hard to click on mobile. In order to make them useable, a div is added as a child of a navigation button (the pink areas). Is there better way to extend the "hot zone"?
- how can I exclude the redish divs so that the focus rectangle is as shown (a dirty solution is to put outline: none to parent component and to use
:focusselector)
CodePudding user response：
Regarding focus, you ask if the focus can be kept on the buttons without using focus(). Absolutely. In fact, when you click on a button, the focus will not move unless you specifically move it or if the element you clicked on gets hidden. So if your desire is to leave the focus on the button, then you don't have to do anything.
That's the preferred behavior - leave the focus on the button. If I'm exploring the carousel slides and I'm a keyboard user, I will navigate/tab to the "next" button and press enter. I'll review the slide and if it's not what I want, I'll press enter again (assuming my focus remained on the "next" button) to see the next slide. If you force the focus to move away from the button and to the carousel content, then I have to navigate back to the "next" button before I can view the next slide. It can be annoying to have to keep navigating back to the element I just selected.
I don't understand your third or fourth questions.
Have you looked at the two W3.org references regarding carousels?