Selectable

[lishine]

I am building a two columns list of products (image + text). It can be selected and then the selected shows additionally in a panel above.
What is the recommended accessible approach?
Maybe like each product will be Tab. Or radio. Or just li.
How the disabled user get to know that something is selected?
Trying component from reakit should I use.
BTW I couldn't add as property to radio , it won't work - switching of state.

[diegohaz]

It would be easier to guess with a design or codesandbox. But it looks like a listbox to me:

const state = useCompositeState({ orientation: "vertical" });
<Composite {...state} as="ul" role="listbox" aria-label="Products" style={{ columnCount: 2 }}>
  <CompositeItem {...state} as="li" role="option" onFocus={...} onClick={...}>Item</CompositeItem>
  <CompositeItem {...state} as="li" role="option" onFocus={...} onClick={...}>Item</CompositeItem>
  <CompositeItem {...state} as="li" role="option" onFocus={...} onClick={...}>Item</CompositeItem>
  <CompositeItem {...state} as="li" role="option" onFocus={...} onClick={...}>Item</CompositeItem>
  <CompositeItem {...state} as="li" role="option" onFocus={...} onClick={...}>Item</CompositeItem>
</Composite>

Or just a list of tabbable items is fine too.

[lishine]

Thank you very much
Here is the design

[diegohaz]

Just make them tabbable elements. No composite widget is necessary there. 👍

[prbxr]

Thanks.
But How the disabled user get to know that something is selected?
With the focus? But then I should change the state onFocus and not on onClick.

[diegohaz]

A listbox would work then.

[prbxr]

That actually is infinite list, so each row is wrapped in an element.
So in a row each of the two elements can be selected.
It is like ul->div->li+li
So it will not work simply as a list...

[lishine]

And for this one, what would be the best:
(it is selection one out three, essentially like radio, just I could not do AS with radio of reakit)

[diegohaz]

I don't understand that design. Is that like desktop icons?

[lishine]

In any time one of them or none can be selected and the appropriate panel is shown.