Skip to content

Commit

Permalink
Add arial-label to open and close modal buttons.
Browse files Browse the repository at this point in the history
  • Loading branch information
jonasbrunvoll committed Sep 27, 2024
1 parent 0a89d66 commit f457032
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,20 @@ import { motion } from 'framer-motion';
import { FocusScope } from '@react-aria/focus';
import { MonoIcon } from '@atb/components/icon';
import { useEffect, useRef } from 'react';
import { PageText, TranslatedString } from '@atb/translations';

type DescriptionModalProps = {
title: string;
description: string;
ariaLabel: string;
openModal: boolean;
closeModal: () => void;
};

const DescriptionModal = ({
title,
description,
ariaLabel,
openModal,
closeModal,
}: DescriptionModalProps) => {
Expand Down Expand Up @@ -73,6 +76,8 @@ const DescriptionModal = ({
<Typo.h2 textType="body__primary">{title}</Typo.h2>
<button
type="button"
name="closeModal"
aria-label={ariaLabel}
className={style.iconButton}
onClick={closeModal}
>
Expand Down
13 changes: 10 additions & 3 deletions src/page-modules/contact/components/input/input.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import style from './input.module.css';
import { ChangeEvent, useState } from 'react';
import { TranslatedString, useTranslation } from '@atb/translations';
import { PageText, TranslatedString, useTranslation } from '@atb/translations';
import { andIf } from '@atb/utils/css';
import { Typo } from '@atb/components/typography';
import ErrorMessage from './error-message';
Expand Down Expand Up @@ -28,6 +28,10 @@ export const Input = ({
const [openModal, setOpenModal] = useState(false);
const displayDescriptionModal = description && openModal; // Condition to avoid rendering of useEffect inside DescriptionModal before opened.

const handleModal = () => {
setOpenModal(!openModal);
};

return (
<div
className={andIf({
Expand All @@ -43,7 +47,9 @@ export const Input = ({
{description && (
<button
type="button"
onClick={() => setOpenModal(true)}
name="openModal"
aria-label={t(PageText.Contact.components.modal.open.ariaLabel)}
onClick={handleModal}
className={style.iconButton}
>
<MonoIcon icon={'status/Info'} />
Expand All @@ -68,7 +74,8 @@ export const Input = ({
title={t(label)}
description={description}
openModal={openModal}
closeModal={() => setOpenModal(false)}
closeModal={handleModal}
ariaLabel={t(PageText.Contact.components.modal.close.ariaLabel)}
/>
)}
</div>
Expand Down
16 changes: 16 additions & 0 deletions src/translations/pages/contact.ts
Original file line number Diff line number Diff line change
Expand Up @@ -954,5 +954,21 @@ export const Contact = {
),
},
},
modal: {
open: {
ariaLabel: _(
'Klikk for å åpne modal',
'Click to open modal',
'Klikk for å åpne modal',
),
},
close: {
ariaLabel: _(
'Klikk for å lukke modal',
'Click to close modal',
'Klikk for å lukke modal',
),
},
},
},
};

0 comments on commit f457032

Please sign in to comment.