A11ybug (#61)

* small fix * added aria-describedby property * small fix * prettified ActionButton * update fix * small fix * bumped contact card version
microsoft · Mar 9, 2023 · 38e6b8f · 38e6b8f
1 parent 7b97c13
commit 38e6b8f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-contact-card",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Contact Card in MS Office style",
   "repository": {
     "type": "git",

diff --git a/src/contactCard/Summary.tsx b/src/contactCard/Summary.tsx
@@ -54,8 +54,13 @@ function renderContactSummary(profile: IPersonaProfile, onContactDetailsClick: (
                 <span>{profile.officeLocation}</span>
                 <span>&nbsp;{profile.city}</span>
             </div>
-            <ActionButton className="more-details contact-details" onClick={() => handleContactDetailsClick(onContactDetailsClick)} aria-label={isExpanded ? 'show more button expanded' : 'show more button collapsed'} data-focus="button" aria-live="polite">
-            {isExpanded ? "expanded" : "collapsed"}
+            <ActionButton 
+                className="more-details contact-details" 
+                onClick={() => handleContactDetailsClick(onContactDetailsClick)} 
+                aria-label={isExpanded ? "show more button expanded" : "show more"} 
+                data-focus="button" 
+                aria-live="polite"
+            >
                 Show more
             </ActionButton>
         </li>

diff --git a/src/contactCard/__snapshots__/Summary.test.tsx.snap b/src/contactCard/__snapshots__/Summary.test.tsx.snap
@@ -65,13 +65,12 @@ exports[`renders Summary w/o any manager 1`] = `
         </span>
       </div>
       <CustomizedActionButton
-        aria-label="show more button collapsed"
+        aria-label="show more"
         aria-live="polite"
         className="more-details contact-details"
         data-focus="button"
         onClick={[Function]}
       >
-        collapsed
         Show more
       </CustomizedActionButton>
     </li>
@@ -152,13 +151,12 @@ exports[`renders Summary with loading manager 1`] = `
         </span>
       </div>
       <CustomizedActionButton
-        aria-label="show more button collapsed"
+        aria-label="show more"
         aria-live="polite"
         className="more-details contact-details"
         data-focus="button"
         onClick={[Function]}
       >
-        collapsed
         Show more
       </CustomizedActionButton>
     </li>
@@ -271,13 +269,12 @@ exports[`renders full Summary 1`] = `
         </span>
       </div>
       <CustomizedActionButton
-        aria-label="show more button collapsed"
+        aria-label="show more"
         aria-live="polite"
         className="more-details contact-details"
         data-focus="button"
         onClick={[Function]}
       >
-        collapsed
         Show more
       </CustomizedActionButton>
     </li>