flackr / carousel Goto Github PK

Please see the Invokers Proposal for details. But that API proposal allows any button to "target" any other element, and provide an action to take on that target. It seems like scroll up/down might make a good use case for this API? As in

<div id=scroller> Content </div>
<button id=scroll_up invoketarget=scroller invokeaction="scroll up"> UP </button>

@keithamus

Currently there's left, right, top, and bottom pseudo selectors but not one that can style all of them at once. Should there be?

Be really nice for authors to provide a label for the marker dots. Could find content from a contextually relevant [title] on a node, or something that's explicitly passed for higher control?

Demo loaded on a large screen:

next and previous buttons are already disabled. No need to show a single scroll marker.

What should the focus order of the generated scroll markers be? Currently what's implemented in the polyfill puts them immediately after the scrollable area, but the tree order for pseudo elements would usually place them immediately after their originating element.

there are a few options here:

1. Immediately before the scrollable area.
2. Immediately after the scrollable area.
3. In the order of their originating DOM elements.

I suspect that there are use cases where you would expect 1 (tab-like interfaces) or 2 (marker-like interfaces) depending on where visually the scroll markers appear.

This could be a little odd in that the only tabbable scroll marker, the active one, could be either before or after the content you have focused in the scroller.

If I am understanding properly, the really powerful thing about the scroll-marker idea is that it lets you write something to style the 'active one' with :checked, like ::scroll-marker:checked { background: pink; }. This would be super to be able to mix with the grid-flow example because very often it would be the case where if using this for something more like 'tabs' (panelset-style tabs at least) it's not likely to be possible or easy to do that part in CSS. Is there a way you could do this? The only one I could maybe think of is via :attr(), but ideally that would not be just through an attribute for internationalization/localization reasons

todo:

• swap > and < text content for Next and Previous text
• hide text visually and replace with an icon

might be able to get away with a win win svg solution, where the svg icon has a text node. or a title on the button. needs tested, but screen readers need to know what the button does.

This doesn't actually seem to work for me?

https://flackr.github.io/carousel/examples/fragmentation/flowing/

if there are a lot of pages, it's nice to add a count to the pagination, like 2 of 25. Might be possible to do with counters with ::page specifying counter-increment?

Currently arrow keys trigger navigation when using the markers, because they're a radio group, which also means they cycle around. Should the same behavior be applied to a focused next/previous buttons?

If the next button becomes disabled, focus shifts to the previous button.
If the previous button becomes disabled, focus shifts to the next button.

https://codepen.io/argyleink/pen/zYXZwwg/b09ee4f18ee1ade763bee4276e0c181a