svelte-splitpanes icon indicating copy to clipboard operation
svelte-splitpanes copied to clipboard

Accessability

Open Tal500 opened this issue 2 years ago • 4 comments

Following #9, we need to have accessibility for the splitter, by ARIA attributes and by keyboard interaction.

  1. MDN on separator role
  2. W3 on windows splitter.
  3. See also the list of proposed examples in this issue. I'd personally think that this one is the clearest.

There are two types of splitters - non-focusable(i.e. static) and focusable(interactive). Read source 1 for telling which aria attributes should be on each on. I believe that a splitter in this library is consider to be non-focusable(i.e. static) if and only if minSize===maxSize, as you can see the example in this library docs.

Focusable (interactive) splitter in this library

  • Should have the HTML attribute tabindex = 0. Notice that non-focusable(i.e. static) splitters should not be focusable at all!
  • I believe that default style when it's focused should be like in hover.
  • I believe we should implement all the keyboard binding the same as described in Source 2 (including the optional ones). The keys should be as what described there by default, but allow the user to change the key binding he prefer. Notice that if we're in RTL, the right arrow key should point to the previous pane!
  • Notice in Source 2 the key binding of F6(cycle between panes) is a really cool one in my opinion. I think that each pane should have the HTML attribute tabindex = -1(meaning focusable, but only by script), and pressing F6 will detect which pane has the current focus, and will cycle through the panes and set the focus on the next one. I believe, although not written by the official standards, the if the user press Shift + F6, then it should cycle backwards, as the Shift key invert the operation.
  • Continuing the previous bullet on F6, I believe that a special care should be for nested panes. I think the correct way to deal with this issue is to cycle only through the leaf panes(meaning, on on panes which don't have a nested SplitPanes component inside of them).

I think we need to be careful and clever for dealing with Svelte context API for passing sizes data from SplitPanes to Pane components.

I have an idea how to implement it, just need a green light to do so.

Tal500 avatar Jun 20 '22 19:06 Tal500