Added flexibility to override default icon text for accessibility. Co…

…de consistency tweaks
ONSdigital · Jan 26, 2021 · e2d99c8 · e2d99c8
1 parent 05f2b04
commit e2d99c8
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 25 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
@@ -31,7 +31,7 @@
             {% 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">Warning</span>
+                <span class="u-vh">{{ params.iconText | default("Warning: ") }}</span>
             {% endif %}
 
             {% if params is defined and params and params.title is defined and params.title %}

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