fix: accessible feature lists

sites/public/src/components/listing/ListingViewSeeds.module.scss

@@ -11,7 +11,8 @@
   --subheading-margin: var(--seeds-s1);
   --subheading-margin-sm: var(--seeds-spacer-header);
 
-  &, p {
+  &,
+  p {
     overflow-wrap: anywhere;
   }
 }
@@ -134,3 +135,16 @@
 .link-no-gap {
   --link-interior-gap: 0;
 }
+
+.two-column-list {
+  columns: 2;
+  column-gap: var(--seeds-spacer-section);
+  @media (--md-down) {
+    columns: 1;
+  }
+}
+
+.list-item {
+  list-style: disc;
+  margin-inline-start: var(--seeds-s5);
+}

sites/public/src/components/listing/ListingViewSeedsHelpers.tsx

@@ -34,6 +34,7 @@ import { CardList, ContentCardProps } from "../../patterns/CardList"
 import { OrderedCardList } from "../../patterns/OrderedCardList"
 import { ReadMore } from "../../patterns/ReadMore"
 import { DateSectionFlyer } from "./listing_sections/DateSection"
+import styles from "./ListingViewSeeds.module.scss"
 
 export const getFilteredMultiselectQuestions = (
   multiselectQuestions: ListingMultiselectQuestion[],
@@ -140,15 +141,24 @@ export const getAccessibilityFeatures = (listing: Listing) => {
   const enabledFeatures = Object.entries(listing?.listingFeatures ?? {})
     .filter(([_, value]) => value)
     .map((item) => item[0])
+  const COLUMN_BREAKPOINT = 6
   if (enabledFeatures.length > 0) {
-    return enabledFeatures.map((feature, index) => {
-      return `${t(`eligibility.accessibility.${feature}`)}${
-        index < enabledFeatures.length - 1 ? ", " : ""
-      }`
-    })
+    return (
+      <ul className={enabledFeatures.length > COLUMN_BREAKPOINT ? styles["two-column-list"] : ""}>
+        {enabledFeatures
+          .sort((a, b) =>
+            t(`eligibility.accessibility.${a}`).localeCompare(t(`eligibility.accessibility.${b}`))
+          )
+          .map((feature, index) => (
+            <li key={index} className={styles["list-item"]}>
+              {t(`eligibility.accessibility.${feature}`)}
+            </li>
+          ))}
+      </ul>
+    )
   }
 
-  return []
+  return null
 }
 
 export const getUtilitiesIncluded = (listing: Listing) => {
@@ -194,8 +204,11 @@ export const getFeatures = (
   const enableAccessibilityFeatures = jurisdiction?.featureFlags?.some(
     (flag) => flag.name === "enableAccessibilityFeatures" && flag.active
   )
-  if (!!accessibilityFeatures.length && enableAccessibilityFeatures) {
-    features.push({ heading: t("t.accessibility"), subheading: accessibilityFeatures })
+  if (!!accessibilityFeatures && enableAccessibilityFeatures) {
+    features.push({
+      heading: t("t.accessibility"),
+      content: accessibilityFeatures,
+    })
   }
   if (listing.accessibility) {
     features.push({ heading: t("t.additionalAccessibility"), subheading: listing.accessibility })

sites/public/src/components/listing/listing_sections/Features.tsx

@@ -8,7 +8,8 @@ type FeaturesProps = {
   children: React.ReactNode
   features: {
     heading: string
-    subheading: string
+    subheading?: string
+    content?: React.ReactNode
   }[]
 }
 
@@ -22,13 +23,18 @@ export const Features = ({ children, features }: FeaturesProps) => {
       <div className={`${styles["mobile-inline-collapse-padding"]} seeds-m-bs-section`}>
         {features.map((feature, index) => {
           return (
-            <HeadingGroup
-              heading={feature.heading}
-              subheading={feature.subheading}
-              headingProps={{ size: "lg", priority: 3 }}
-              className={`${styles["heading-group"]} seeds-m-be-section`}
-              key={index}
-            />
+            <>
+              <HeadingGroup
+                heading={feature.heading}
+                subheading={feature.subheading}
+                headingProps={{ size: "lg", priority: 3 }}
+                className={`${styles["heading-group"]} ${
+                  !feature.content ? "seeds-m-be-section" : "seeds-m-be-label"
+                }`}
+                key={index}
+              />
+              <div className={"seeds-m-be-section"}>{feature.content}</div>
+            </>
           )
         })}
         {children}