Merge branch 'main' into fix/ONSDESYS-229/accessibility-browser-font-…

…size
ONSdigital · Jan 24, 2025 · 307a4f3 · 307a4f3
2 parents 44d6f5a + 0d70543
commit 307a4f3
Show file tree

Hide file tree

Showing 8 changed files with 458 additions and 367 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @ONSdigital/design-team-devs
diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js
diff --git a/src/components/document-list/_test-examples.js b/src/components/document-list/_test-examples.js
@@ -0,0 +1,74 @@
+export const EXAMPLE_DOCUMENT_LIST_BASIC = {
+    title: {
+        text: 'Crime and justice',
+        url: '#0',
+    },
+    description: 'Some description',
+};
+
+export const EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL = {
+    ...EXAMPLE_DOCUMENT_LIST_BASIC,
+    thumbnail: {
+        smallSrc: '/example-small.png',
+        largeSrc: '/example-large.png',
+    },
+};
+
+export const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE = {
+    ...EXAMPLE_DOCUMENT_LIST_BASIC,
+    metadata: {
+        file: {
+            fileType: 'PDF',
+            fileSize: '499KB',
+            filePages: '1 page',
+        },
+    },
+};
+
+export const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT = {
+    ...EXAMPLE_DOCUMENT_LIST_BASIC,
+    metadata: {
+        object: {
+            text: 'Poster',
+            url: '#0',
+            ref: 'some ref',
+        },
+    },
+};
+
+export const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE = {
+    ...EXAMPLE_DOCUMENT_LIST_BASIC,
+    metadata: {
+        date: {
+            iso: '2022-01-01',
+            short: '1 January 2022',
+        },
+    },
+};
+
+export const EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE = {
+    ...EXAMPLE_DOCUMENT_LIST_BASIC,
+    id: 'some-id',
+    thumbnail: {
+        smallSrc: '/example-small.png',
+        largeSrc: '/example-large.png',
+    },
+    metadata: {
+        object: {
+            text: 'Poster',
+            url: '#0',
+            ref: 'some ref',
+        },
+        file: {
+            fileType: 'PDF',
+            fileSize: '499KB',
+            filePages: '1 page',
+        },
+        date: {
+            iso: '2022-01-01',
+            short: '1 January 2022',
+            showPrefix: true,
+            prefix: 'Released',
+        },
+    },
+};
diff --git a/src/components/message-list/_macro-options.md b/src/components/message-list/_macro-options.md
@@ -3,10 +3,11 @@
 | 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 |
+| bodyLabel         | string           | false    | (NEW) The visually hidden screen reader "body" prefix for message body                                                       |
 | messages          | `Array<Message>` | true     | Settings for each [message item](#message)                                                                                   |
 
 ## Message

diff --git a/src/components/message-list/_macro.njk b/src/components/message-list/_macro.njk
@@ -15,10 +15,17 @@
                     <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">
+                        {% if params.ariaLabelMsg and not params.bodyLabel %}
+                            {{ params.ariaLabelMsg | default("Message text") }}:
+                        {% else %}
+                            {{ params.bodyLabel | default("Message text") }}:
+                        {% endif %}
+                    </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 }}
+                    </dd>
                 </dl>
-                <div class="ons-message-item__body" aria-label="{{ params.ariaLabelMsg | default("Message text") }}">
-                    {{ message.body | safe }}
-                </div>
                 <div class="ons-message-item__link ons-u-vh">
                     <a href="{{ message.subject.url }}">{{ params.hiddenReadLabel }}: {{ message.subject.text }}</a>
                 </div>

diff --git a/src/components/message-list/_macro.spec.js b/src/components/message-list/_macro.spec.js
@@ -10,6 +10,7 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = {
     fromLabel: 'From',
     dateLabel: 'Date',
     hiddenReadLabel: 'Read the message',
+    bodyLabel: 'Body',
     messages: [
         {
             id: 'message1',
@@ -39,7 +40,47 @@ const EXAMPLE_MESSAGE_LIST = {
     ...EXAMPLE_MESSAGE_LIST_MINIMAL,
     ariaLabel: 'Message list for ONS Business Surveys',
     ariaLabelMetaData: 'Message information',
-    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', () => {
@@ -74,18 +115,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__body` with the correct default value', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
-
-        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message text');
-    });
-
-    it('has `aria-label` attribute on `.ons-message-item__body` using the provided value', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
-
-        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message preview');
-    });
-
     it('has `unreadText` for unread messages', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
@@ -110,6 +139,35 @@ describe('macro: message-list', () => {
         expect($('.ons-message-item__link:first').text()).toContain('Read the message: ');
     });
 
+    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__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 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()).toBe('Message text:');
+    });
+
     it('has message as expected', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
@@ -119,7 +177,7 @@ describe('macro: message-list', () => {
         expect($message2.find('.ons-message-item__subject').attr('id')).toBe('message2');
         expect($message2.find('.ons-message-item__metadata-value--from').text().trim()).toBe('Example Sender 2');
         expect($message2.find('.ons-message-item__metadata-value--date').text().trim()).toBe('Mon 1 Oct 2019 at 9:52');
-        expect($message2.find('.ons-message-item__body').text().trim()).toBe('Another example message.');
+        expect($message2.find('.ons-message-item__metadata-value--body').text().trim()).toBe('Another example message.');
         expect($message2.find('.ons-message-item__link a').attr('href')).toBe('https://example.com/message/2');
     });
 

diff --git a/src/components/message-list/_message-list.scss b/src/components/message-list/_message-list.scss
@@ -5,7 +5,7 @@
 .ons-message-item {
     list-style: none;
     margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
 
     &:not(:last-child) {
         border-bottom: 1px solid var(--ons-color-borders);

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
@@ -8,7 +8,6 @@
         "dateLabel": "Sent",
         "hiddenReadLabel": "Read the message",
         "ariaLabelMetaData": "Message information",
-        "ariaLabelMsg": "Message preview",
         "messages": [
             {
                 "id": "message-list-example-1",