fix: a11y

doorway-ui-components/src/page_components/listing/ListingCard.tsx

@@ -254,6 +254,7 @@ const ListingCard = (props: ListingCardProps) => {
       className={`listings-row ${componentIsClickable ? "cursor-pointer" : ""}`}
       data-testid={"listing-card-component"}
       onClick={componentIsClickable ? simulateLinkClick : undefined}
+      aria-label={`${contentProps?.contentHeader?.content} listing`}
     >
       <div className="listings-row_figure">
         <ImageCard {...imageCardProps} />

shared-helpers/src/locales/es.json

@@ -1247,6 +1247,8 @@
   "t.lastUpdated": "Última actualización",
   "t.less": "Menos",
   "t.letter": "Carta",
+  "t.listingsList": "Lista de listados",
+  "t.listingsMap": "Mapa de listados",
   "t.loading": "Cargando",
   "t.loginIsRequired": "Es necesario iniciar sesión para poder ver esta página.",
   "t.mapControls": "Controles del mapa",

shared-helpers/src/locales/general.json

@@ -1200,6 +1200,8 @@
   "t.lastUpdated": "Last Updated",
   "t.less": "Less",
   "t.letter": "Letter",
+  "t.listingsList": "Listings list",
+  "t.listingsMap": "Listings map",
   "t.loading": "Loading",
   "t.loginIsRequired": "Login is required to view this page.",
   "t.mapControls": "Map Controls",

shared-helpers/src/locales/tl.json

@@ -1212,6 +1212,8 @@
   "t.lastUpdated": "Huling Binago",
   "t.less": "Mas kaunti",
   "t.letter": "Liham",
+  "t.listingsList": "Listahan ng mga listahan",
+  "t.listingsMap": "Mapa ng mga listahan",
   "t.loading": "Naglo-load",
   "t.loginIsRequired": "Kailangang mag-log in para makita ang page na ito.",
   "t.mapControls": "Mga Kontrol sa Mapa",

shared-helpers/src/locales/vi.json

@@ -1250,6 +1250,8 @@
   "t.lastUpdated": "Cập nhật lần trước",
   "t.less": "Ít hơn",
   "t.letter": "Thư",
+  "t.listingsList": "Danh sách niêm yết",
+  "t.listingsMap": "Bản đồ niêm yết",
   "t.loading": "Đang tải",
   "t.loginIsRequired": "Yêu cầu đăng nhập để xem trang này.",
   "t.mapControls": "Kiểm soát bản đồ",

shared-helpers/src/locales/zh.json

@@ -1250,6 +1250,8 @@
   "t.lastUpdated": "最近一次更新",
   "t.less": "以下",
   "t.letter": "信件",
+  "t.listingsList": "房源列表",
+  "t.listingsMap": "房源地圖",
   "t.loading": "加载中",
   "t.loginIsRequired": "必須登入才能瀏覽本頁。",
   "t.mapControls": "地图控件",

sites/public/src/components/listings/ListingsList.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { Listing } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import { Heading } from "@bloom-housing/ui-seeds"
 import { ZeroListingsItem } from "@bloom-housing/doorway-ui-components"
 import { LoadingOverlay, t, InfoCard, LinkButton } from "@bloom-housing/ui-components"
 import { getListings } from "../../lib/helpers"
@@ -17,6 +18,9 @@ type ListingsListProps = {
 const ListingsList = (props: ListingsListProps) => {
   const listingsDiv = (
     <div id="listingsList">
+      <Heading className={"sr-only"} priority={2}>
+        {t("t.listingsList")}
+      </Heading>
       {props.listings.length > 0 || props.loading ? (
         <div className="listingsList">{getListings(props.listings)}</div>
       ) : (
@@ -79,11 +83,11 @@ const ListingsList = (props: ListingsListProps) => {
       <></>
     )
   return (
-    <div className={styles["listings-list-wrapper"]}>
+    <section className={styles["listings-list-wrapper"]} aria-label="Listings list">
       <LoadingOverlay isLoading={props.loading}>{listingsDiv}</LoadingOverlay>
       {pagination}
       {infoCards}
-    </div>
+    </section>
   )
 }
 export { ListingsList as default, ListingsList }

sites/public/src/components/listings/ListingsMap.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { APIProvider, Map } from "@vis.gl/react-google-maps"
 import { useJsApiLoader } from "@react-google-maps/api"
+import { Heading } from "@bloom-housing/ui-seeds"
 import { t } from "@bloom-housing/ui-components"
 import { ListingMapMarker } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import { MapControl } from "../shared/MapControl"
@@ -73,6 +74,9 @@ const ListingsMap = (props: ListingsMapProps) => {
       <a className={styles["listings-map-skip-link"]} href={`#listingsList`}>
         {t("t.skipMapOfListings")}
       </a>
+      <Heading className={"sr-only"} priority={2}>
+        {t("t.listingsMap")}
+      </Heading>
       <APIProvider apiKey={props.googleMapsApiKey}>
         <Map
           mapId={props.googleMapsMapId}

sites/public/src/components/listings/Pagination.tsx

@@ -109,11 +109,13 @@ export function Pagination(props: PaginationProps) {
   }
 
   return (
-    <ButtonGroup
-      spacing={ButtonGroupSpacing.even}
-      pagination={true}
-      columns={buttonColumns}
-      className={"pagination-button-group"}
-    />
+    <section aria-label={"Listings list pagination"}>
+      <ButtonGroup
+        spacing={ButtonGroupSpacing.even}
+        pagination={true}
+        columns={buttonColumns}
+        className={"pagination-button-group"}
+      />
+    </section>
   )
 }

sites/public/src/lib/helpers.tsx

@@ -167,6 +167,7 @@ export const getListingCard = (listing: Listing, index: number) => {
           content: listing.name,
           href: uri,
           makeCardClickable: true,
+          priority: 3,
         },
         contentSubheader: { content: getListingCardSubtitle(listing.listingsBuildingAddress) },
       }}

sites/public/src/pages/listings.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import Head from "next/head"
+import { Heading } from "@bloom-housing/ui-seeds"
 import { t } from "@bloom-housing/ui-components"
 import { MetaTags } from "../components/shared/MetaTags"
 import ListingsSearchCombined, {
@@ -37,6 +38,9 @@ export default function ListingsPage(props: ListingsProps) {
       </Head>
 
       <MetaTags title={t("nav.siteTitle")} image={metaImage} description={metaDescription} />
+      <Heading className={"sr-only"} priority={1}>
+        {t("nav.listings")}
+      </Heading>
       <ListingsSearchCombined
         googleMapsApiKey={props.googleMapsApiKey}
         googleMapsMapId={props.googleMapsMapId}

yarn.lock

@@ -14627,20 +14627,20 @@ rfdc@^1.3.0:
   resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
-[email protected], rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 [email protected]:
   version "2.78.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"