fix(compat-table): show message when JavaScript is disabled (#890)

Author: danielhjacobs

components/compat-table-lazy/element.js

@@ -1,5 +1,6 @@
 import { Task } from "@lit/task";
 import { LitElement, html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import "../compat-table/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
@@ -95,8 +96,11 @@ export class MDNCompatTableLazy extends L10nMixin(LitElement) {
   });
 
   render() {
+    const noScript = unsafeHTML(
+      `<noscript>${this.l10n("compat-js-required")`Enable JavaScript to view this browser compatibility table.`}</noscript>`,
+    );
     return this._dataTask.render({
-      initial: () => html`<p>${this.l10n("compat-loading")`Loading…`}</p>`,
+      initial: () => html`<p>${noScript}</p>`,
       pending: () => html`<p>${this.l10n("compat-loading")`Loading…`}</p>`,
 
       complete:

l10n/en-US.ftl

@@ -61,6 +61,7 @@ obs-mdn = The { -brand-name-obs } provides effective security insights, guided b
 
 
 compat-loading = Loading…
+compat-js-required = Enable JavaScript to view this browser compatibility table.
 
 compat-browser-version-date = { $browser } { $version } – Release date: { $date }
 compat-browser-version-released = Release date: { $date }