Fix(Designer): Action card tooltip now read with screen reader (#4138)

* added aria-labelledby for searchable dropdown * PR comment * focus returns to search button * trigger tooltip works with nvda --------- Co-authored-by: Danielle Cogburn <dacogburn@microsoft.com>
Azure · Feb 6, 2024 · b93b002 · b93b002
1 parent e56a6ca
commit b93b002
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/.github/sync_config.json b/.github/sync_config.json
@@ -30,7 +30,7 @@
         "Ram-G": "ramgup@microsoft.com",
         "Aleks-gdb": "aleksd@microsoft.com",
         "rllyy97": "rileyevans@microsoft.com",
-        "refortie":"refortie@microsoft.com"
+        "refortie": "refortie@microsoft.com"
       }
     }
   }

diff --git a/.github/workflows/issue-sync.yml b/.github/workflows/issue-sync.yml
@@ -12,11 +12,11 @@ on:
       manual_trigger:
         description: 'Manual Trigger'
         required: false
-        default: "true"
+        default: 'true'
         type: choice
         options:
-          - "true"
-          - "false"
+          - 'true'
+          - 'false'
 
 concurrency:
   group: issue-${{ github.event.issue.number }}
@@ -29,10 +29,10 @@ jobs:
       issues: write
       pull-requests: write
     name: Sync workflow
-    steps:       
-    - uses: actions/checkout@v3
-    - uses: hartra344/GitSync@main
-      env:     
-        ado_token: '${{ secrets.ADO_SYNC_TOKEN }}'
-        github_token: '${{ secrets.GITHUB_TOKEN }}'
-        config_file: './.github/sync_config.json'
+    steps:
+      - uses: actions/checkout@v3
+      - uses: hartra344/GitSync@main
+        env:
+          ado_token: '${{ secrets.ADO_SYNC_TOKEN }}'
+          github_token: '${{ secrets.GITHUB_TOKEN }}'
+          config_file: './.github/sync_config.json'
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,12 @@
 # Logic Apps Designer
-## [2.111.0](https://github.com/Azure/LogicAppsUX/compare/v2.110.0...v2.111.0) (2024-02-06)
 
+## [2.111.0](https://github.com/Azure/LogicAppsUX/compare/v2.110.0...v2.111.0) (2024-02-06)
 
 ### Bug Fixes
 
-* **Designer:** Focus returns to search button after closing side panel ([#4126](https://github.com/Azure/LogicAppsUX/issues/4126)) ([95aaccf](https://github.com/Azure/LogicAppsUX/commit/95aaccfa05060a1a5660f5bf497e7df2e3055b0f))
-* **designer:** OpenAPI tokens from SharePoint trigger use `triggerOutputs` instead of `triggerBody` ([#4122](https://github.com/Azure/LogicAppsUX/issues/4122)) ([1b54d75](https://github.com/Azure/LogicAppsUX/commit/1b54d752344ca2a1a28d52e71a6ca5c4ba4140b7))
-* **vscode:** Parse interpolated connections data as JSON ([#4135](https://github.com/Azure/LogicAppsUX/issues/4135)) ([c855aee](https://github.com/Azure/LogicAppsUX/commit/c855aee8c9a657f01e43e3e34d349dd857f0f7b7))
+- **Designer:** Focus returns to search button after closing side panel ([#4126](https://github.com/Azure/LogicAppsUX/issues/4126)) ([95aaccf](https://github.com/Azure/LogicAppsUX/commit/95aaccfa05060a1a5660f5bf497e7df2e3055b0f))
+- **designer:** OpenAPI tokens from SharePoint trigger use `triggerOutputs` instead of `triggerBody` ([#4122](https://github.com/Azure/LogicAppsUX/issues/4122)) ([1b54d75](https://github.com/Azure/LogicAppsUX/commit/1b54d752344ca2a1a28d52e71a6ca5c4ba4140b7))
+- **vscode:** Parse interpolated connections data as JSON ([#4135](https://github.com/Azure/LogicAppsUX/issues/4135)) ([c855aee](https://github.com/Azure/LogicAppsUX/commit/c855aee8c9a657f01e43e3e34d349dd857f0f7b7))
 
 ## [2.110.0](https://github.com/Azure/LogicAppsUX/compare/v2.109.0...v2.110.0) (2024-02-05)
 

diff --git a/libs/designer-ui/src/lib/card/addActionCard/index.tsx b/libs/designer-ui/src/lib/card/addActionCard/index.tsx
@@ -78,10 +78,11 @@ export const AddActionCard: React.FC<AddActionCardProps> = ({ addCardType, onCli
 
   const tooltipHeading = addCardType === ADD_CARD_TYPE.TRIGGER ? triggerTooltipHeading : actionTooltipHeading;
   const tooltipBody = addCardType === ADD_CARD_TYPE.TRIGGER ? triggerTooltipBody : actionTooltipBody;
+  const tooltipId = `placeholder-node-${addCardType}`;
 
   return (
     <TooltipHost
-      id={`placeholder-node-${addCardType}`}
+      id={tooltipId}
       delay={0}
       directionalHint={DirectionalHint.rightCenter}
       calloutProps={{ gapSpace: 8 }}
@@ -96,6 +97,7 @@ export const AddActionCard: React.FC<AddActionCardProps> = ({ addCardType, onCli
     >
       <div style={{ position: 'relative' }}>
         <div
+          aria-describedby={tooltipId}
           aria-label={title}
           className={css('msla-panel-card-container', selected && 'msla-panel-card-container-selected')}
           style={getCardStyle(brandColor)}