Skip to content

Commit

Permalink
Refactor summary hidden span text change (#2789)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar authored Aug 24, 2023
1 parent 5fa89e8 commit 51924d3
Show file tree
Hide file tree
Showing 11 changed files with 84 additions and 34 deletions.
4 changes: 2 additions & 2 deletions ...onents_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 6 additions & 5 deletions src/components/summary/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions src/components/summary/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
53 changes: 28 additions & 25 deletions src/components/summary/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const EXAMPLE_SUMMARY_ROWS = {
actions: [
{
text: 'Action 1',
visuallyHiddenText: 'action 1 for row title 2',
attributes: {
a: 'abc',
b: 'def',
Expand All @@ -57,6 +58,7 @@ const EXAMPLE_SUMMARY_ROWS = {
},
{
text: 'Action 2',
visuallyHiddenText: 'action 2 for row title 2',
url: '#2',
},
],
Expand Down Expand Up @@ -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',
},
],
Expand All @@ -165,6 +169,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
actions: [
{
text: 'Change',
visuallyHiddenText: 'change list item',
url: '#0',
},
],
Expand All @@ -179,6 +184,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
actions: [
{
text: 'Change',
visuallyHiddenText: 'change list item',
url: '#0',
},
],
Expand All @@ -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',
},
],
Expand All @@ -215,6 +223,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
actions: [
{
text: 'Change',
visuallyHiddenText: 'change list item',
url: '#0',
},
],
Expand All @@ -229,6 +238,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
actions: [
{
text: 'Change',
visuallyHiddenText: 'change list item',
url: '#0',
},
],
Expand Down Expand Up @@ -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`', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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`', () => {
Expand Down Expand Up @@ -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`', () => {
Expand Down
2 changes: 2 additions & 0 deletions src/components/summary/example-summary-grouped-total.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -37,6 +38,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand Down
4 changes: 4 additions & 0 deletions src/components/summary/example-summary-grouped-with-errors.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -39,6 +40,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -58,6 +60,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -77,6 +80,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand Down
19 changes: 19 additions & 0 deletions src/components/summary/example-summary-grouped.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -41,6 +42,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -59,6 +61,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -82,6 +85,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -100,6 +104,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -123,6 +128,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -141,6 +147,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -164,10 +171,12 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove company",
"url": "#0"
}
]
Expand All @@ -182,6 +191,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -196,6 +206,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -214,10 +225,12 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove company",
"url": "#0"
}
]
Expand All @@ -232,6 +245,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -246,6 +260,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand Down Expand Up @@ -277,6 +292,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -291,6 +307,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -305,6 +322,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand All @@ -319,6 +337,7 @@
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
Expand Down
Loading

0 comments on commit 51924d3

Please sign in to comment.