Skip to content

Commit

Permalink
added new param bodyLabel and removed ariaLabelMsg
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV committed Jan 9, 2025
1 parent 14903e3 commit d6fb403
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 27 deletions.
19 changes: 10 additions & 9 deletions src/components/message-list/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@
| 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 |
| messages | `Array<Message>` | true | Settings for each [message item](#message) |

## Message

| Name | Type | Required | Description |
| -------- | ----------------- | -------- | ---------------------------------------------------------------------- |
| id | string | true | The HTML `id` for the message item |
| subject | `Object<Subject>` | 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<Subject>` | 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

Expand Down
10 changes: 5 additions & 5 deletions src/components/message-list/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@
<dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">
{{ message.dateText }}
</dd>
<dt
class="ons-message-item__metadata-term ons-message-item__metadata-term--body ons-u-vh"
aria-label="{{ params.ariaLabelMsg | default("Message text") }}"
>
{{ params.ariaLabelMsg | default("Message text") }}:
<dt class="ons-message-item__metadata-term ons-message-item__metadata-term--body ons-u-vh">
{% if params.ariaLabelMsg %}
{{ params.ariaLabelMsg | default("Message text") }}:
{% endif %}
{{ message.bodyLabel | default("Message text") }}:
</dt>
<dd class="ons-message-item__metadata-value ons-message-item__metadata-value--body ons-u-fs-r ons-u-mt-s">
{{ message.body | safe }}
Expand Down
21 changes: 8 additions & 13 deletions src/components/message-list/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
{
Expand All @@ -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.',
},
],
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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));

Expand All @@ -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));

Expand Down

0 comments on commit d6fb403

Please sign in to comment.