fix(a11y): aria labels and semantic html (#1798)

* fix(a11y): aria labels and semantic html * fix(a11y): correct voiceover on icons
entur · Jan 23, 2025 · f8a40c0 · f8a40c0
1 parent 4ce26cd
commit f8a40c0
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 15 deletions.
diff --git a/tavla/app/(admin)/components/Footer/index.tsx b/tavla/app/(admin)/components/Footer/index.tsx
@@ -11,18 +11,18 @@ function Footer() {
     return (
         <footer className="eds-contrast">
             <div className="container pt-16 pb-4">
-                <Image src={TavlaLogo} alt="" />
+                <Image src={TavlaLogo} alt="Entur Tavla logo" />
                 <div className="flex flex-col sm:flex-row justify-between">
                     <div>
-                        <Heading3>Entur AS</Heading3>
+                        <Heading3 as="h2">Entur AS</Heading3>
                         <Paragraph className=" items-center">
                             Rådhusgata 5, 0151 Oslo
-                            <br />
+                            <br aria-hidden />
                             Postboks 1554, 0117 Oslo
                         </Paragraph>
                         <Paragraph className="items-center">
                             Organisasjonsnummer:
-                            <br />
+                            <br aria-hidden />
                             917 422 575
                         </Paragraph>
                         <Paragraph
@@ -32,7 +32,7 @@ function Footer() {
                             <EnturLink href="https://www.entur.org/kontakt-oss/">
                                 Kontakt kundesenteret
                             </EnturLink>
-                            <ExternalIcon className="!top-0" />
+                            <ExternalIcon aria-hidden className="!top-0" />
                         </Paragraph>
                         <Paragraph className="items-center flex flex-row gap-1">
                             <EnturLink
@@ -46,7 +46,7 @@ function Footer() {
                             >
                                 Kontakt Tavla
                             </EnturLink>
-                            <ExternalIcon className="!top-0" />
+                            <ExternalIcon aria-hidden className="!top-0" />
                         </Paragraph>
                     </div>
                     <div className="flex flex-col gap-4">

diff --git a/tavla/app/(admin)/components/TileSelector/index.tsx b/tavla/app/(admin)/components/TileSelector/index.tsx
@@ -66,7 +66,7 @@ function TileSelector({
                     items={counties}
                     selectedItems={selectedCounties}
                     onChange={setSelectedCounties}
-                    prepend={<SearchIcon />}
+                    prepend={<SearchIcon aria-hidden />}
                     maxChips={2}
                     hideSelectAll
                 />
@@ -77,7 +77,7 @@ function TileSelector({
                     items={stopPlaceItems}
                     label="Stoppested"
                     clearable
-                    prepend={<SearchIcon />}
+                    prepend={<SearchIcon aria-hidden />}
                     selectedItem={selectedStopPlace}
                     onChange={setSelectedStopPlace}
                     debounceTimeout={150}
@@ -90,7 +90,7 @@ function TileSelector({
                     items={quays}
                     label="Plattform/retning"
                     clearable
-                    prepend={<SearchIcon />}
+                    prepend={<SearchIcon aria-hidden />}
                     selectedItem={selectedQuay}
                     onChange={setSelectedQuay}
                     disabled={!selectedStopPlace}

diff --git a/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx b/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx
@@ -48,7 +48,11 @@ function Footer({
                     placement="top"
                     id="tooltip-footer"
                 >
-                    <ValidationInfoFilledIcon className="mb-3" size={20} />
+                    <ValidationInfoFilledIcon
+                        className="mb-3"
+                        size={20}
+                        aria-labelledby="tooltip-footer"
+                    />
                 </Tooltip>
             </div>
             <div className="h-full">

diff --git a/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx b/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx
@@ -45,6 +45,7 @@ function Address({ bid, location }: { bid: TBoardID; location?: TLocation }) {
                     <ValidationInfoFilledIcon
                         className="md:mb-2 mb-3"
                         size={20}
+                        aria-labelledby="tooltip-address"
                     />
                 </Tooltip>
             </div>

diff --git a/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx b/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx
@@ -54,7 +54,7 @@ function DefaultColumns({
                         aria-label="Vis forklaring på kolonner"
                         onClick={() => setIsOpen(true)}
                     >
-                        <QuestionFilledIcon size={24} />
+                        <QuestionFilledIcon size={24} aria-hidden />
                     </IconButton>
                 </Tooltip>
             </div>

diff --git a/tavla/app/components/ContactForm.tsx b/tavla/app/components/ContactForm.tsx
@@ -67,7 +67,7 @@ function ContactForm() {
                     action={submit}
                     className="flex flex-col gap-4  p-4 sm:p-6 "
                 >
-                    <Paragraph as="h1" margin="none" className="font-bold">
+                    <Paragraph as="h2" margin="none" className="font-bold">
                         Vi setter stor pris på tilbakemeldinger og innspill, og
                         bistår gjerne hvis du vil ha hjelp til å komme i gang
                         med Tavla.

diff --git a/tavla/app/components/Expandable.tsx b/tavla/app/components/Expandable.tsx
@@ -20,10 +20,17 @@ function Expandable({
                 onClick={() => setIsOpen(!isOpen)}
                 className="flex justify-between items-center px-6 py-4 bg-blue80 w-full rounded-t"
             >
-                <Heading5 margin="none" className=" sm:text-base !text-lg">
+                <Heading5
+                    margin="none"
+                    className=" sm:text-base !text-lg"
+                    as="h1"
+                >
                     {title}
                 </Heading5>
-                <IconButton className="border-0!">
+                <IconButton
+                    className="border-0!"
+                    aria-label={isOpen ? 'Åpne skjema' : 'Lukk skjema'}
+                >
                     {isOpen ? <DownArrowIcon /> : <UpArrowIcon />}
                 </IconButton>
             </div>

diff --git a/tavla/src/Shared/components/TransportIcon/index.tsx b/tavla/src/Shared/components/TransportIcon/index.tsx
@@ -13,11 +13,13 @@ function TransportIcon({
     const mode = transportMode ?? 'unknown'
 
     const Component = getTransportIcon(mode, transportSubmode)
-
+    const altText =
+        mode === 'unknown' ? 'Unknown transport mode' : `${mode} transport mode`
     return (
         <Component
             className={className ?? 'w-full h-full'}
             fill={`var(--${mode}-color)`}
+            aria-label={altText}
         />
     )
 }