Bug #10909: Toggle are displayed by default when JavaScript is disabled

Bug #10909

Toggle are displayed by default when JavaScript is disabled

Added by sajolida 2016-01-12 15:04:11 . Updated 2020-05-19 00:28:51 .

Status:

In Progress

Priority:

Normal

Assignee:

Category:

Installation

Target version:

Start date:

2016-01-12

Due date:

% Done:

40%

Feature Branch:

web/10909-hide-toggle-by-default

Type of work:

Test

Blueprint:

Starter:

Affected tool:

Installation Assistant

Deliverable for:

Description

Subtasks

Related issues

Related to Tails - ~~Feature #14921~~: Improve the CSS of the new download page	Resolved	2017-11-04
Related to Tails - ~~Feature #7021~~: Review & modernize website markup and css	Resolved	2014-04-03
Blocks Tails - Feature #17247: Core work 2020Q1 → 2020Q2: Technical writing	Confirmed

History

#1 Updated by sajolida 2016-01-12 15:05:07

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

#2 Updated by sajolida 2016-01-12 15:05:34

Parent task set to ~~Feature #8592~~

#3 Updated by tchou 2016-01-27 16:33:35

Target version changed from Tails_2.0 to Tails_2.2

#4 Updated by sajolida 2016-01-29 18:18:32

Parent task deleted (~~~~Feature #8592~~~~)

#5 Updated by sajolida 2016-03-21 03:31:07

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

#6 Updated by anonym 2016-04-21 03:14:43

Target version changed from Tails_2.2 to Tails_2.3

#7 Updated by anonym 2016-05-08 05:10:30

Target version changed from Tails_2.3 to Tails_2.4

#8 Updated by intrigeri 2016-05-24 23:44:21

Status changed from Confirmed to In Progress

#9 Updated by anonym 2016-06-08 01:35:03

Target version changed from Tails_2.4 to Tails_2.5

#10 Updated by BitingBird 2016-06-27 08:19:05

% Done changed from 0 to 40

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

#11 Updated by intrigeri 2016-08-02 09:31:57

Target version changed from Tails_2.5 to Tails_2.6

#12 Updated by tchou 2016-09-12 08:04:45

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 2016-09-13 05:04:02

Target version deleted (~~Tails_2.6~~)

#14 Updated by sajolida 2016-09-25 11:26:40

Affected tool set to Installation Assistant

#15 Updated by sajolida 2016-09-25 11:56:35

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 2017-12-02 19:40:26

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

#17 Updated by sajolida 2017-12-02 19:40:34

related to ~~Feature #14921~~: Improve the CSS of the new download page added

#18 Updated by Anonymous 2018-01-18 17:48:39

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

#19 Updated by sajolida 2018-01-21 12:17:31

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 2018-02-01 17:13:42

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 2018-02-01 17:14:10

related to ~~Feature #7021~~: Review & modernize website markup and css added

#22 Updated by sajolida 2018-03-27 12:11:47

blocks ~~Feature #15392~~: Core work 2018Q2 → 2018Q3: User experience added

#23 Updated by sajolida 2018-03-27 12:12:50

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 2018-03-27 12:13:09

blocked by deleted (~~~~Feature #15392~~: Core work 2018Q2 → 2018Q3: User experience~~)

#25 Updated by sajolida 2018-03-27 12:13:20

blocks ~~Feature #15411~~: Core work 2018Q2 → 2018Q3: Technical writing added

#26 Updated by sajolida 2018-04-07 06:59:50

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 2018-04-09 00:51:14

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

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 2018-04-11 15:20:41

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 2018-04-11 15:29:15

Giving a second thought at the

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

tag is inside the

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/*).