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.

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

Krinkle created this task.Feb 13 2019, 12:57 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 13 2019, 12:57 AM
santhosh claimed this task.Feb 13 2019, 6:49 AM
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

santhosh moved this task from Backlog to In Review on the ExternalGuidance board.Feb 13 2019, 7:08 AM

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 closed this task as Resolved.Feb 15 2019, 6:41 PM
Krinkle removed a project: Patch-For-Review.

LGTM. Verified on Beta.

KartikMistry moved this task from In Review to Done on the ExternalGuidance board.Mar 1 2019, 8:02 AM