From 51924d36815ae3ab2f43e5f8883241b9431791e1 Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Thu, 24 Aug 2023 14:50:20 +0100 Subject: [PATCH] Refactor summary hidden span text change (#2789) --- ...th-timeout-warning_0_document_1_tablet.png | 4 +- src/components/summary/_macro-options.md | 11 ++-- src/components/summary/_macro.njk | 4 +- src/components/summary/_macro.spec.js | 53 ++++++++++--------- .../summary/example-summary-grouped-total.njk | 2 + .../example-summary-grouped-with-errors.njk | 4 ++ .../summary/example-summary-grouped.njk | 19 +++++++ .../summary/example-summary-household.njk | 5 ++ .../summary/example-summary-hub.njk | 8 +++ .../summary/example-summary-multiple.njk | 4 ++ src/components/summary/example-summary.njk | 4 ++ 11 files changed, 84 insertions(+), 34 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png index e57dee7bd7..38d3cec173 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8cb52531d1d281043cf0541c3c8d2a5b93bbc00c3d2a60d1244b4949a954c265 -size 13505 +oid sha256:255ba5261f88e83a8fb612ac518ba06379e3d196a20b65f9d17e2b856fe84124 +size 13594 diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md index 4113f0bce8..4ca0ac1520 100644 --- a/src/components/summary/_macro-options.md +++ b/src/components/summary/_macro-options.md @@ -53,11 +53,12 @@ ## SummaryAction -| Name | Type | Required | Description | -| ---------- | ------ | -------- | ------------------------------------------------------------------------------------------ | -| text | string | true | Text for the action link | -| url | string | true | The URL for the HTML `href` attribute of the link used to change the value of the row item | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link | +| Name | Type | Required | Description | +| ------------------ | ------ | -------- | ------------------------------------------------------------------------------------------- | +| text | string | true | Text for the action link | +| url | string | true | The URL for the HTML `href` attribute of the link used to change the value of the row item | +| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link | +| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers | ## SummaryLink diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk index c68c10de5c..6197e60fb7 100644 --- a/src/components/summary/_macro.njk +++ b/src/components/summary/_macro.njk @@ -96,8 +96,8 @@ {{ action.text }}answer for {{ row.rowTitle }} + {% 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.visuallyHiddenText }} {% endfor %} {% endif %} diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index ab76bed69c..3d88fb4e07 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/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 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`', () => { diff --git a/src/components/summary/example-summary-grouped-total.njk b/src/components/summary/example-summary-grouped-total.njk index fc5d7769ad..1db8fd11d7 100644 --- a/src/components/summary/example-summary-grouped-total.njk +++ b/src/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" } ] diff --git a/src/components/summary/example-summary-grouped-with-errors.njk b/src/components/summary/example-summary-grouped-with-errors.njk index f22fd4d195..9a703d22bc 100644 --- a/src/components/summary/example-summary-grouped-with-errors.njk +++ b/src/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" } ] diff --git a/src/components/summary/example-summary-grouped.njk b/src/components/summary/example-summary-grouped.njk index 3eeba99ca1..1c4052d8ce 100644 --- a/src/components/summary/example-summary-grouped.njk +++ b/src/components/summary/example-summary-grouped.njk @@ -23,6 +23,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -41,6 +42,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -59,6 +61,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -82,6 +85,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -100,6 +104,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -123,6 +128,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -141,6 +147,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -164,10 +171,12 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" }, { "text": "Remove", + "visuallyHiddenText": "Remove company", "url": "#0" } ] @@ -182,6 +191,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -196,6 +206,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -214,10 +225,12 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" }, { "text": "Remove", + "visuallyHiddenText": "Remove company", "url": "#0" } ] @@ -232,6 +245,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -246,6 +260,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -277,6 +292,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -291,6 +307,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -305,6 +322,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -319,6 +337,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] diff --git a/src/components/summary/example-summary-household.njk b/src/components/summary/example-summary-household.njk index cd7172267e..f6ca0f6a83 100644 --- a/src/components/summary/example-summary-household.njk +++ b/src/components/summary/example-summary-household.njk @@ -15,6 +15,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change details for Joe Bloggs", "url": "#0" } ] @@ -29,10 +30,12 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change details for Barry Scott", "url": "#0" }, { "text": "Remove", + "visuallyHiddenText": "Remove Barry Scott", "url": "#0" } ] @@ -47,10 +50,12 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change details for Susan Gill", "url": "#0" }, { "text": "Remove", + "visuallyHiddenText": "Remove Susan Gill", "url": "#0" } ] diff --git a/src/components/summary/example-summary-hub.njk b/src/components/summary/example-summary-hub.njk index 74ed25a0df..351349d3f6 100644 --- a/src/components/summary/example-summary-hub.njk +++ b/src/components/summary/example-summary-hub.njk @@ -20,6 +20,7 @@ "actions": [ { "text": "View answers", + "visuallyHiddenText": "View answers for People who live here", "url": "#0" } ] @@ -39,6 +40,7 @@ "actions": [ { "text": "View answers", + "visuallyHiddenText": "View answers for Accommodation", "url": "#0" } ] @@ -58,6 +60,7 @@ "actions": [ { "text": "View answers", + "visuallyHiddenText": "View answers for Mary Smith", "url": "#0" } ] @@ -76,6 +79,7 @@ "actions": [ { "text": "Continue with section", + "visuallyHiddenText": "Continue with John Smith's section", "url": "#0" } ] @@ -94,6 +98,7 @@ "actions": [ { "text": "Start section", + "visuallyHiddenText": "Start Billy Smith's section", "url": "#0" } ] @@ -112,6 +117,7 @@ "actions": [ { "text": "Start section", + "visuallyHiddenText": "Start Sally Smith's section", "url": "#0" } ] @@ -130,6 +136,7 @@ "actions": [ { "text": "Start section", + "visuallyHiddenText": "Start Wilhelmina Susannah Clementine-Smith's section", "url": "#0" } ] @@ -148,6 +155,7 @@ "actions": [ { "text": "Start section", + "visuallyHiddenText": "Start Vera Jones's section", "url": "#0" } ] diff --git a/src/components/summary/example-summary-multiple.njk b/src/components/summary/example-summary-multiple.njk index cad9f6ec58..403b6ecc4f 100644 --- a/src/components/summary/example-summary-multiple.njk +++ b/src/components/summary/example-summary-multiple.njk @@ -20,6 +20,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -34,6 +35,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -48,6 +50,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -62,6 +65,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] diff --git a/src/components/summary/example-summary.njk b/src/components/summary/example-summary.njk index 3964833d12..7518d9341a 100644 --- a/src/components/summary/example-summary.njk +++ b/src/components/summary/example-summary.njk @@ -24,6 +24,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -44,6 +45,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -68,6 +70,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ] @@ -88,6 +91,7 @@ "actions": [ { "text": "Change", + "visuallyHiddenText": "Change answer", "url": "#0" } ]