Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Mar 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/ffe-context-message-react/src/ContextErrorMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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+';
Expand All @@ -16,14 +17,14 @@ const ContextErrorMessage = props => {
return (
<ContextMessage
{...rest}
locale={locale}
messageType="error"
aria-label="Feilmelding"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disse har jag fjernet konsekvent i komponenterna for dom er ikke i bruk. En alert skall vel heller kanske ikke ha en aria label?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Det er jeg ikke sikker på stemmer? Vi har UU testet disse komponentene og da funket det bra å ha label på gruppe/alert nivået. Så per nå er jeg litt uenig i at aria-labelene settes på ikonene istedenfor. Her kan man kanskje høre med Sindre om best practice

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kort svar:
Det kommer an på konteksten man implementerer elementet i. Om ikonet står for seg selv vil man måtte legge til informasjon i koden, men om det er supplerende skriftlig informasjon sammen med ikonet kan man like gjerne klassifisere ikonet som dekorativt.
Å gi alle brukere jevnverdig god informasjon på en brukervennlig måte er det viktigste.

Langt svar:
Aria-label skal som første regel kun benyttes når det ikke er mulig å bruke HTML-attributter for å gi ekstra kontekstuell informasjon. Så å bruke aria-label i stedet for HTML-attributter for disse elementene vil da være riktig.

Når det kommer til uu-hensyn kommer det i dette tilfellet an på kontekst for elementet.

Om ikonet presenteres med skriftlig beskjed om hva som har skjedd (som for eksempel "Betalingen ble registrert!") kan man argumentere for at ikonet er supplerende informasjon og derfor ikke trenger å bli plukket opp av skjermlesere i det hele tatt.

Om den tiltenkte konteksten er å benytte elementet for en alert er det viktig at dette gjøres korrekt. Om alerten krever å raskt kunne informere brukeren vil det være viktig å sørge for at dette ivaretas for alle brukere, om nødvendig med ARIA: alert.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Når jag googlet så sa jag flere exempler med aria label på group men ikke direkt på alert. Jag tolkat koden slik att aria lablen aldrig ble brukt nedøver men ser nå den ligger på {...rest}. Har tagit tilbake den nå iaf. Hensikten var ikke or ersette med ikonet. Ikonet synes jag dermot er øverflødig ;)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Du har helt rett i at label kan brukes på gruppert informasjon :)

Som nevnt er det 100% avhengig av konteksten innholdet settes i, også for om ikonet skal ha label eller ikke

role={alert ? 'alert' : 'group'}
aria-label={texts[locale].error.ariaLabel}
icon={
<ContextMessageIcon
smallIconUrl={priorityHighIconSmall}
largeIconUrl={priorityHighIconLarge}
ariaLabel="Utropstegn"
/>
}
/>
Expand All @@ -43,7 +44,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,
Expand Down
20 changes: 16 additions & 4 deletions packages/ffe-context-message-react/src/ContextInfoMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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==';

Expand All @@ -11,19 +14,28 @@ 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"
/>
}
/>
);
};

ContextInfoMessage.defaultProps = {
locale: 'nb',
};

ContextInfoMessage.propTypes = {
/** Decides the language */
locale: oneOf(acceptedLocales),
};

export default ContextInfoMessage;
4 changes: 1 addition & 3 deletions packages/ffe-context-message-react/src/ContextMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
3 changes: 0 additions & 3 deletions packages/ffe-context-message-react/src/ContextMessageIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@ export const ContextMessageIcon = ({ smallIconUrl, largeIconUrl }) => {
return (
<>
<Icon
ariaLabel="Utropstegn"
fileUrl={smallIconUrl}
className="ffe-context-message-content__icon-span ffe-context-message-content__icon-span--small"
size="sm"
/>
<Icon
ariaLabel="Utropstegn"
fileUrl={largeIconUrl}
className="ffe-context-message-content__icon-span ffe-context-message-content__icon-span--large"
size="lg"
Expand All @@ -24,5 +22,4 @@ export const ContextMessageIcon = ({ smallIconUrl, largeIconUrl }) => {
ContextMessageIcon.propTypes = {
smallIconUrl: string.isRequired,
largeIconUrl: string.isRequired,
ariaLabel: string.isRequired,
};
20 changes: 16 additions & 4 deletions packages/ffe-context-message-react/src/ContextSuccessMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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+';

Expand All @@ -11,19 +14,28 @@ const ContextSuccessMessage = props => {

return (
<ContextMessage
{...props}
{...rest}
locale={locale}
messageType="success"
aria-label="Suksessmelding"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Her er jeg ikke sikker på om jeg er enig at aria-label skal fjernes. Fordi når den ligger på group så leses den opp hele boksen istedenfor at brukerne må navigere seg inn til ikonet.

Copy link
Contributor Author

@pethel pethel Mar 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Så ikke noen exempel på alert og aria label. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role

Er ikke risken med en aria-label på alerten att den gir blaffen i texten i selva alreten og bruker selva aria labeln som innehold? Alltså att selva beskjeden som den som bruker komponenten kommer med ikke blir lest up utan kunden får kun høra "Feilmedlning"?

Har ikke testet selv. Enig i aria-label gir mening på "role=group"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Snakket med Sindre og båda blir lest op så da er dette greit.

Copy link
Contributor Author

@pethel pethel Mar 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Her er vad jag var redd for iaf
https://www.aditus.io/aria/aria-label/

Knappen får ikke "send email send". Alltså send i knappen blir spist op, men det kanskej avhenger av elementer/context

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vi har blitt eniga om att beholde aria labels også på role alert

role="group"
aria-label={texts[locale].success.ariaLabel}
icon={
<ContextMessageIcon
smallIconUrl={checkIconSmall}
largeIconUrl={checkIconLarge}
ariaLabel="hake"
/>
}
/>
);
};

ContextSuccessMessage.defaultProps = {
locale: 'nb',
};

ContextSuccessMessage.propTypes = {
/** Decides the language */
locale: oneOf(acceptedLocales),
};

export default ContextSuccessMessage;
20 changes: 16 additions & 4 deletions packages/ffe-context-message-react/src/ContextTipsMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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+';

Expand All @@ -11,19 +14,28 @@ 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"
/>
}
/>
);
};

ContextTipsMessage.defaultProps = {
locale: 'nb',
};

ContextTipsMessage.propTypes = {
/** Decides the language */
locale: oneOf(acceptedLocales),
};

export default ContextTipsMessage;
52 changes: 45 additions & 7 deletions packages/ffe-context-message-react/src/locale/texts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,47 @@
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',
},
info: {
ariaLabel: 'Infomelding',
},
success: {
ariaLabel: 'Suksessmelding',
},
tip: {
ariaLabel: 'Tipsmelding',
},
};
const nn = {
close: 'Lukk',
error: {
ariaLabel: 'Feilmelding',
},
info: {
ariaLabel: 'Infomelding',
},
success: {
ariaLabel: 'Suksessmelding',
},
tip: {
ariaLabel: 'Tipsmelding',
},
};
const en = {
close: 'Close',
error: {
ariaLabel: 'Error message',
},
info: {
ariaLabel: 'Info message',
},
success: {
ariaLabel: 'Success message',
},
tip: {
ariaLabel: 'Tip message',
},
};

export default { nb, nn, en };
Loading