Page MenuHomePhabricator

Ensure JS-only interactions are hidden when JavaScript is disable, unsupported, or not yet loaded.
Closed, ResolvedPublic

Description

The Special page of this extension currently renders a button server-side, but the button has no default link or form destination. Clicking it, does not result in any readable or visual feedback.

Screen Shot 2019-02-13 at 00.49.16.png (1×2 px, 284 KB)

Either a fallback should be present in the PHP-rendered HTML, or the button should be made invisible when the JS payload has not yet successfully arrived. Recommendation if the buttons are intended to be limited to times when the user has a Grade A browser and the JS has completed without errors:

  • Make invisible under .client-nojs via CSS.
  • Make visible but reserved under .client-js via CSS. (e.g. visually dimmed, aria-disabled, and with pointer-events disallowed via CSS).
  • Make interactive by adding a class in JS, which CSS uses to undo the dimming (e.g. .client-js .my-thing:not(.my-thing-interactive) { opacity: 0.5 }).

This can happen in a number of circumstances:

  • The user is a on a slow connection and the JS will not arrive until seconds/minutes after the page has become visible and and browser has started to be responsive to interactions.
  • The user's connection is slow and or intermittent and the JS payload request was aborted, timed out, or was lost. This happens for a fraction of all users, especially mobile, including e.g. 4G users in Europe.
  • The user's browser is older and MediaWiki proactively prevents the JS from being delivered ("Grade C" browsers, per https://www.mediawiki.org/wiki/Compatibility#Browser_support_matrix).
  • The user has chosen to disable JavaScript and/or has not yet given permission for it to be enabled on this website.

Event Timeline

santhosh triaged this task as Medium priority.

Change 490284 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ExternalGuidance@master] SpecialExternalGuidance: Disable the buttons till JavaScript is ready

https://gerrit.wikimedia.org/r/490284

Change 490284 merged by jenkins-bot:
[mediawiki/extensions/ExternalGuidance@master] SpecialExternalGuidance: Disable the buttons till JavaScript is ready

https://gerrit.wikimedia.org/r/490284

Krinkle removed a project: Patch-For-Review.

LGTM. Verified on Beta.