fix: add combobox attributes (#2538)

adds aria-expanded to teams channel picker and people picker
adds a title to the suggestions list for the people picker

Author: gavinbarron

index.html

@@ -58,8 +58,8 @@ <h2>mgt-login</h2>
       <!-- <mgt-person-card person-query="me"></mgt-person-card> -->
       <h2>mgt-people-picker</h2>
       <mgt-people-picker show-max="6"></mgt-people-picker>
-      <!-- <h2>mgt-teams-channel-picker</h2>
-      <mgt-teams-channel-picker></mgt-teams-channel-picker> -->
+      <h2>mgt-teams-channel-picker</h2>
+      <mgt-teams-channel-picker></mgt-teams-channel-picker>
       <!-- <h2>mgt-tasks</h2>
       <mgt-tasks></mgt-tasks> -->
       <!-- <h2>mgt-agenda group-by-day</h2>

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -761,6 +761,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         slot="anchor"
         id="people-picker-input"
         role="combobox"
+        aria-expanded=${this.flyout?.isOpen ?? false}
         placeholder=${placeholder}
         aria-label=${this.ariaLabel || placeholder || this.strings.selectContact}
         @click="${this.handleInputClick}"
@@ -924,6 +925,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         class="searched-people-list"
         role="listbox"
         aria-live="polite"
+        title=${this.strings.suggestionsTitle}
       >
          ${repeat(
            filteredPeople,
@@ -1262,7 +1264,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       flyout.close();
     }
     if (this.input) {
-      this.input.setAttribute('aria-expanded', 'false');
       this.input.setAttribute('aria-activedescendant', '');
     }
     this._arrowSelectionCount = -1;
@@ -1279,9 +1280,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (flyout) {
       flyout.open();
     }
-    if (this.input) {
-      this.input.setAttribute('aria-expanded', 'true');
-    }
     this._arrowSelectionCount = -1;
   }
 
@@ -1371,7 +1369,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private readonly lostFocus = () => {
     this._isFocused = false;
     if (this.input) {
-      this.input.setAttribute('aria-expanded', 'false');
       this.input.setAttribute('aria-activedescendant', '');
     }
 

packages/mgt-components/src/components/mgt-people-picker/strings.ts

@@ -9,10 +9,8 @@ export const strings = {
   inputPlaceholderText: 'Start typing a name',
   noResultsFound: "We didn't find any matches.",
   loadingMessage: 'Loading...',
-  suggestedContact: 'suggested contact',
-  suggestedContacts: 'suggested contacts',
   selected: 'selected',
-  removeSelectedItem: 'remove selected item',
   removeSelectedUser: 'Remove ',
-  selectContact: 'select a contact'
+  selectContact: 'select a contact',
+  suggestionsTitle: 'Suggested contacts'
 };

packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts

@@ -360,11 +360,13 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
             placeholder="${this._selectedItemState ? '' : this.strings.inputPlaceholderText} "
             label="teams-channel-picker-input"
             role="combobox"
+            aria-expanded="${this._isDropdownVisible}"
             @click=${this.handleInputClick}
             @keydown=${this.handleInputKeydown}
-            @keyup=${this.handleInputChanged}>
-              <div tabindex="0" slot="start" style="width: max-content;">${this.renderSelected()}</div>
-              <div tabindex="0" slot="end">${this.renderChevrons()}${this.renderCloseButton()}</div>
+            @keyup=${this.handleInputChanged}
+          >
+            <div tabindex="0" slot="start" style="width: max-content;">${this.renderSelected()}</div>
+            <div tabindex="0" slot="end">${this.renderChevrons()}${this.renderCloseButton()}</div>
           </fluent-text-field>
           <fluent-card class=${classMap(dropdownClasses)}>
             ${this.renderDropdown()}

stories/components/peoplePicker/peoplePicker.a.js

@@ -64,10 +64,14 @@ export const localization = () => html`
    LocalizationHelper.strings = {
      _components: {
        'people-picker': {
-         inputPlaceholderText: 'Search for 🤼',
-         noResultsFound: '🤷‍♀️',
-         loadingMessage: '🦔'
-       }
+          inputPlaceholderText: 'Search for 🤼',
+          noResultsFound: '🤷‍♀️',
+          loadingMessage: '🦔',
+          selected: '👉',
+          removeSelectedUser: '❌ ',
+          selectContact: 'Select 🤼',
+          suggestionsTitle: '📃 Suggested 🤼'
+        }
      }
    }
    </script>