fix: add aria label to table (#1585)

* fix: add aria label to table * fix: add aria labels to detail tables * fix: unit labeling on detailed page * fix: add aria-label to grouped table
CityOfDetroit · Mar 23, 2023 · a4744fe · a4744fe
1 parent 3426a5f
commit a4744fe
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/detroit-ui-components/src/locales/general.json b/detroit-ui-components/src/locales/general.json
@@ -1406,6 +1406,7 @@
   "t.units": "units",
   "t.unitAmenities": "Unit Amenities",
   "t.unitFeatures": "Unit Features",
+  "t.unitInformation": "Unit Information",
   "t.unitType": "Unit Type",
   "t.url": "URL",
   "t.view": "View",

diff --git a/detroit-ui-components/src/tables/GroupedTable.tsx b/detroit-ui-components/src/tables/GroupedTable.tsx
@@ -80,7 +80,7 @@ export const GroupedTable = (props: GroupedTableProps) => {
 
   return (
     <div style={{ overflowX: "auto" }}>
-      <table className={tableClasses.join(" ")}>
+      <table aria-label={props.ariaLabel} className={tableClasses.join(" ")}>
         <thead>
           <tr>{headerLabels}</tr>
         </thead>

diff --git a/detroit-ui-components/src/tables/StandardTable.tsx b/detroit-ui-components/src/tables/StandardTable.tsx
@@ -73,6 +73,8 @@ export interface StandardTableProps {
   translateData?: boolean
   /** An id applied to the table */
   id?: string
+  /** An accessible label applied to the table */
+  ariaLabel?: string
 }
 
 const headerName = (header: string | TableHeadersOptions) => {
@@ -221,7 +223,7 @@ export const StandardTable = (props: StandardTableProps) => {
 
   return (
     <div style={{ overflowX: "auto" }}>
-      <table id={props.id} className={tableClasses.join(" ")}>
+      <table id={props.id} aria-label={props.ariaLabel} className={tableClasses.join(" ")}>
         <thead>
           <tr>{headerLabels}</tr>
         </thead>

diff --git a/sites/public/src/components/listing/ListingView.tsx b/sites/public/src/components/listing/ListingView.tsx
@@ -539,6 +539,7 @@ export const ListingView = (props: ListingProps) => {
                 headers={groupedUnitHeaders}
                 data={[{ data: groupedUnitData }]}
                 responsiveCollapse={true}
+                ariaLabel={t("t.unitInformation")}
               />
               {listing?.section8Acceptance && (
                 <div className="text-sm leading-5 mt-4 invisible md:visible">
@@ -605,7 +606,12 @@ export const ListingView = (props: ListingProps) => {
                         )}
                       </hgroup>
                     </header>
-                    <StandardTable headers={hmiHeaders} data={hmiData} responsiveCollapse={false} />
+                    <StandardTable
+                      headers={hmiHeaders}
+                      data={hmiData}
+                      responsiveCollapse={false}
+                      ariaLabel={t("listings.householdMaximumIncome")}
+                    />
                   </li>
                 )}
                 {occupancyData.length > 0 && (
@@ -617,6 +623,7 @@ export const ListingView = (props: ListingProps) => {
                       headers={occupancyHeaders}
                       data={occupancyData}
                       responsiveCollapse={false}
+                      ariaLabel={t("t.occupancy")}
                     />
                   </ListSection>
                 )}

diff --git a/sites/public/src/lib/helpers.tsx b/sites/public/src/lib/helpers.tsx
@@ -240,6 +240,8 @@ export const getListings = (listings) => {
         data: getUnitGroupSummary(listing).data,
         responsiveCollapse: true,
         cellClassName: "px-5 py-3",
+        id: listing.name,
+        ariaLabel: `${listing.name} ${t("t.unitInformation")}`,
       }}
       contentProps={{
         contentHeader: { text: listing.name, priority: 3 },