@ons/design-system 65.2.0 → 65.2.2

package/components/radios/example-radios-with-visible-text-input.njk

@@ -12,14 +12,14 @@
             "name": "gender-identity",
             "radios": [
                 {
-                    "id": "yes",
+                    "id": "yes-example-radio-with-visible-text",
                     "label": {
                         "text": "Yes"
                     },
                     "value": "yes"
                 },
                 {
-                    "id": "no",
+                    "id": "no-example-radio-with-visible-text",
                     "label": {
                         "text": "No"
                     },
@@ -27,7 +27,7 @@
                     "other": {
                         "open": true,
                         "otherType": "input",
-                        "id": "no-textbox",
+                        "id": "no-textbox-example-radio-with-visible-text",
                         "name": "no-answer",
                         "label": {
                             "text": "Enter your gender identity"

package/components/relationships/example-relationships-error.njk

@@ -62,7 +62,7 @@ layout: ~
             },
             "radios": [
                 {
-                    "id": "husband-wife",
+                    "id": "husband-wife-example-relationships-error",
                     "value": "husband-wife",
                     "label": {
                         "text": "Husband or wife"
@@ -73,7 +73,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "civil-partner",
+                    "id": "civil-partner-example-relationships-error",
                     "value": "civil-partner",
                     "label": {
                         "text": "Legally registered civil partner"
@@ -84,7 +84,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "partner",
+                    "id": "partner-example-relationships-error",
                     "value": "partner",
                     "label": {
                         "text": "Partner"
@@ -95,7 +95,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "son-daughter",
+                    "id": "son-daughter-example-relationships-error",
                     "value": "son-daughter",
                     "label": {
                         "text": "Son or daughter"
@@ -106,7 +106,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepchild",
+                    "id": "stepchild-example-relationships-error",
                     "value": "stepchild",
                     "label": {
                         "text": "Stepchild"
@@ -117,7 +117,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "brother-sister",
+                    "id": "brother-sister-example-relationships-error",
                     "value": "brother-sister",
                     "label": {
                         "text": "Brother or sister"
@@ -128,7 +128,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepbrother-stepsister",
+                    "id": "stepbrother-stepsister-example-relationships-error",
                     "value": "stepbrother-stepsister",
                     "label": {
                         "text": "Stepbrother or stepsister"
@@ -139,7 +139,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "mother-father",
+                    "id": "mother-father-example-relationships-error",
                     "value": "mother-father",
                     "label": {
                         "text": "Mother or father"
@@ -150,7 +150,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepmother-stepfather",
+                    "id": "stepmother-stepfather-example-relationships-error",
                     "value": "stepmother-stepfather",
                     "label": {
                         "text": "Stepmother or stepfather"
@@ -161,7 +161,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "grandchild",
+                    "id": "grandchild-example-relationships-error",
                     "value": "grandchild",
                     "label": {
                         "text": "Grandchild"
@@ -172,7 +172,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "grandparent",
+                    "id": "grandparent-example-relationships-error",
                     "value": "grandparent",
                     "label": {
                         "text": "Grandparent"
@@ -183,7 +183,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "other-relation",
+                    "id": "other-relation-example-relationships-error",
                     "value": "other-relation",
                     "label": {
                         "text": "Other relation"
@@ -194,7 +194,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "unrelated",
+                    "id": "unrelated-example-relationships-error",
                     "value": "unrelated",
                     "label": {
                         "text": "Unrelated",

package/components/relationships/example-relationships-you.njk

@@ -38,7 +38,7 @@ layout: ~
             "dontWrap": true,
             "radios": [
                 {
-                    "id": "husband-wife",
+                    "id": "husband-wife-example-relationships-you",
                     "value": "husband-wife",
                     "label": {
                         "text": "Husband or wife"
@@ -49,7 +49,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "civil-partner",
+                    "id": "civil-partner-example-relationships-you",
                     "value": "civil-partner",
                     "label": {
                         "text": "Legally registered civil partner"
@@ -60,7 +60,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "partner",
+                    "id": "partner-example-relationships-you",
                     "value": "partner",
                     "label": {
                         "text": "Partner"
@@ -71,7 +71,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "son-daughter",
+                    "id": "son-daughter-example-relationships-you",
                     "value": "son-daughter",
                     "label": {
                         "text": "Son or daughter"
@@ -82,7 +82,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepchild",
+                    "id": "stepchild-example-relationships-you",
                     "value": "stepchild",
                     "label": {
                         "text": "Stepchild"
@@ -93,7 +93,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "brother-sister",
+                    "id": "brother-sister-example-relationships-you",
                     "value": "brother-sister",
                     "label": {
                         "text": "Brother or sister"
@@ -104,7 +104,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepbrother-stepsister",
+                    "id": "stepbrother-stepsister-example-relationships-you",
                     "value": "stepbrother-stepsister",
                     "label": {
                         "text": "Stepbrother or stepsister"
@@ -115,7 +115,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "mother-father",
+                    "id": "mother-father-example-relationships-you",
                     "value": "mother-father",
                     "label": {
                         "text": "Mother or father"
@@ -126,7 +126,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepmother-stepfather",
+                    "id": "stepmother-stepfather-example-relationships-you",
                     "value": "stepmother-stepfather",
                     "label": {
                         "text": "Stepmother or stepfather"
@@ -137,7 +137,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "grandchild",
+                    "id": "grandchild-example-relationships-you",
                     "value": "grandchild",
                     "label": {
                         "text": "Grandchild"
@@ -148,7 +148,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "grandparent",
+                    "id": "grandparent-example-relationships-you",
                     "value": "grandparent",
                     "label": {
                         "text": "Grandparent"
@@ -159,7 +159,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "other-relation",
+                    "id": "other-relation-example-relationships-you",
                     "value": "other-relation",
                     "label": {
                         "text": "Other relation"
@@ -170,7 +170,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "unrelated",
+                    "id": "unrelated-example-relationships-you",
                     "value": "unrelated",
                     "label": {
                         "text": "Unrelated",

package/components/relationships/example-relationships.njk

@@ -36,7 +36,7 @@ layout: ~
             "dontWrap": true,
             "radios": [
                 {
-                    "id": "husband-wife",
+                    "id": "husband-wife-example-relationships",
                     "value": "husband-wife",
                     "label": {
                         "text": "Husband or wife"
@@ -47,7 +47,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "civil-partner",
+                    "id": "civil-partner-example-relationships",
                     "value": "civil-partner",
                     "label": {
                         "text": "Legally registered civil partner"
@@ -58,7 +58,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "partner",
+                    "id": "partner-example-relationships",
                     "value": "partner",
                     "label": {
                         "text": "Partner"
@@ -69,7 +69,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "son-daughter",
+                    "id": "son-daughter-example-relationships",
                     "value": "son-daughter",
                     "label": {
                         "text": "Son or daughter"
@@ -80,7 +80,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepchild",
+                    "id": "stepchild-example-relationships",
                     "value": "stepchild",
                     "label": {
                         "text": "Stepchild"
@@ -91,7 +91,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "brother-sister",
+                    "id": "brother-sister-example-relationships",
                     "value": "brother-sister",
                     "label": {
                         "text": "Brother or sister"
@@ -102,7 +102,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepbrother-stepsister",
+                    "id": "stepbrother-stepsister-example-relationships",
                     "value": "stepbrother-stepsister",
                     "label": {
                         "text": "Stepbrother or stepsister"
@@ -113,7 +113,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "mother-father",
+                    "id": "mother-father-example-relationships",
                     "value": "mother-father",
                     "label": {
                         "text": "Mother or father"
@@ -124,7 +124,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "stepmother-stepfather",
+                    "id": "stepmother-stepfather-example-relationships",
                     "value": "stepmother-stepfather",
                     "label": {
                         "text": "Stepmother or stepfather"
@@ -135,7 +135,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "grandchild",
+                    "id": "grandchild-example-relationships",
                     "value": "grandchild",
                     "label": {
                         "text": "Grandchild"
@@ -146,7 +146,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "grandparent",
+                    "id": "grandparent-example-relationships",
                     "value": "grandparent",
                     "label": {
                         "text": "Grandparent"
@@ -157,7 +157,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "other-relation",
+                    "id": "other-relation-example-relationships",
                     "value": "other-relation",
                     "label": {
                         "text": "Other relation"
@@ -168,7 +168,7 @@ layout: ~
                     }
                 },
                 {
-                    "id": "unrelated",
+                    "id": "unrelated-example-relationships",
                     "value": "unrelated",
                     "label": {
                         "text": "Unrelated",

package/components/select/example-select-with-error.njk

@@ -2,7 +2,7 @@
 
 {{
     onsSelect({
-        "id": "select",
+        "id": "select-example-with-error",
         "name": "select",
         "label": {
             "text": "Question topic"

package/components/select/example-select-with-inline-label.njk

@@ -1,7 +1,7 @@
 {% from "components/select/_macro.njk" import onsSelect %}
 {{
     onsSelect({
-        "id": "select",
+        "id": "select-example-with-inline-label",
         "name": "select",
         "classes": "ons-u-wa--@xxs",
         "label": {

package/components/select/example-select.njk

@@ -1,7 +1,7 @@
 {% from "components/select/_macro.njk" import onsSelect %}
 {{
     onsSelect({
-        "id": "select",
+        "id": "select-example",
         "name": "select",
         "label": {
             "text": "Question topic"

package/components/summary/_macro.njk

@@ -96,8 +96,8 @@
                                                         <a
                                                             href="{{ action.url }}"
                                                             class="ons-summary__button"
-                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
-                                                        >{{ action.text }}<span class="ons-u-vh">answer for {{ row.rowTitle }}</span></a>
+                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+                                                        ><span class="ons-summary__button-text" aria-hidden="true">{{ action.text }}</span><span class="ons-u-vh">{{ action.visuallyHiddenText }}</span></a>
                                                     {% endfor %}
                                                 </dd>
                                             {% endif %}

package/components/summary/_macro.spec.js

@@ -49,6 +49,7 @@ const EXAMPLE_SUMMARY_ROWS = {
           actions: [
             {
               text: 'Action 1',
+              visuallyHiddenText: 'action 1 for row title 2',
               attributes: {
                 a: 'abc',
                 b: 'def',
@@ -57,6 +58,7 @@ const EXAMPLE_SUMMARY_ROWS = {
             },
             {
               text: 'Action 2',
+              visuallyHiddenText: 'action 2 for row title 2',
               url: '#2',
             },
           ],
@@ -147,10 +149,12 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
+              visuallyHiddenText: 'change list item',
               url: '#0',
             },
             {
               text: 'Remove',
+              visuallyHiddenText: 'remove list item',
               url: '#0',
             },
           ],
@@ -165,6 +169,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
+              visuallyHiddenText: 'change list item',
               url: '#0',
             },
           ],
@@ -179,6 +184,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
+              visuallyHiddenText: 'change list item',
               url: '#0',
             },
           ],
@@ -197,10 +203,12 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
+              visuallyHiddenText: 'change answer',
               url: '#0',
             },
             {
               text: 'Remove',
+              visuallyHiddenText: 'remove list item',
               url: '#0',
             },
           ],
@@ -215,6 +223,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
+              visuallyHiddenText: 'change list item',
               url: '#0',
             },
           ],
@@ -229,6 +238,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
+              visuallyHiddenText: 'change list item',
               url: '#0',
             },
           ],
@@ -390,11 +400,7 @@ describe('macro: summary', () => {
       it('displays the `rowTitle` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text')
-            .text()
-            .trim(),
-        ).toBe('row title 1');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text').text().trim()).toBe('row title 1');
       });
 
       it('has a custom icon `iconType`', () => {
@@ -430,21 +436,15 @@ describe('macro: summary', () => {
       it('displays the `valueList` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text')
-            .text()
-            .trim(),
-        ).toBe('row value 1');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text').text().trim()).toBe(
+          'row value 1',
+        );
       });
 
       it('displays the `other` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li')
-            .text()
-            .trim(),
-        ).toBe('other value');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li').text().trim()).toBe('other value');
       });
 
       it('wraps the `valueList` in a ul if multiple values provided', () => {
@@ -476,11 +476,15 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
-        ).toBe('Action 1answer for row title 2');
+          $(
+            '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-summary__button-text',
+          ).text(),
+        ).toBe('Action 1');
         expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
-        ).toBe('Action 2answer for row title 2');
+          $(
+            '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child .ons-summary__button-text',
+          ).text(),
+        ).toBe('Action 2');
       });
 
       it('has the correct visually hidden <span> text', () => {
@@ -490,7 +494,10 @@ describe('macro: summary', () => {
           $(
             '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-u-vh',
           ).text(),
-        ).toBe('answer for row title 2');
+        ).toBe('action 1 for row title 2');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child .ons-u-vh').text(),
+        ).toBe('action 2 for row title 2');
       });
 
       it('has custom `attributes`', () => {
@@ -588,11 +595,7 @@ describe('macro: summary', () => {
     it('has the correct link `text`', () => {
       const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_NO_ROWS));
 
-      expect(
-        $('.ons-summary__group .ons-summary__link a')
-          .text()
-          .trim(),
-      ).toBe('Summary link');
+      expect($('.ons-summary__group .ons-summary__link a').text().trim()).toBe('Summary link');
     });
 
     it('has the correct link `url`', () => {

package/components/summary/example-summary-grouped-total.njk

@@ -19,6 +19,7 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
+                                                "visuallyHiddenText": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -37,6 +38,7 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
+                                                "visuallyHiddenText": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]

package/components/summary/example-summary-grouped-with-errors.njk

@@ -19,6 +19,7 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
+                                                "visuallyHiddenText": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -39,6 +40,7 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
+                                                "visuallyHiddenText": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -58,6 +60,7 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
+                                                "visuallyHiddenText": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -77,6 +80,7 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
+                                                "visuallyHiddenText": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]