fix: screen reader accessibility (#125)

* fix: update ErrorMessage id * fix: update aria-describedby * fix: update Field title * fix: add aria-label too expandable content and expandable section --------- Co-authored-by: Chad Brokaw <[email protected]>
bloom-housing · Sep 22, 2023 · a44c023 · a44c023
1 parent 037da15
commit a44c023
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/actions/ExpandableContent.tsx b/src/actions/ExpandableContent.tsx
@@ -10,6 +10,7 @@ type ExpandableContentProps = {
   strings: {
     readMore?: string
     readLess?: string
+    buttonAriaLabel?: string
   }
   className?: string
   order?: Order
@@ -34,6 +35,7 @@ const ExpandableContent = ({
         onClick={() => {
           setExpanded(!isExpanded)
         }}
+        aria-label={strings.buttonAriaLabel}
       >
         {isExpanded ? strings.readLess : strings.readMore}
       </button>

diff --git a/src/forms/Field.tsx b/src/forms/Field.tsx
@@ -161,14 +161,15 @@ const Field = (props: FieldProps) => {
       <div className={controlClasses.join(" ")}>
         {props.prepend && <span className="prepend">{props.prepend}</span>}
         <input
-          aria-describedby={props.describedBy ? props.describedBy : `${idOrName}`}
+          aria-describedby={props.describedBy ? props.describedBy : `${idOrName}-error`}
           aria-invalid={!!props.error || false}
           aria-label={props.ariaLabel}
           className="input"
           type={type}
           id={idOrName}
           name={props.name}
           defaultValue={props.defaultValue}
+          title={props.placeholder ? props.placeholder : idOrName}
           placeholder={props.placeholder}
           ref={props.register && props.register(props.validation)}
           disabled={props.disabled}

diff --git a/src/page_components/listing/listing_sidebar/ExpandableSection.tsx b/src/page_components/listing/listing_sidebar/ExpandableSection.tsx
@@ -10,6 +10,7 @@ export interface ExpandableSectionProps {
     title: string
     readMore?: string
     readLess?: string
+    buttonAriaLabel?: string
   }
 }
 
@@ -36,7 +37,13 @@ const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSe
         {getTextContent(content)}
         {expandableContent && (
           <div className={"mt-2"}>
-            <ExpandableContent strings={{ readMore: strings.readMore, readLess: strings.readLess }}>
+            <ExpandableContent
+              strings={{
+                readMore: strings.readMore,
+                readLess: strings.readLess,
+                buttonAriaLabel: strings.buttonAriaLabel,
+              }}
+            >
               {getTextContent(expandableContent)}
             </ExpandableContent>
           </div>