Refactoring of handling mandatory notes above the table (#728)

* First draft of refactor of mandatory notes above the table

* Add space in text

* Moved div out of Conent top to get rid of gap
Moved check for no notes from alert to surrending div to avoid space if no notes

* Use common style for heading underline

* Use aria-live

* Code cleanup
Use already existing text from textfiles

* Remove commeted out code

* Spelling mistake

* moved function out of component function , so it could be accesed from test file
Added test

* Don't use loadash

Author: PerIngeVaaje

packages/pxweb2-ui/src/lib/components/Alert/Alert.module.scss

@@ -25,10 +25,7 @@
   &:hover {
     box-shadow: inset 0px 0px 0px 2px var(--px-color-border-info);
     h2 {
-      text-decoration: underline;
-      text-decoration-thickness: 7%;
-      text-underline-offset: 9%;
-      text-decoration-skip-ink: true;
+      @extend .heading-underline;
     }
   }
   &:hover .alert-arrow-wrapper {
@@ -49,10 +46,7 @@
   &:hover {
     box-shadow: inset 0px 0px 0px 2px var(--px-color-border-success);
     h2 {
-      text-decoration: underline;
-      text-decoration-thickness: 7%;
-      text-underline-offset: 9%;
-      text-decoration-skip-ink: true;
+      @extend .heading-underline;
     }
   }
   &:hover .alert-arrow-wrapper {
@@ -72,10 +66,7 @@
   &:hover {
     box-shadow: inset 0px 0px 0px 2px var(--px-color-border-warning);
     h2 {
-      text-decoration: underline;
-      text-decoration-thickness: 7%;
-      text-underline-offset: 9%;
-      text-decoration-skip-ink: true;
+      @extend .heading-underline;
     }
   }
   &:hover .alert-arrow-wrapper {
@@ -95,10 +86,7 @@
   &:hover {
     box-shadow: inset 0px 0px 0px 2px var(--px-color-border-error);
     h2 {
-      text-decoration: underline;
-      text-decoration-thickness: 7%;
-      text-underline-offset: 9%;
-      text-decoration-skip-ink: true;
+      @extend .heading-underline;
     }
   }
   &:hover .alert-arrow-wrapper {
@@ -212,6 +200,17 @@
   gap: 6px;
 }
 
+.alert-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
 .alert-section-right-continue {
   display: flex;
   margin-left: auto;

packages/pxweb2-ui/src/lib/components/Alert/Alert.tsx

@@ -20,6 +20,18 @@ export interface AlertProps {
   readonly onClick?: () => void;
   readonly className?: string;
   readonly children?: string | React.ReactNode;
+  readonly clickButtonAriaLabel?: string;
+  readonly alertAriaLabel?: string;
+  readonly ariaLive?: 'off' | 'polite' | 'assertive';
+  readonly ariaHasPopup?:
+    | 'false'
+    | 'true'
+    | 'menu'
+    | 'listbox'
+    | 'tree'
+    | 'grid'
+    | 'dialog';
+  readonly role?: React.AriaRole;
   ref?: React.Ref<HTMLDivElement>;
   id?: string;
 }
@@ -34,6 +46,11 @@ export function Alert({
   onClick,
   className = '',
   children,
+  clickButtonAriaLabel,
+  alertAriaLabel,
+  ariaHasPopup = 'false',
+  ariaLive = 'off',
+  role,
   ref,
   id,
 }: Readonly<AlertProps>) {
@@ -138,6 +155,7 @@ export function Alert({
   return (
     <div
       id={id}
+      aria-label={alertAriaLabel}
       tabIndex={clickable ? 0 : undefined}
       className={
         cl(classes[`alert-${size}`], classes[variant], {
@@ -147,6 +165,8 @@ export function Alert({
       onClick={clickable ? onClick : undefined}
       onKeyDown={clickable ? handleKeyDown : undefined}
       style={{ cursor: clickable ? 'pointer' : 'default' }}
+      aria-haspopup={ariaHasPopup}
+      role={role}
       ref={ref}
     >
       <div className={classes[`alert-section-left-${size}`]}>
@@ -200,9 +220,15 @@ export function Alert({
           </div>
         )}
         {clickable && (
-          <div className={cl(classes['alert-arrow-wrapper'])}>
-            {' '}
-            <Icon iconName={iconRight} className=""></Icon>
+          <div aria-live={ariaLive}>
+            <button
+              className={cl(classes['alert-arrow'])}
+              aria-label={clickButtonAriaLabel}
+              type="button"
+              tabIndex={-1}
+            >
+              <Icon iconName={iconRight} />
+            </button>
           </div>
         )}
       </div>

packages/pxweb2/public/locales/en/translation.json

@@ -218,7 +218,13 @@
           "mandatory_heading": "Important about the table",
           "mandatory_variable_heading": "Important about",
           "non_mandatory_heading": "For the entire table",
-          "show_all_footnotes": "Show all notes for table"
+          "show_all_footnotes": "Show all notes for table",
+          "important_about_selection_heading_1": "There are ",
+          "important_about_selection_heading_2": " important notes for your selection",
+          "important_about_selection_body": "Click on this message to read the notes.",
+          "important_about_selection_heading_one_note_1": "There is ",
+          "important_about_selection_heading_one_note_2": " important note for your selection",
+          "important_about_selection_body_one_note": "Click on this message to read the note."
         },
         "definitions": {
           "title": "Definitions",
@@ -247,10 +253,6 @@
           "description": "Description text...",
           "missing_heading": "No contact information",
           "missing_text": "The table has no contact information."
-        },
-        "notes": {
-          "important_about_table": "Important about the table",
-          "important_about_variable": "Important about "
         }
       },
       "related": {

packages/pxweb2/public/locales/no/translation.json

@@ -218,7 +218,13 @@
           "mandatory_heading": "Viktig om tabellen",
           "mandatory_variable_heading": "Viktig om",
           "non_mandatory_heading": "Gjelder hele tabellen",
-          "show_all_footnotes": "Vis alle noter for tabellen"
+          "show_all_footnotes": "Vis alle noter for tabellen",
+          "important_about_selection_heading_1": "Det er ",
+          "important_about_selection_heading_2": " viktige merknader for valgt filtrering ",
+          "important_about_selection_body": "Trykk på denne meldingen for å lese merknadene. ",
+          "important_about_selection_heading_one_note_1": "Det er ",
+          "important_about_selection_heading_one_note_2": " viktig merknad for valgt filtrering ",
+          "important_about_selection_body_one_note": "Trykk på denne meldingen for å lese merknaden. "
         },
         "definitions": {
           "title": "Definisjoner",
@@ -247,10 +253,6 @@
           "description": "Beskrivelsestekst...",
           "missing_heading": "Ingen kontaktinformasjon",
           "missing_text": "Tabellen har ikke kontaktinformasjon."
-        },
-        "notes": {
-          "important_about_table": "Viktig om tabellen",
-          "important_about_variable": "Viktig om "
         }
       },
       "related": {

packages/pxweb2/public/locales/sv/translation.json

@@ -218,7 +218,13 @@
           "mandatory_heading": "Viktigt om tabellen",
           "mandatory_variable_heading": "Viktigt om",
           "non_mandatory_heading": "Gäller hela tabellen",
-          "show_all_footnotes": "Visa alla fotnoter för tabellen"
+          "show_all_footnotes": "Visa alla fotnoter för tabellen",
+          "important_about_selection_heading_1": "Det finns ",
+          "important_about_selection_heading_2": " viktiga noter för vald filtrering ",
+          "important_about_selection_body": "Tryck på detta meddelande för att läsa noterna. ",
+          "important_about_selection_heading_one_note_1": "Det finns ",
+          "important_about_selection_heading_one_note_2": " viktig not för vald filtrering ",
+          "important_about_selection_body_one_note": "Tryck på detta meddelande för att läsa noten. "
         },
         "definitions": {
           "title": "Definitioner",
@@ -247,10 +253,6 @@
           "description": "Beskrivande text...",
           "missing_heading": "Ingen kontaktinformation",
           "missing_text": "Tabellen har ingen kontaktinformation."
-        },
-        "notes": {
-          "important_about_table": "Viktigt om tabellen",
-          "important_about_variable": "Viktigt om "
         }
       },
       "related": {

packages/pxweb2/src/app/components/ContentTop/ContentTop.module.scss

@@ -56,4 +56,5 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
+  width: 100%;
 }

packages/pxweb2/src/app/components/ContentTop/ContentTop.spec.tsx

@@ -10,9 +10,12 @@ import {
 import ContentTop from './ContentTop';
 import { renderWithProviders } from '../../util/testing-utils';
 import { getMandatoryNotesCompressed } from '../../util/notes/notesUtil';
-//import { describe, it, expect } from 'vitest';
 
 import { Config } from '../../util/config/configType';
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import * as ContentTopModule from './ContentTop';
+import { useTranslation } from 'react-i18next';
 
 // Declare the global variable for this file
 declare global {
@@ -204,3 +207,107 @@ describe('Selection', () => {
     expect(baseElement).toBeTruthy();
   });
 });
+
+describe('ContentTop.createNoteMessage', () => {
+  // Import the function from the component file
+  const { createNoteMessage } = ContentTopModule;
+
+  // Mock translation function
+  // const t = (key: string) => key;
+
+  const baseNoteInfo = {
+    numberOfTableNotes: 0,
+    tableNotes: '',
+    variableNotes: [],
+  };
+  const { t } = useTranslation();
+  it('returns null if there are no notes', () => {
+    const noteInfo = { ...baseNoteInfo };
+    const result = createNoteMessage(noteInfo as any, t);
+    expect(result).toBeNull();
+  });
+
+  it('returns table notes only if variableNotes is empty and numberOfTableNotes > 0', () => {
+    const noteInfo = {
+      ...baseNoteInfo,
+      numberOfTableNotes: 2,
+      tableNotes: 'Table note text',
+      variableNotes: [],
+    };
+    const result = createNoteMessage(noteInfo as any, t);
+    expect(result).toEqual({
+      heading:
+        'presentation_page.main_content.about_table.footnotes.mandatory_heading',
+      message: 'Table note text',
+    });
+  });
+
+  it('returns variable note only if numberOfTableNotes is 0 and one variable note', () => {
+    const noteInfo = {
+      ...baseNoteInfo,
+      numberOfTableNotes: 0,
+      variableNotes: [
+        {
+          compressednotes: 'Variable note text',
+          totalNumberOfNotesOnVariable: 1,
+        },
+      ],
+    };
+    const result = createNoteMessage(noteInfo as any, t);
+    expect(result).toEqual({
+      heading:
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_heading_one_note_1' +
+        1 +
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_heading_one_note_2',
+      message: 'Variable note text',
+    });
+  });
+
+  it('returns combined heading/message for multiple notes', () => {
+    const noteInfo = {
+      ...baseNoteInfo,
+      numberOfTableNotes: 1,
+      variableNotes: [
+        {
+          compressednotes: 'Variable note text',
+          totalNumberOfNotesOnVariable: 2,
+        },
+      ],
+    };
+    const result = createNoteMessage(noteInfo as any, t);
+    expect(result).toEqual({
+      heading:
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_heading_1' +
+        3 +
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_heading_2',
+      message:
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_body',
+    });
+  });
+
+  it('returns combined heading/message for multiple variable notes', () => {
+    const noteInfo = {
+      ...baseNoteInfo,
+      numberOfTableNotes: 0,
+      variableNotes: [
+        {
+          compressednotes: 'Variable note 1',
+          totalNumberOfNotesOnVariable: 1,
+        },
+        {
+          compressednotes: 'Variable note 2',
+          totalNumberOfNotesOnVariable: 2,
+        },
+      ],
+    };
+    const result = createNoteMessage(noteInfo as any, t);
+    expect(result).toEqual({
+      heading:
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_heading_1' +
+        3 +
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_heading_2',
+      message:
+        'presentation_page.main_content.about_table.footnotes.important_about_selection_body',
+    });
+  });
+});