fix(ffe-context-message-react): translations of aria labels

packages/ffe-context-message-react/src/ContextErrorMessage.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { number, node, string, bool, oneOf, func, object } from 'prop-types';
 import acceptedLocales from './locale/accepted-locales';
+import texts from './locale/texts';
 import ContextMessage from './ContextMessage';
 import { ContextMessageIcon } from './ContextMessageIcon';
 
 const ContextErrorMessage = props => {
-    const { alert, ...rest } = props;
+    const { alert, locale, ...rest } = props;
 
     const priorityHighIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+';
@@ -16,14 +17,15 @@ const ContextErrorMessage = props => {
     return (
         <ContextMessage
             {...rest}
+            locale={locale}
             messageType="error"
-            aria-label="Feilmelding"
             role={alert ? 'alert' : 'group'}
+            aria-label={texts[locale].error.ariaLabel}
             icon={
                 <ContextMessageIcon
                     smallIconUrl={priorityHighIconSmall}
                     largeIconUrl={priorityHighIconLarge}
-                    ariaLabel="Utropstegn"
+                    ariaLabel={texts[locale].error.icon}
                 />
             }
         />
@@ -43,7 +45,7 @@ ContextErrorMessage.propTypes = {
     header: string,
     /** ID for the header container */
     headerElementId: string,
-    /** Decides the language of the aria-label for the close icon */
+    /** Decides the language */
     locale: oneOf(acceptedLocales),
     /** Callback for when the context message has been closed (after the animation) */
     onClose: func,

packages/ffe-context-message-react/src/ContextInfoMessage.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import ContextMessage from './ContextMessage';
 import { ContextMessageIcon } from './ContextMessageIcon';
+import texts from './locale/texts';
+import { oneOf } from 'prop-types';
+import acceptedLocales from './locale/accepted-locales';
 
-const ContextInfoMessage = props => {
+const ContextInfoMessage = ({ locale, ...rest }) => {
     const infoIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
 
@@ -11,19 +14,29 @@ const ContextInfoMessage = props => {
 
     return (
         <ContextMessage
-            {...props}
+            {...rest}
+            locale={locale}
             messageType="info"
-            aria-label="Infomelding"
             role="group"
+            aria-label={texts[locale].info.ariaLabel}
             icon={
                 <ContextMessageIcon
                     smallIconUrl={infoIconSmall}
                     largeIconUrl={infoIconLarge}
-                    ariaLabel="Infotegn"
+                    ariaLabel={texts[locale].info.icon}
                 />
             }
         />
     );
 };
 
+ContextInfoMessage.defaultProps = {
+    locale: 'nb',
+};
+
+ContextInfoMessage.propTypes = {
+    /** Decides the language */
+    locale: oneOf(acceptedLocales),
+};
+
 export default ContextInfoMessage;

packages/ffe-context-message-react/src/ContextMessage.js

@@ -112,9 +112,7 @@ const ContextMessage = ({
             </div>
             {showCloseButton && (
                 <button
-                    aria-label={`${
-                        texts[locale].FFE_CONTEXT_MESSAGE_CLOSE
-                    } ${headerText || ''}`}
+                    aria-label={`${texts[locale].close} ${headerText || ''}`}
                     className="ffe-context-message-content__close-button"
                     onClick={handleClose}
                     type="button"

packages/ffe-context-message-react/src/ContextMessageIcon.js

@@ -2,17 +2,21 @@ import React from 'react';
 import { string } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
 
-export const ContextMessageIcon = ({ smallIconUrl, largeIconUrl }) => {
+export const ContextMessageIcon = ({
+    smallIconUrl,
+    largeIconUrl,
+    ariaLabel,
+}) => {
     return (
         <>
             <Icon
-                ariaLabel="Utropstegn"
+                ariaLabel={ariaLabel}
                 fileUrl={smallIconUrl}
                 className="ffe-context-message-content__icon-span ffe-context-message-content__icon-span--small"
                 size="sm"
             />
             <Icon
-                ariaLabel="Utropstegn"
+                ariaLabel={ariaLabel}
                 fileUrl={largeIconUrl}
                 className="ffe-context-message-content__icon-span ffe-context-message-content__icon-span--large"
                 size="lg"

packages/ffe-context-message-react/src/ContextSuccessMessage.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import texts from './locale/texts';
 import ContextMessage from './ContextMessage';
 import { ContextMessageIcon } from './ContextMessageIcon';
+import { oneOf } from 'prop-types';
+import acceptedLocales from './locale/accepted-locales';
 
-const ContextSuccessMessage = props => {
+const ContextSuccessMessage = ({ locale, ...rest }) => {
     const checkIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+';
 
@@ -11,19 +14,29 @@ const ContextSuccessMessage = props => {
 
     return (
         <ContextMessage
-            {...props}
+            {...rest}
+            locale={locale}
             messageType="success"
-            aria-label="Suksessmelding"
             role="group"
+            aria-label={texts[locale].success.ariaLabel}
             icon={
                 <ContextMessageIcon
                     smallIconUrl={checkIconSmall}
                     largeIconUrl={checkIconLarge}
-                    ariaLabel="hake"
+                    ariaLabel={texts[locale].success.icon}
                 />
             }
         />
     );
 };
 
+ContextSuccessMessage.defaultProps = {
+    locale: 'nb',
+};
+
+ContextSuccessMessage.propTypes = {
+    /** Decides the language */
+    locale: oneOf(acceptedLocales),
+};
+
 export default ContextSuccessMessage;

packages/ffe-context-message-react/src/ContextTipsMessage.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import ContextMessage from './ContextMessage';
 import { ContextMessageIcon } from './ContextMessageIcon';
+import texts from './locale/texts';
+import { oneOf } from 'prop-types';
+import acceptedLocales from './locale/accepted-locales';
 
-const ContextTipsMessage = props => {
+const ContextTipsMessage = ({ locale, ...rest }) => {
     const lightbulbIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTExMi45MjRxLTI3LjA5NSAwLTQ2LjU1Ny0xOC42NS0xOS40NjEtMTguNjUtMjEuMzg1LTQ1LjY1N2gxMzYuMzA4cS0xLjkyNCAyNy4zMDctMjEuNTk3IDQ1LjgwNy0xOS42NzQgMTguNS00Ni43NjkgMTguNVpNMzcyLjI4My0yNDAuNjE3cS0xMS4wNTIgMC0xOC42NjctNy40MDUtNy42MTUtNy40MDQtNy42MTUtMTguMzg0IDAtMTAuOTc5IDcuNDUzLTE4LjU5NSA3LjQ1NC03LjYxNSAxOC41MDYtNy42MTVoMjE1Ljc1N3ExMS4wNTIgMCAxOC42NjcgNy40MDUgNy42MTUgNy40MDUgNy42MTUgMTguMzg0dC03LjQ1MyAxOC41OTVxLTcuNDU0IDcuNjE1LTE4LjUwNiA3LjYxNUgzNzIuMjgzWm0tNDUuMTI5LTExNS4zODRxLTU1Ljg0NS0zNi4wNzctODUuNDk5LTk0LjYxNVEyMTIuMDAxLTUwOS4xNTQgMjEyLjAwMS01NzZxMC0xMTEuOTIyIDc4LjAzOC0xODkuOTYxUTM2OC4wNzgtODQzLjk5OSA0ODAtODQzLjk5OXExMTEuOTIyIDAgMTg5Ljk2MSA3OC4wMzhRNzQ3Ljk5OS02ODcuOTIyIDc0Ny45OTktNTc2cTAgNjYuODQ2LTI5LjY1NCAxMjUuMzg0dC04NS40OTkgOTQuNjE1SDMyNy4xNTRaTTM0NC00MDhoMjcycTM4LTMxIDU5LTc1dDIxLTkzcTAtOTAuMzI3LTYyLjc2OS0xNTMuMTY0UTU3MC40NjItNzkyIDQ4MC4yMzEtNzkyVDMyNy03MjkuMTY0UTI2NC02NjYuMzI3IDI2NC01NzZxMCA0OSAyMSA5M3Q1OSA3NVptMTM2IDBaIi8+PC9zdmc+';
 
@@ -11,19 +14,29 @@ const ContextTipsMessage = props => {
 
     return (
         <ContextMessage
-            {...props}
+            {...rest}
+            locale={locale}
             messageType="tips"
-            aria-label="Tipsmelding"
             role="group"
+            aria-label={texts[locale].tip.ariaLabel}
             icon={
                 <ContextMessageIcon
                     smallIconUrl={lightbulbIconSmall}
                     largeIconUrl={lightbulbIconLarge}
-                    ariaLabel="Lyspære"
+                    ariaLabel={texts[locale].tip.icon}
                 />
             }
         />
     );
 };
 
+ContextTipsMessage.defaultProps = {
+    locale: 'nb',
+};
+
+ContextTipsMessage.propTypes = {
+    /** Decides the language */
+    locale: oneOf(acceptedLocales),
+};
+
 export default ContextTipsMessage;

packages/ffe-context-message-react/src/locale/texts.js

@@ -1,9 +1,59 @@
-const nb = {};
-const nn = {};
-const en = {};
-
-nb.FFE_CONTEXT_MESSAGE_CLOSE = 'Lukk';
-nn.FFE_CONTEXT_MESSAGE_CLOSE = 'Lukk';
-en.FFE_CONTEXT_MESSAGE_CLOSE = 'Close';
+const nb = {
+    close: 'Lukk',
+    error: {
+        ariaLabel: 'Feilmelding',
+        icon: 'Utropstegn',
+    },
+    info: {
+        ariaLabel: 'Infomelding',
+        icon: 'Infotegn',
+    },
+    success: {
+        ariaLabel: 'Suksessmelding',
+        icon: 'Hake',
+    },
+    tip: {
+        ariaLabel: 'Tipsmelding',
+        icon: 'Lyspære',
+    },
+};
+const nn = {
+    close: 'Lukk',
+    error: {
+        ariaLabel: 'Feilmelding',
+        icon: 'Utropsteikn',
+    },
+    info: {
+        ariaLabel: 'Infomelding',
+        icon: 'Infoteikn',
+    },
+    success: {
+        ariaLabel: 'Suksessmelding',
+        icon: 'Hake',
+    },
+    tip: {
+        ariaLabel: 'Tipsmelding',
+        icon: 'Lyspære',
+    },
+};
+const en = {
+    close: 'Close',
+    error: {
+        ariaLabel: 'Error message',
+        icon: 'Exclamation mark',
+    },
+    info: {
+        ariaLabel: 'Info message',
+        icon: 'Info sign',
+    },
+    success: {
+        ariaLabel: 'Success message',
+        icon: 'Check mark',
+    },
+    tip: {
+        ariaLabel: 'Tip message',
+        icon: 'Light bulb',
+    },
+};
 
 export default { nb, nn, en };