Added DAC suggestions to warning panel for accessibility reasons (#1320)

* Added DAC suggestions to warning panel for accessibility reasons * Added flexibility to override default icon text for accessibility. Code consistency tweaks
ONSdigital · Jan 26, 2021 · 29ee136 · 29ee136
1 parent 023c2e4
commit 29ee136
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 24 deletions.
diff --git a/src/components/panel/_macro-options.md b/src/components/panel/_macro-options.md
@@ -9,6 +9,7 @@
 | id         | string  | false    | Custom id to add to the panel                                                                                                                                                               |
 | attributes | object  | false    | HTML attributes to apply to the panel (e.g. data attributes)                                                                                                                                |
 | icon       | string  | false    | Set this to the name of the icon you want to be included before the contents of the panel                                                                                                   |
+| iconText   | string  | false    | Overrides the accessible text for `warn` and `warn-branded` panel icons                                                                                                                     |
 | iconSize   | string  | false    | Set this to the size of the icon you want can be set to "m", "l" "xl" to match heading size. Defaults to the size of regualar text                                                          |
 | iconsPath  | string  | false    | Set this to the path to the icon you want to be included before the contents of the panel                                                                                                   |
 | dsExample  | boolean | false    | Defaulted to `true` in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - _only for use in DS examples_ |
diff --git a/src/components/panel/_macro.njk b/src/components/panel/_macro.njk
@@ -30,6 +30,8 @@
 
             {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                 <span class="panel__icon" aria-hidden="true">!</span>
+                <strong>
+                <span class="u-vh">{{ params.iconText | default("Warning: ") }}</span>
             {% endif %}
 
             {% if params is defined and params and params.title is defined and params.title %}
@@ -55,6 +57,10 @@
                 {{ caller() if caller }}
             </div>
 
+            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
+                </strong>
+            {% endif %}
+
         </div>
 
     {% if params is defined and params and params.type == "warn-branded" %}

diff --git a/src/components/panel/examples/bare/index.njk b/src/components/panel/examples/bare/index.njk
@@ -1,8 +1,8 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        type: "bare",
-        icon: "lock"
+        type: 'bare',
+        icon: 'lock'
     })
 %}
     Here is some text with an icon.

diff --git a/src/components/panel/examples/branded/index.njk b/src/components/panel/examples/branded/index.njk
@@ -3,7 +3,7 @@
 ---
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% call onsPanel({
-        "type": "branded"
+        "type": 'branded'
     })
 %}
     This guidance is for the paper questionnaire.<br>View the <a href="#0">question guidance for completing the census online</a>.

diff --git a/src/components/panel/examples/error-header/index.njk b/src/components/panel/examples/error-header/index.njk
@@ -2,24 +2,24 @@
 {% from "components/lists/_macro.njk" import onsList %}
 
 {% call onsPanel({
-        "title": "There are 2 problems with your answer",
-        "titleTag": "h1",
-        "type": "error",
+        "title": 'There are 2 problems with your answer',
+        "titleTag": 'h1',
+        "type": 'error',
         "dsExample": isPatternLib
 }) %}
     {{
         onsList({
-            "element": "ol",
+            "element": 'ol',
             "itemsList": [
                 {
-                    "text": "Enter a number",
-                    "url": "#container-test-number",
-                    "classes": "js-inpagelink"
+                    "text": 'Enter a number',
+                    "url": '#container-test-number',
+                    "classes": 'js-inpagelink'
                 },
                 {
-                    "text": "Enter a number less than or equal to 100",
-                    "url": "#container-test-percent",
-                    "classes": "js-inpagelink"
+                    "text": 'Enter a number less than or equal to 100',
+                    "url": '#container-test-percent',
+                    "classes": 'js-inpagelink'
                 }
             ]
         })

diff --git a/src/components/panel/examples/error/index.njk b/src/components/panel/examples/error/index.njk
@@ -2,18 +2,18 @@
 
 {{
     onsInput({
-        "id": "number",
-        "type": "number",
-        "classes": "input--w-5",
+        "id": 'number',
+        "type": 'number',
+        "classes": 'input--w-5',
         "attributes": {
             "min": 0,
             "required": true
         },
         "label": {
-            "text": "Number of employees paid monthly"
+            "text": 'Number of employees paid monthly'
         },
         "error": {
-            "text": "Enter a number",
+            "text": 'Enter a number',
             "dsExample": isPatternLib
         }
     })

diff --git a/src/components/panel/examples/information/index.njk b/src/components/panel/examples/information/index.njk
@@ -1,6 +1,6 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {{
     onsPanel({
-        "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><ul><li>VAT</li><li>Internet sales</li></ul>"
+        "body": '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><ul><li>VAT</li><li>Internet sales</li></ul>'
     })
 }}
diff --git a/src/components/panel/examples/success/index.njk b/src/components/panel/examples/success/index.njk
@@ -1,9 +1,9 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {{
     onsPanel({
-        "type": "success",
-        "id": "success-id",
-        "icon": "check",
-        "body": "Information has been successfully submitted."
+        "type": 'success',
+        "id": 'success-id',
+        "icon": 'check',
+        "body": 'Information has been successfully submitted.'
     })
 }}
diff --git a/src/components/panel/examples/warn/index.njk b/src/components/panel/examples/warn/index.njk
@@ -1,7 +1,7 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        "type": "warn"
+        "type": 'warn'
     })
 %}
     All of the information about this person will be deleted