From 3262f0256efbbc250c240996cedc97d04e426aa8 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Fri, 30 Aug 2024 13:42:45 +0100
Subject: [PATCH] A11y: Fix some accessibility issues on the build error page
 (#92691)

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
---
 public/views/index.html | 62 ++++++++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/public/views/index.html b/public/views/index.html
index ae7e4147f3e..486b9fb1b1c 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -43,6 +43,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        margin: 0 32px;
       }
 
       .preloader__enter {
@@ -158,10 +159,37 @@
         font-size: 15px;
       }
 
+      .theme-light .preloader--done .preloader__text {
+        color: #52545c !important;
+      }
+
       .preloader--done .preloader__text--fail {
         display: block;
       }
 
+      .preloader--done .preloader__text--fail a {
+        color: white;
+      }
+      
+      .theme-light .preloader--done .preloader__text--fail a {
+        color: rgb(31, 98, 224);
+      }
+
+      .preloader--done code {
+        white-space: nowrap;
+        padding: 2px 5px;
+        margin: 0px 2px;
+        font-size: 0.8rem;
+        background-color: rgb(24, 27, 31);
+        color: rgb(204, 204, 220);
+        border: 1px solid rgba(204, 204, 220, 0.2);
+        border-radius: 4px;
+      }
+
+      .preloader__error-list li {
+        margin-bottom: 8px;
+      }
+
       [ng\:cloak],
       [ng-cloak],
       .ng-cloak {
@@ -176,25 +204,21 @@
         </div>
       </div>
       <div class="preloader__text preloader__text--fail">
-        <p>
-          <strong>If you're seeing this Grafana has failed to load its application files</strong>
-          <br />
-          <br />
-        </p>
-        <p>
-          1. This could be caused by your reverse proxy settings.<br /><br />
-          2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath. If not
-          using a reverse proxy make sure to set serve_from_sub_path to true.<br />
-          <br />
-          3. If you have a local dev build make sure you build frontend using: yarn start, or yarn build<br />
-          <br />
-          4. Sometimes restarting grafana-server can help<br />
-          <br />
-          5. Check if you are using a non-supported browser. For more information, refer to the list of
-          <a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">
-            supported browsers</a
-          >.
-        </p>
+        <main>
+          <h1>If you're seeing this Grafana has failed to load its application files</h1>
+          <ol class="preloader__error-list">
+            <li>This could be caused by your reverse proxy settings.</li>
+            <li>If you host grafana under a subpath make sure your <code>grafana.ini</code> <code>root_url</code> setting
+              includes subpath. If not using a reverse proxy make sure to set <code>serve_from_sub_path</code> to true.</li>
+            <li>If you have a local dev build make sure you build frontend using: <code>yarn start</code>, or
+              <code>yarn build</code>.</li>
+            <li>Sometimes restarting <code>grafana-server</code> can help.</li>
+            <li>Check if you are using a non-supported browser. For more information, refer to the list of
+              <a href="https://grafana.com/docs/grafana/latest/installation/requirements/#supported-web-browsers">
+                supported browsers </a
+              >.</li>
+          </ol>
+        </main>
       </div>
       <script nonce="[[.Nonce]]">
         // Check to see if browser is not supported by Grafana