TILA-1519 a11y fixes

Author: kieferbonk

ui/components/LoginFragment.tsx

@@ -69,7 +69,7 @@ const LoginFragment = ({
         return !profile && authEnabled ? (
           <Wrapper>
             <MediumButton
-              iconLeft={<IconSignin />}
+              iconLeft={<IconSignin aria-hidden="true" />}
               onClick={() => setShouldLogin(true)}
               aria-label={t("common:loginAlt")}
             >

ui/components/application/Stepper.tsx

@@ -150,7 +150,7 @@ const Stepper = ({ application }: Props): JSX.Element => {
                   $current={isCurrent}
                   aria-hidden="true"
                 >
-                  {isReady ? <IconCheck /> : index + 1}
+                  {isReady ? <IconCheck aria-hidden="true" /> : index + 1}
                 </Number>
                 <Name $current={isCurrent} $disabled={isDisabled}>
                   {t(`application:navigation.${page}`)}

ui/components/applicationEvent/ApplicationEvent.tsx

@@ -317,7 +317,7 @@ const ApplicationEvent = ({
         </SubHeadLine>
         <CheckboxWrapper>
           <Checkbox
-            id="defaultPeriod"
+            id={fieldName("defaultPeriod")}
             checked={selectionIsDefaultPeriod}
             label={`${t("application:Page1.defaultPeriodPrefix")} ${formatDate(
               applicationRound.reservationPeriodBegin

ui/components/form/Sorting.tsx

@@ -81,7 +81,7 @@ const Sorting = ({
             />
           )}
         </OrderBtn>
-        <label htmlFor="search-form__button--sorting">
+        <label htmlFor="search-form__button--sorting-toggle-button">
           {t("searchResultList:sortButtonLabel")}:
         </label>
       </LeftBlock>

ui/components/index/ApplicationRoundCard.tsx

@@ -43,7 +43,7 @@ const StyledContainer = styled(Container)`
   max-width: 100%;
 `;
 
-const Name = styled(H4)`
+const Name = styled(H4).attrs({ as: "h3" })`
   margin-top: 0;
   margin-bottom: var(--spacing-2-xs);
 `;
@@ -111,7 +111,7 @@ const ApplicationRoundCard = ({ applicationRound }: Props): JSX.Element => {
         {state !== "past" && (
           <Link href={`/criteria/${applicationRound.pk}`} passHref>
             <StyledLink>
-              <IconArrowRight />
+              <IconArrowRight aria-hidden="true" />
               {t("applicationRound:card.criteria")}
             </StyledLink>
           </Link>

ui/components/reservation-unit/Address.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
   margin-bottom: var(--spacing-layout-l);
 `;
 
-const Name = styled(H4)`
+const Name = styled(H4).attrs({ as: "h3" })`
   margin-top: 0;
 `;
 

ui/components/reservation-unit/Head.tsx

@@ -158,12 +158,10 @@ const Head = ({
       <BreadcrumbWrapper
         route={[
           viewType === "recurring" ? "/recurring" : "",
-          `/${searchUrlWithParams}`,
+          searchUrlWithParams,
           "reservationUnit",
         ]}
-        aliases={[
-          { slug: `/${searchUrlWithParams}`, title: t("breadcrumb:search") },
-        ]}
+        aliases={[{ slug: searchUrlWithParams, title: t("breadcrumb:search") }]}
       />
       <TopContainer>
         <Container>

ui/cypress/integration/recurring-lander.ts

@@ -19,7 +19,7 @@ describe("recurring search lander", () => {
       .find("button")
       .should("contain.text", "Täytä hakemus");
     applicationRoundContainer("active")
-      .children("h3")
+      .children("h2")
       .should("contain.text", "Käynnissä olevat haut");
 
     applicationRoundContainer("pending")
@@ -28,7 +28,7 @@ describe("recurring search lander", () => {
       .find("button")
       .should("not.exist");
     applicationRoundContainer("pending")
-      .children("h3")
+      .children("h2")
       .should("contain.text", "Tulevat haut");
 
     applicationRoundContainer("past")
@@ -37,7 +37,7 @@ describe("recurring search lander", () => {
       .find("button")
       .should("not.exist");
     applicationRoundContainer("past")
-      .children("h3")
+      .children("h2")
       .should("contain.text", "Päättyneet haut");
 
     cy.checkA11y(null, null, null, true);

ui/cypress/integration/reservation-unit.ts

@@ -25,6 +25,8 @@ describe("Tilavaraus ui reservation unit page (recurring)", () => {
     addressContainer(1).should("contain", "Avaa kartta uuteen ikkunaan");
     addressContainer(1).should("contain", "Google reittiohjeet");
     addressContainer(1).should("contain", "HSL Reittiopas");
+
+    cy.injectAxe();
   });
 
   describe("without equipment", () => {

ui/pages/intro.tsx

@@ -39,6 +39,10 @@ const Container = styled.div`
   display: grid;
   grid-template-columns: 1fr 382px;
 
+  #applicationRoundSelect-label {
+    display: none;
+  }
+
   @media (max-width: ${breakpoint.l}) {
     grid-template-columns: 1fr;
   }
@@ -104,7 +108,7 @@ const Intro = (): JSX.Element => {
                 id="applicationRoundSelect"
                 placeholder={t("common:select")}
                 options={applicationRounds as OptionType[]}
-                label=""
+                label={t("common:select")}
                 onChange={(selection: OptionType): void => {
                   setApplicationRound(selection.value as number);
                 }}