chore(delete): update delete organization modal (#1381)

* chore(utils): typo feedback message

* chore(delete): update delete organization modal

* fix(delete): screen reader delete organization modal

next-tavla/app/(admin)/components/Delete/index.tsx

@@ -1,8 +1,8 @@
 'use client'
-import { IconButton } from '@entur/button'
-import { DeleteIcon } from '@entur/icons'
+import { IconButton, SecondarySquareButton } from '@entur/button'
+import { CloseIcon, DeleteIcon } from '@entur/icons'
 import { Modal } from '@entur/modal'
-import { Heading3, LeadParagraph, Paragraph } from '@entur/typography'
+import { Heading2, Label, Paragraph } from '@entur/typography'
 import Link from 'next/link'
 import { TOrganization } from 'types/settings'
 import { HiddenInput } from 'components/Form/HiddenInput'
@@ -14,7 +14,8 @@ import { FormError } from '../FormError'
 import { useSearchParamsModal } from 'app/(admin)/hooks/useSearchParamsModal'
 import { deleteOrganization } from './actions'
 import { Tooltip } from '@entur/tooltip'
-
+import ducks from 'assets/illustrations/Ducks.png'
+import Image from 'next/image'
 function Delete({
     organization,
     showText,
@@ -41,28 +42,50 @@ function Delete({
                 closeLabel="Avbryt sletting"
                 className="flexColumn justifyStart alignCenter textCenter"
             >
-                <Heading3>Slett organisasjon</Heading3>
-                <LeadParagraph>
-                    Er du sikker på at du vil slette organisasjonen{' '}
-                    {organization.name}?
-                </LeadParagraph>
+                <SecondarySquareButton
+                    aria-label="Avbryt sletting"
+                    className="ml-auto"
+                    onClick={close}
+                >
+                    <CloseIcon />
+                </SecondarySquareButton>
+                <Image src={ducks} alt="" className="h-50 w-50" />
+                <Heading2>Slett organisasjon</Heading2>
+                <Paragraph className="mt-2">
+                    {`Er du sikker på at du vil slette organisasjonen 
+                    "${organization.name}"?`}
+                </Paragraph>
                 <Paragraph>
-                    Skriv inn navnet på organisasjonen for å bekrefte.
+                    Organisasjonen vil være borte for godt og ikke mulig å finne
+                    tilbake til for andre medlemmer.
                 </Paragraph>
-                <form action={action} className="flexColumn w-100 g-2">
+                <form
+                    action={action}
+                    className="flexColumn w-100 g-2"
+                    aria-live="polite"
+                    aria-relevant="all"
+                >
                     <HiddenInput id="oname" value={organization.name} />
                     <HiddenInput id="oid" value={organization.id} />
                     <TextField
                         name="name"
                         label="Organisasjonsnavn"
                         type="text"
                         required
+                        aria-required
                         className="w-100"
                         {...getFormFeedbackForField('name', state)}
                     />
+                    <Label className="weight500 textLeft">
+                        Bekreft ved å skrive inn navnet på organisasjonen
+                    </Label>
                     <FormError {...getFormFeedbackForField('general', state)} />
-                    <SubmitButton variant="primary" width="fluid">
-                        Ja, slett!
+                    <SubmitButton
+                        variant="primary"
+                        width="fluid"
+                        aria-label="Slett organisasjon"
+                    >
+                        Ja, slett organisasjon
                     </SubmitButton>
                 </form>
             </Modal>

next-tavla/app/(admin)/utils.ts

@@ -131,7 +131,7 @@ export function getFormFeedbackForError(e?: TError): TFormFeedback {
         case 'organization/name-mismatch':
             return {
                 form_type: 'name',
-                feedback: 'Navnet på organizasjonen stemmer ikke',
+                feedback: 'Navnet på organisasjonen stemmer ikke',
                 variant: 'error',
             }
         case 'file/size-too-big': {