fix: add aria-label text string for teams chevrons (#3129)

microsoftgraph · Mar 27, 2024 · bc1fedf · bc1fedf
1 parent 81826d9
commit bc1fedf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
@@ -452,7 +452,11 @@ export class MgtTeamsChannelPicker extends MgtTemplatedTaskComponent {
    */
   protected renderDownChevron() {
     return html`
-      <fluent-button appearance="stealth" class="down-chevron" @click=${this.gainedFocus}>
+      <fluent-button
+        aria-label=${this.strings.downChevronButtonAriaLabel}
+        appearance="stealth"
+        class="down-chevron"
+        @click=${this.gainedFocus}>
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M2.21967 4.46967C2.51256 4.17678 2.98744 4.17678 3.28033 4.46967L6 7.18934L8.71967 4.46967C9.01256 4.17678 9.48744 4.17678 9.78033 4.46967C10.0732 4.76256 10.0732 5.23744 9.78033 5.53033L6.53033 8.78033C6.23744 9.07322 5.76256 9.07322 5.46967 8.78033L2.21967 5.53033C1.92678 5.23744 1.92678 4.76256 2.21967 4.46967Z" fill="#212121" />
         </svg>
@@ -468,7 +472,12 @@ export class MgtTeamsChannelPicker extends MgtTemplatedTaskComponent {
    */
   protected renderUpChevron() {
     return html`
-      <fluent-button appearance="stealth" style="display:none" class="up-chevron" @click=${this.handleUpChevronClick}>
+      <fluent-button
+        aria-label=${this.strings.upChevronButtonAriaLabel}
+        appearance="stealth"
+        style="display:none"
+        class="up-chevron"
+        @click=${this.handleUpChevronClick}>
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M2.21967 7.53033C2.51256 7.82322 2.98744 7.82322 3.28033 7.53033L6 4.81066L8.71967 7.53033C9.01256 7.82322 9.48744 7.82322 9.78033 7.53033C10.0732 7.23744 10.0732 6.76256 9.78033 6.46967L6.53033 3.21967C6.23744 2.92678 5.76256 2.92678 5.46967 3.21967L2.21967 6.46967C1.92678 6.76256 1.92678 7.23744 2.21967 7.53033Z" fill="#212121" />
         </svg>

diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/strings.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/strings.ts
@@ -18,5 +18,7 @@ export const strings = {
   loadingMessage: 'Loading...',
   photoFor: 'Teams photo for',
   teamsChannels: 'Teams and channels results',
-  closeButtonAriaLabel: 'remove the selected channel'
+  closeButtonAriaLabel: 'remove the selected channel',
+  downChevronButtonAriaLabel: 'Teams show results button',
+  upChevronButtonAriaLabel: 'Teams hide results button'
 };