Merge pull request #3892 from teltek/teltek/feature/accessibility-nginx-server-template

Make nginx server template more accessible and configurable.

CHANGELOG.md

@@ -68,6 +68,19 @@
   - Added the EDXAPP_ACTIVATION_EMAIL_SUPPORT_LINK URL with default value `''`.
   - Added the EDXAPP_PASSWORD_RESET_SUPPORT_LINK URL with default value `''`.
 
+- Role: nginx
+  - Modified `server-template.j2` to be more accessible and configurable.
+  - The template should contain the `lang` attribute in the HTML tag.
+  - If the image loaded has some meaning, as a logo, it should have the `alt` attribute.
+  - After the header 1 (h1) there is no relevant text content, so next it can not be
+    another header (h2). It was changed to be a paragraph with the header 2 CSS style.
+  - Added `NGINX_SERVER_ERROR_IMG_ALT` with default value as it was in the server template
+  - Added `NGINX_SERVER_ERROR_LANG` with default value `en`
+  - Added `NGINX_SERVER_ERROR_STYLE_H1` with default value as it was in the server template
+  - Added `NGINX_SERVER_ERROR_STYLE_P_H2` with default value as it was in the server template
+  - Added `NGINX_SERVER_ERROR_STYLE_P` with default value as it was in the server template
+  - Added `NGINX_SERVER_ERROR_STYLE_DIV` with default value as it was in the server template
+
 - Role: edxapp
   - Added the EDXAPP_SHOW_HEADER_LANGUAGE_SELECTOR feature flag with default value [false]
   - Added the EDXAPP_SHOW_FOOTER_LANGUAGE_SELECTOR feature flag with default value [false]

playbooks/roles/nginx/defaults/main.yml

@@ -49,17 +49,35 @@ NGINX_LOG_FORMAT_NAME: 'p_combined'
 NGINX_SET_X_FORWARDED_HEADERS: False
 
 NGINX_SERVER_ERROR_IMG: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Pendleton_Sinking_Ship.jpg/640px-Pendleton_Sinking_Ship.jpg'
+NGINX_SERVER_ERROR_IMG_ALT: ''
+NGINX_SERVER_ERROR_LANG: 'en'
+NGINX_SERVER_ERROR_STYLE_H1: 'font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; margin-bottom: .3em; font-size: 2.0em; line-height: 1.25em; text-rendering: optimizeLegibility; font-weight: bold; color: #000000;'
+NGINX_SERVER_ERROR_STYLE_P_H2: 'font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; margin-bottom: .3em; line-height: 1.25em; text-rendering: optimizeLegibility; font-weight: bold; font-size: 1.8em; color: #5b5e63;'
+NGINX_SERVER_ERROR_STYLE_P: 'font-family: Georgia,Cambria,"Times New Roman",Times,serif; margin: auto; margin-bottom: 1em; font-weight: 200; line-height: 1.4em; font-size: 1.1em; max-width: 80%;'
+NGINX_SERVER_ERROR_STYLE_DIV: 'margin: auto; width: 800px; text-align: center; padding:20px 0px 0px 0px;'
 NGINX_SERVER_HTML_FILES:
   - file: rate-limit.html
+    lang: "{{ NGINX_SERVER_ERROR_LANG }}"
     title: 'Rate limit exceeded'
     msg: 'If think you have encountered this message in error please let us know at <a href="mailto:{{ EDXAPP_TECH_SUPPORT_EMAIL|default("technical@example.com") }}">{{ EDXAPP_TECH_SUPPORT_EMAIL|default("technical@example.com") }}</a>'
     img: "{{ NGINX_SERVER_ERROR_IMG }}"
+    img_alt: "{{ NGINX_SERVER_ERROR_IMG_ALT }}"
     heading: 'Uh oh, we are having some server issues..'
+    style_h1: "{{ NGINX_SERVER_ERROR_STYLE_H1 }}"
+    style_p_h2: "{{ NGINX_SERVER_ERROR_STYLE_P_H2 }}"
+    style_p: "{{ NGINX_SERVER_ERROR_STYLE_P }}"
+    style_div: "{{ NGINX_SERVER_ERROR_STYLE_DIV }}"
   - file: server-error.html
+    lang: "{{ NGINX_SERVER_ERROR_LANG }}"
     title: 'Server error'
     msg: 'We have been notified of the error, if it persists please let us know at <a href="mailto:{{ EDXAPP_TECH_SUPPORT_EMAIL|default("technical@example.com") }}">{{ EDXAPP_TECH_SUPPORT_EMAIL|default("technical@example.com") }}</a>'
     img: "{{ NGINX_SERVER_ERROR_IMG }}"
+    img_alt: "{{ NGINX_SERVER_ERROR_IMG_ALT }}"
     heading: 'Uh oh, we are having some server issues..'
+    style_h1: "{{ NGINX_SERVER_ERROR_STYLE_H1 }}"
+    style_p_h2: "{{ NGINX_SERVER_ERROR_STYLE_P_H2 }}"
+    style_p: "{{ NGINX_SERVER_ERROR_STYLE_P }}"
+    style_div: "{{ NGINX_SERVER_ERROR_STYLE_DIV }}"
 
 NGINX_APT_REPO: deb http://nginx.org/packages/ubuntu/ {{ ansible_distribution_release }} nginx
 

playbooks/roles/nginx/templates/edx/var/nginx/server-static/server-template.j2

-<!DOCTYPE html>
+<!DOCTYPE html lang="{{ item.lang }}">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -6,37 +6,18 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style media="screen" type="text/css">
-          h1, h2{
-            font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
-            margin-bottom: .3em;
-            font-size: 2.0em;
-            line-height: 1.25em;
-            text-rendering: optimizeLegibility;
-            font-weight: bold;
-            color: #000000;
-          }
-          h2 {
-            font-size: 1.8em;
-            color: #5b5e63;
-          }
-          p {
-            font-family: Georgia,Cambria,"Times New Roman",Times,serif;
-            margin: auto;
-            margin-bottom: 1em;
-            font-weight: 200;
-            line-height: 1.4em;
-            font-size: 1.1em;
-            max-width: 80%;
-          }
+          h1 { {{ item.style_h1 }} }
+          p-h2 { {{ item.style_p_h2 }} }
+          p { {{ item.style_p }} }
         </style>
     </head>
     <body>
-      <div style="margin: auto; width: 800px; text-align: center; padding:20px 0px 0px 0px;">
+      <main style="{{ item.style_div }}">
         <h1>{{ item.heading }}</h1>
-        <img src="{{ item.img}}" alt="">
-        <h2>{{ item.title }}</h2>
-        <p>{{ item.msg }}
-      </div
+        <img src="{{ item.img }}" alt="{{ item.img_alt }}">
+        <p class="p-h2">{{ item.title }}</p>
+        <p>{{ item.msg }}</p>
+      </main>
     </body>
 </html>