From d6fb40389f06924f0db3821d15fcbf45ca6b3d96 Mon Sep 17 00:00:00 2001 From: SriHV Date: Thu, 9 Jan 2025 17:40:36 +0000 Subject: [PATCH] added new param bodyLabel and removed ariaLabelMsg --- src/components/message-list/_macro-options.md | 19 +++++++++-------- src/components/message-list/_macro.njk | 10 ++++----- src/components/message-list/_macro.spec.js | 21 +++++++------------ 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/src/components/message-list/_macro-options.md b/src/components/message-list/_macro-options.md index a8792be3cd..754be70a75 100644 --- a/src/components/message-list/_macro-options.md +++ b/src/components/message-list/_macro-options.md @@ -3,7 +3,7 @@ | ariaLabel | string | false | The `aria-label` attribute for the message list element. Defaults to “Message List”. | | unreadText | string | true | Text label for each unread message suffix displayed in brackets, for example, “New” | | ariaLabelMetaData | string | false | The `aria-label` attribute for each message metadata information. Defaults to “Message metadata”. | -| ariaLabelMsg | string | false | The `aria-label` attribute for each message body preview. Defaults to “Message text”. | +| ariaLabelMsg | string | false | (DEPRECATED) The `aria-label` attribute for each message body preview. Defaults to “Message text”. | | 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 | @@ -11,14 +11,15 @@ ## Message -| Name | Type | Required | Description | -| -------- | ----------------- | -------- | ---------------------------------------------------------------------- | -| id | string | true | The HTML `id` for the message item | -| subject | `Object` | true | Settings for the [Subject](#subject) | -| fromText | string | true | Value of the “From” sender name in the message metadata information | -| dateText | string | true | Value of the “Sent” date stamp in the message metadata information | -| body | string | true | Text displayed for the message body snippet | -| unread | boolean | false | Set to “true” to display the unread message suffix after the `subject` | +| Name | Type | Required | Description | +| --------- | ----------------- | -------- | ---------------------------------------------------------------------- | +| id | string | true | The HTML `id` for the message item | +| subject | `Object` | true | Settings for the [Subject](#subject) | +| fromText | string | true | Value of the “From” sender name in the message metadata information | +| dateText | string | true | Value of the “Sent” date stamp in the message metadata information | +| bodyLabel | string | true | The visually hidden screen reader "body" prefix for message body | +| body | string | true | Text displayed for the message body snippet | +| unread | boolean | false | Set to “true” to display the unread message suffix after the `subject` | ## Subject diff --git a/src/components/message-list/_macro.njk b/src/components/message-list/_macro.njk index 8010a6594f..8dc11e0fec 100644 --- a/src/components/message-list/_macro.njk +++ b/src/components/message-list/_macro.njk @@ -15,11 +15,11 @@
{{ message.dateText }}
-
- {{ params.ariaLabelMsg | default("Message text") }}: +
+ {% if params.ariaLabelMsg %} + {{ params.ariaLabelMsg | default("Message text") }}: + {% endif %} + {{ message.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 f7b8f5204b..a8178361cd 100644 --- a/src/components/message-list/_macro.spec.js +++ b/src/components/message-list/_macro.spec.js @@ -20,6 +20,7 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = { }, fromText: 'Example Sender 1', dateText: 'Tue 4 Jul 2020 at 7:47', + bodyLabel: 'Body', body: 'An example message.', }, { @@ -30,6 +31,7 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = { }, fromText: 'Example Sender 2', dateText: 'Mon 1 Oct 2019 at 9:52', + bodyLabel: 'Body', body: 'Another example message.', }, ], @@ -39,7 +41,6 @@ const EXAMPLE_MESSAGE_LIST = { ...EXAMPLE_MESSAGE_LIST_MINIMAL, ariaLabel: 'Message list for ONS Business Surveys', ariaLabelMetaData: 'Message information', - ariaLabelMsg: 'Message preview', }; describe('macro: message-list', () => { @@ -74,18 +75,6 @@ describe('macro: message-list', () => { expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message information'); }); - it('has `aria-label` attribute on `.ons-message-item__metadata-term--body` with the correct default value', () => { - const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL)); - - expect($('.ons-message-item__metadata-term--body:first').attr('aria-label')).toBe('Message text'); - }); - - it('has `aria-label` attribute on `.ons-message-item__metadata-term--body` using the provided value', () => { - const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST)); - - expect($('.ons-message-item__metadata-term--body:first').attr('aria-label')).toBe('Message preview'); - }); - it('has `unreadText` for unread messages', () => { const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST)); @@ -104,6 +93,12 @@ describe('macro: message-list', () => { expect($('.ons-message-item__metadata-term--date:first').text().trim()).toBe('Date:'); }); + it('has visually hidden label `bodyLabel`', () => { + const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL)); + + expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:'); + }); + it('has visually hidden label `hiddenReadLabel`', () => { const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));