Textual facets in collapsible on screen

[jrochkind]

A "universal design" approach to the need for textual facets corresponding to the chart for low-vision or screen-reader-using users.

Putting all the links in a visually-hidden didn't work, becuase you can't actually put focasable things in visually-hidden without problems or more weirdness, so trying this.

Put them on all screens, but inside a collapsible header, to avoid noise for those who don't want them. Went with html5 <details> after all, does not seem to have any focus nav issues to me.

Rearranged some DOM and configuration and made some selectors more flexible in the process.

Still needs i18n on label, and some other cleanup.

There is a lot of info and controls in this panel, it was hard to make it all hopefully clear?

---

---

---

[seanaery]

That looks great to me, @jrochkind . Bonus points for making it configurable. I like the way the details & summary tags work here, and it's nicely responsive and keyboard navigable. As you noted, an i18n key for the label is needed so implementers have an easy hook to customize that. Here are screenshots running this branch in my demo app.

[jrochkind]

OK, i18n added, initial non-English translations provided by Google Translate via i18n-tasks.

[jrochkind]

@seanaery What do you think about that heading "Range List"?

I'm not sure anyone will have any idea what it means... but having trouble coming up with anything.

Colleague @eddierubeiz suggests "Number of results in each range", or "Results in each range", or maybe "Results in each interval"...

I really don't know.

[seanaery]

Right, the default label is tricky. I do like Range List on-screen because it's concise; I might slightly prefer List Ranges given how it uses "list" as a verb. I hesitate to use more than 2-3 words there -- definitely don't want it to wrap, and we have to accommodate all kinds of BL layouts, including ones that don't leave a lot of width for the facets.

I assume esp. with the details/summary tags that the aim is to have one label that doesn't change to reflect the open/closed state. If there was an easy way to toggle, maybe Show Ranges / Hide Ranges works, but not sure that's worth the added complexity.

[jrochkind]

Yeah, I think it would have to add custom JS to switch label for open/closed, which I was trying to avoid.

Want to approve and merge what's here now?