evaluate HTML5 UI elements as browser support improves

[cfm]

Description

As browser (specifically, Firefox ESR → Tor Browser) support for HTML5 UI elements improves, it may be possible to use them in place of some of SecureDrop's custom-styled widgets. These may be (a) easier to implement and maintain, especially in the JavaScript-free Source Interface, and (b) more accessible to more users.

User Research Evidence

Prompted by experiments during #5986.

Examples

• This section needs to be revised to clarify which widgets have been partially implemented as suggested here (e.g., by refactors Source Interface for semantic HTML5/ARIA markup #6041) and which have not.

Interface	Template	Widget	HTML5 Element	Firefox Support	Implemented in...
Source	index.html	warning re: Tor Browser security level	dialog[2]	53+ only if manually enabled	#6041[5]
Source	locales.html	language selector	menu[1]	8+
Source	lookup.html	codename reminder	details[3]	49+	#6041[4]
Source	lookup.html	"delete reply" dialog	dialog[2]	53+ only if manually enabled

Notes:

1. Alternative: https://css-tricks.com/solved-with-css-dropdown-menus/ (suggested by @SaptakS)
2. Alternative: https://github.com/github/details-dialog-element (suggested by @SaptakS; requires JavaScript polyfill)
3. Suggested by @SaptakS in refactors Source Interface for semantic HTML5/ARIA markup #6041 (comment)
4. Without explicit open state, which we can't add to the DOM on the script-free Source Interface (cf. Have some way of opening <dialog> elements without JavaScript whatwg/html#3567).
5. Hackily: fixed open state and z-index, with visibility controlled by:
   

   securedrop/securedrop/static/js/source.js

   Lines 85 to 103 in 012d30e

   	/**
   	If the source is using Tor Browser, encourage them to turn Tor
   	Browser's Security Level to "Safest".
   	*/
   	function showTorSuggestions() {
   	show("#js-warning");
   	let infoBubble = document.getElementById("security-setting-info");
   	// show the instruction popup when the link is clicked
   	document.getElementById("disable-js").addEventListener(
   	"click",
   	function(e) {
   	e.preventDefault();
   	e.stopPropagation();
   	fadeIn(infoBubble);
   	}
   	);
   	}

[evilaliv3]

Actually i find this new markup elements very interesting, especially details due to the improvements they could offer considering that Javascript is disabled within the SecureDrop context.

As for what relates to menu and dialog i would actually propose to wait and see if they will exit from their experimental status https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu#browser_compatibility. This would guarantee that the feature will be really implemented with long term support and leave open the possibility of supporting more browsers in the future the for future of alternative if they will become available and reasonably secure (e.g. OnionBrowser, Brave)

[scottaohara]

Menu is nothing more than a type of list (ie ul element)

it has none of the features of the experimental version Firefox used to have