Project

General

Profile

Bug #10909

Toggle are displayed by default when JavaScript is disabled

Added by sajolida almost 4 years ago. Updated 4 months ago.

Status:
In Progress
Priority:
Normal
Assignee:
Category:
Installation
Target version:
-
Start date:
01/12/2016
Due date:
% Done:

40%

Feature Branch:
web/10909-hide-toggle-by-default
Type of work:
Test
Blueprint:
Starter:
Affected tool:
Installation Assistant

Related issues

Related to Tails - Feature #14921: Improve the CSS of the new download page Resolved 11/04/2017
Related to Tails - Feature #7021: Review & modernize website markup and css Resolved 04/03/2014
Blocks Tails - Feature #16711: Core work 2019Q3 → 2019Q4: Technical writing Confirmed 01/08/2016

History

#1 Updated by sajolida almost 4 years ago

  • Feature Branch set to web/10909-toggle-hidden-by-default

#2 Updated by sajolida almost 4 years ago

  • Parent task set to #8592

#3 Updated by tchou almost 4 years ago

  • Target version changed from Tails_2.0 to Tails_2.2

#4 Updated by sajolida almost 4 years ago

  • Parent task deleted (#8592)

#5 Updated by sajolida over 3 years ago

  • Feature Branch changed from web/10909-toggle-hidden-by-default to web/10909-hide-toggle-by-default

#6 Updated by anonym over 3 years ago

  • Target version changed from Tails_2.2 to Tails_2.3

#7 Updated by anonym over 3 years ago

  • Target version changed from Tails_2.3 to Tails_2.4

#8 Updated by intrigeri over 3 years ago

  • Status changed from Confirmed to In Progress

#9 Updated by anonym over 3 years ago

  • Target version changed from Tails_2.4 to Tails_2.5

#10 Updated by BitingBird over 3 years ago

  • % Done changed from 0 to 40

It's Ready for QA so I guess it's not O% :)

#11 Updated by intrigeri over 3 years ago

  • Target version changed from Tails_2.5 to Tails_2.6

#12 Updated by tchou about 3 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Ready for QA to Info Needed

As far I understand this ticket you want toggles not displayed when JS is disabled ?
So how can we have access to the information that is in the toggles ?

But maybe somes toggles are hiding content so I think we have to fix it.

#13 Updated by sajolida about 3 years ago

  • Target version deleted (Tails_2.6)

#14 Updated by sajolida about 3 years ago

  • Affected tool set to Installation Assistant

#15 Updated by sajolida about 3 years ago

  • Assignee changed from sajolida to tchou
  • QA Check changed from Info Needed to Ready for QA

You're right! I was only considering half of the problem. If people don't have JavaScript, either toggle are displayed and might hide some other content (like button in the router), either they are closed and people might loose access to important information (like troubleshooting sections). We need to find something else.

Ideally we would do something smart and different versions with and without JavaScript when this is problematic. But here, this is only problematic for the "why_two" and "why_extra" toggles in the router. So we should keep all the other toggle displayed by default (troubleshooting sections, details of press appearances, etc.) but I still propose that we hide these ones by default because they otherwise cover more important things and because people without JavaScript can probably leave without these toggles (but not the other ones).

So please review again web/10909-hide-toggle-by-default (d4f597d). I did a push --force to change the whole branch.

#16 Updated by sajolida almost 2 years ago

Also, we should remove the [X] of the toggled section that we do want to appear on the no JS version. See #14921#note-9.

#17 Updated by sajolida almost 2 years ago

  • Related to Feature #14921: Improve the CSS of the new download page added

#18 Updated by u almost 2 years ago

Will you still review this @tchou? If not, somebody else should eventually do that.

#19 Updated by sajolida almost 2 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Ready for QA to Dev Needed

I did more work on this as part of the new download page. My plan was to factor out the better JavaScript that I wrote for that and reuse it everywhere. And ideally upstream it.

So there's more dev needed.

#20 Updated by intrigeri almost 2 years ago

Good news: HTML5 provides a way to toggle "details", see a real world implementation example that you can see in action. I didn't check if ikiwiki uses this when the html5 option is enabled.

#21 Updated by intrigeri almost 2 years ago

  • Related to Feature #7021: Review & modernize website markup and css added

#22 Updated by sajolida over 1 year ago

  • Blocks Feature #15392: Core work 2018Q2 → 2018Q3: User experience added

#23 Updated by sajolida over 1 year ago

That looks super cool! (as long as we don't care about compatibility with Internet Explorer)

Simpler live code: https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_details

#24 Updated by sajolida over 1 year ago

  • Blocks deleted (Feature #15392: Core work 2018Q2 → 2018Q3: User experience)

#25 Updated by sajolida over 1 year ago

  • Blocks Feature #15411: Core work 2018Q2 → 2018Q3: Technical writing added

#26 Updated by sajolida over 1 year ago

  • Type of work changed from Website to Test

Next step is to test this HTML 5 tag in the default browser from Windows.

#27 Updated by cbrownstein over 1 year ago

sajolida: I had mentioned to you that I had learned how to toggle an element using a :target CSS pseudo-class1.

Would you mind taking a look at my proof-of-concept branch and commenting? Thank you.

https://github.com/cbrownstein/tails/tree/troubleshoot-anchors-poc

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:target

#28 Updated by sajolida over 1 year ago

That's an interesting technique! I didn't know about the ':target' pseudo-class. Now I see two major downsides to it that might be deal breakers:

  • Your code opens the toggle but I can't close it back, so it's not really a toggle anymore. This might be ok for these troubleshooting sections but not for other contextual help we have like "What is BitTorrent?" on /install/download. Maybe that can be worked around by some more CSS hacks but I'm not sure...
  • Your code relies on a URL fragment ("#trigger-cody-example") so when clicking on the link, the display of the page jumps down to where the corresponding anchor is on the page (<div id="trigger-cody-example"). It's ugly but kind of work on this page but it could break the experience pretty badly in other places (like "Why?" on /install/download).

#29 Updated by sajolida over 1 year ago

Giving a second thought at the <details> tag, I'm really not sure it's the way to go for us. I see two major downsides:

  • It doesn't work on Internet Explorer. IE has been replaced by Microsoft Edge in Windows 10 but it's still the default browser in previous version of Windows and we're using toggles in our installation pages, so I'd like to be specially careful about browser compatibility.
  • The <summary> tag is inside the <details> tag in the HTML code. That would work in some places but might become a nightmare in other places (actually, in all the places where we use toggle in /install/*).

#30 Updated by sajolida over 1 year ago

  • Target version set to Tails_3.8

#31 Updated by sajolida over 1 year ago

  • Target version changed from Tails_3.8 to Tails_3.9

#32 Updated by sajolida over 1 year ago

  • Target version changed from Tails_3.9 to Tails_3.10.1

#33 Updated by sajolida about 1 year ago

  • Blocks deleted (Feature #15411: Core work 2018Q2 → 2018Q3: Technical writing)

#34 Updated by sajolida about 1 year ago

  • Blocks Feature #15941: Core work 2018Q4 → 2019Q2: Technical writing added

#35 Updated by sajolida about 1 year ago

  • Blocks deleted (Feature #15941: Core work 2018Q4 → 2019Q2: Technical writing)

#36 Updated by sajolida about 1 year ago

  • Target version deleted (Tails_3.10.1)

We won't have the time and skills to work on this as part of our technical writing budget.

I want to rethink the strategy as maybe this should be improved upstream instead.

#37 Updated by sajolida 4 months ago

  • Assignee deleted (sajolida)

#38 Updated by sajolida 4 months ago

  • Blocks Feature #16711: Core work 2019Q3 → 2019Q4: Technical writing added

#39 Updated by sajolida 4 months ago

  • Assignee set to sajolida

We have a bit more budget now.

Also available in: Atom PDF