search

w3c / sustyweb

Sustainable Web Design Community Group
https://www.w3.org/community/sustyweb/
Other
179 stars 13 forks source link

STAR 1.0 Draft Suggestion - <details> elements all closed, Feature request: make all open at once, make internal sections of details elements linkable #89

Closed airbr closed 7 months ago

airbr commented 8 months ago

I wonder if there are some usability things for the STAR Document that could be improved. Luckily it is still possible to CTRL + F and find things in the document even in not visible text behind a details summary element but currently I found myself getting lost when reviewing back to the document because of how easily the details elements closed on click. I kind of want to have them all open at once, even stickied so that they dont close if I click over it now somehow.

Anchor links to allow me to link or bookmark specifically open details summary elements of techniques that would be a potentially good thing. A cursory google search doesnt appear to give a lot of good quality results for this but there is https://stackoverflow.com/questions/48100490/how-to-anchor-to-target-element-inside-html-details

Just ideas, thanks for consideration

AlexDawsonUK commented 7 months ago

Because we work in the ReSpec format, our options here are limited regarding formatting and use of scripting. Specifications aren't the ideal place for interactivity, they are essentially intended for just long-form content and little else (unlike a website or application).

However, what I can help with is that every one of those click to reveal components does contain an ID reference. If you right click in the green box and click inspect in your browser developer tools, you should be able to find its ID and use that as apart of the URL after .html# and that will jump down the page, immediately opening the box. Its how I plan to use the techniques in cross-referencing with the main specification as soon as I get time (so people can click from the WSG guideline and it'll launch the correct STAR technique directly for them RE feature #29 which you're aware of).

Hopefully this has been helpful? Maybe its something we can visit later, or a third-party can work with (once testability is referenced in our API). I'll leave this open for a while in case anyone else has ideas or thoughts!

airbr commented 7 months ago

That is helpful!

For now, I am opening all the details elements with the following JavaScript:

var details = document.querySelectorAll('details');
details.forEach(x => x.open = true);
AlexDawsonUK commented 7 months ago

Sounds like a plan. I've implemented #29 within the living specification (so now each Success Criteria has against it a direct link to the STAR material associated with it and will open on-demand) - an example here. Hopefully this is helpful!

I'll mark this as complete for the moment as it should hopefully be easier to browse the material.