From 37b6ab264472c8a10493bfbfeea39c2c904fc8cf Mon Sep 17 00:00:00 2001 From: SriHV Date: Tue, 14 Jan 2025 13:38:26 +0000 Subject: [PATCH] changes as per comments --- src/components/message-list/_macro-options.md | 2 +- src/components/message-list/_macro.njk | 5 +- src/components/message-list/_macro.spec.js | 73 ++++++++++++++++--- .../example-message-list.njk | 1 - 4 files changed, 67 insertions(+), 14 deletions(-) diff --git a/src/components/message-list/_macro-options.md b/src/components/message-list/_macro-options.md index 7459f791b4..8db43366cf 100644 --- a/src/components/message-list/_macro-options.md +++ b/src/components/message-list/_macro-options.md @@ -7,7 +7,7 @@ | fromLabel | string | true | The visually hidden screen reader “From” prefix for each message metadata information | | dateLabel | string | true | The visually hidden screen reader “Sent” prefix for each message metadata information | | hiddenReadLabel | string | true | The visually hidden screen reader “Read the message” prefix for each visually hidden link to the message conversation thread | -| bodyLabel | string | true | (NEW) The visually hidden screen reader "body" prefix for message body | +| bodyLabel | string | false | (NEW) The visually hidden screen reader "body" prefix for message body | | messages | `Array` | true | Settings for each [message item](#message) | ## Message diff --git a/src/components/message-list/_macro.njk b/src/components/message-list/_macro.njk index 76fc53508b..efbb448335 100644 --- a/src/components/message-list/_macro.njk +++ b/src/components/message-list/_macro.njk @@ -16,10 +16,11 @@ {{ message.dateText }}
- {% if params.ariaLabelMsg %} + {% if params.ariaLabelMsg and not params.bodyLabel %} {{ params.ariaLabelMsg | default("Message text") }}: + {% else %} + {{ params.bodyLabel | default("Message text") }}: {% endif %} - {{ params.bodyLabel | default("Message text") }}:
{{ message.body | safe }} diff --git a/src/components/message-list/_macro.spec.js b/src/components/message-list/_macro.spec.js index a1b57b2a9f..0143c0e543 100644 --- a/src/components/message-list/_macro.spec.js +++ b/src/components/message-list/_macro.spec.js @@ -42,9 +42,45 @@ const EXAMPLE_MESSAGE_LIST = { ariaLabelMetaData: 'Message information', }; -const EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ariaLabelMsg_PARAM = { - ...EXAMPLE_MESSAGE_LIST_MINIMAL, - ariaLabelMsg: 'Message Preview', +const EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM = { + unreadText: 'New', + fromLabel: 'From', + dateLabel: 'Date', + hiddenReadLabel: 'Read the message', + ariaLabelMsg: 'Aria Label Msg Preview', + messages: [ + { + id: 'message1', + unread: true, + subject: { + url: 'https://example.com/message/1', + text: 'Example message subject', + }, + fromText: 'Example Sender 1', + dateText: 'Tue 4 Jul 2020 at 7:47', + body: 'An example message.', + }, + ], +}; + +const EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM = { + unreadText: 'New', + fromLabel: 'From', + dateLabel: 'Date', + hiddenReadLabel: 'Read the message', + messages: [ + { + id: 'message1', + unread: true, + subject: { + url: 'https://example.com/message/1', + text: 'Example message subject', + }, + fromText: 'Example Sender 1', + dateText: 'Tue 4 Jul 2020 at 7:47', + body: 'An example message.', + }, + ], }; describe('macro: message-list', () => { @@ -97,22 +133,39 @@ describe('macro: message-list', () => { expect($('.ons-message-item__metadata-term--date:first').text().trim()).toBe('Date:'); }); - it('has visually hidden label `bodyLabel`', () => { + it('has visually hidden label `hiddenReadLabel`', () => { const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL)); - expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:'); + expect($('.ons-message-item__link:first').text()).toContain('Read the message: '); }); - it('has visually hidden label `hiddenReadLabel`', () => { + it('has visually hidden label `bodyLabel` when only `bodyLabel` is provided`', () => { const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL)); - expect($('.ons-message-item__link:first').text()).toContain('Read the message: '); + expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:'); + }); + + it('has visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are provided`', () => { + const $ = cheerio.load( + renderComponent('message-list', { + ...EXAMPLE_MESSAGE_LIST_MINIMAL, + ariaLabelMsg: 'Aria Label Msg Preview', + }), + ); + + expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:'); + }); + + it('has visually hidden deprecated label `ariaLabelMsg` when only `ariaLabelMsg` is provided', () => { + const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM)); + + expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Aria Label Msg Preview:'); }); - it('has visually hidden deprecated label `ariaLabelMsg`', () => { - const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ariaLabelMsg_PARAM)); + it('has the defualt text for visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are not provided', () => { + const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM)); - expect($('.ons-message-item__metadata-term--body:first').text().trim()).toContain('Message Preview:'); + expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Message text:'); }); it('has message as expected', () => { diff --git a/src/patterns/send-and-reply-to-messages/example-message-list.njk b/src/patterns/send-and-reply-to-messages/example-message-list.njk index ffa270d7a9..6cba89d1a2 100644 --- a/src/patterns/send-and-reply-to-messages/example-message-list.njk +++ b/src/patterns/send-and-reply-to-messages/example-message-list.njk @@ -7,7 +7,6 @@ "fromLabel": "From", "dateLabel": "Sent", "hiddenReadLabel": "Read the message", - "bodyLabel": 'Message Preview', "ariaLabelMetaData": "Message information", "messages": [ {