docs: fix dynamic group story accessibility concerns (#3139)

Co-authored-by: Nickii Miaro <[email protected]>

Author: gavinbarron

stories/components/peoplePicker/peoplePicker.properties.stories.js

@@ -80,134 +80,75 @@ export const disableSuggestions = () => html`
 `;
 
 export const dynamicGroupId = () => html`
-  <mgt-people-picker id="picker"></mgt-people-picker>
-  <div>
-    <p class="notes">Pick a group:</p>
-    <div class="groups">
-      <button aria-label="Select a group" id="showHideGroups">Select a group</button>
-      <ul id="groupChooser"></ul>
-    </div>
-    <p class="notes">People chosen:</p>
-    <div id="chosenPeople"></div>
-  </div>
-
-  <style>
-    body {
-      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
-        'Helvetica Neue', sans-serif;
-    }
-
-    .notes {
-      font-size: 12px;
-      margin-bottom: 2px;
-    }
-    .groups {
-      max-width: 200px;
-    }
+<div class="groups">
+  <label class="notes">Pick a group:
+    <select id="groupChooser">
+        <option></option>
+    </select>
+  </label>
+</div>
+<mgt-people-picker id="picker"></mgt-people-picker>
 
-    #showHideGroups {
-      background-color: #287ab1;
-      color: white;
-      padding: 8px;
-      font-size: 16px;
-      border: none;
-      cursor: pointer;
-      width: 100%;
-    }
 
-    #showHideGroups:hover, #showHideGroups:focus{
-      background-color: #4488EC;
-    }
+<style>
+  .notes {
+    font-size: 12px;
+  }
+
+  .groups {
+    max-width: 200px;
+    margin-bottom: 16px;
+  }
+
+  #groupChooser {
+    position: inherit;
+    width: 100%;
+    max-height: 300px;
+    overflow: scroll;
+    padding-left: 3px;
+  }
+</style>
+<script type="module">
+import { Providers, ProviderState } from '@microsoft/mgt-element';
+
+let picker = document.getElementById('picker');
+let groupChooser = document.getElementById('groupChooser');
+
+
+loadGroups();
+Providers.onProviderUpdated(loadGroups);
+
+function loadGroups() {
+  let provider = Providers.globalProvider;
+  if(provider && provider.state === ProviderState.SignedIn) {
+    let client = provider.graph.client;
+
+    client
+      .api('/groups')
+      .get()
+      .then(groups => {
+        for(let group of groups.value) {
+          const id = group.id;
+          let option = document.createElement('option');
+          option.setAttribute("value", id);
+          option.innerText = group.displayName;
+          groupChooser.appendChild(option);
+        }
+      });
+  }
+}
 
-    #groupChooser {
-      display: none;
-      position: inherit;
-      background-color: #f1f1f1;
-      width: 100%;
-      box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
-      max-height: 300px;
-      overflow: scroll;
-      padding-left: 3px;
-    }
-    ul{
-      margin: 0px;
-      display: inherit;
-    }
-    ul > li {
-      color: black;
-      text-decoration: none;
-      display: block;
-      border-bottom: 1px solid;
-      font-size: 12px;
-      cursor: pointer;
-    }
-    ul > li:hover, ul > li:focus {
-      background-color: lightgray;
-    }
-  </style>
-  <script type="module">
-    import { Providers, ProviderState } from '@microsoft/mgt-element';
-
-    let picker = document.getElementById('picker');
-    let chosenArea = document.getElementById('chosenPeople');
-    let groupChooser = document.getElementById('groupChooser');
-    let button = document.getElementById('showHideGroups');
-    button.addEventListener("click", showHideGroups);
-
-    loadGroups();
-    Providers.onProviderUpdated(loadGroups);
-
-    function showHideGroups(){
-      const display = groupChooser.style.display;
-      if (display === "none"|| display === "") {
-          groupChooser.style.display = "inline-block";
-      } else {
-          groupChooser.style.display = "none";
-      }
-    }
-    function loadGroups() {
-      let provider = Providers.globalProvider;
-      if (provider && provider.state === ProviderState.SignedIn) {
-        let client = provider.graph.client;
-
-        client
-          .api('/groups')
-          .get()
-          .then(groups => {
-            for (let group of groups.value) {
-              const id = group.id;
-              let option = document.createElement('li');
-              option.setAttribute("value", id);
-              option.innerText = group.displayName;
-              option.onclick = function(event){
-                const id = event.target.getAttribute("value");
-                const displayName = event.target.innerText.trim();
-                button.innerText = displayName;
-                setGroupValue(id);
-                showHideGroups();
-              }
-
-              groupChooser.appendChild(option);
-            }
-          });
-      }
-    }
+function setGroupValue(selected) {
+  picker.setAttribute('group-id', selected);
+}
 
-    picker.addEventListener('selectionChanged', function(e) {
-      //reset area
-      chosenArea.innerHTML = '';
-      //render selected people to chosen people div
-      for (var i = 0; i < e.detail.length; i++) {
-        let newElem = document.createElement('div');
-        newElem.innerHTML = e.detail[i].displayName + ' ' + e.detail[i].id;
-        chosenArea.append(newElem);
-      }
-    });
-
-    function setGroupValue(selected) {
-      picker.setAttribute('group-id', selected);
-    }
-  </script>
+groupChooser.addEventListener('change', function(e) {
+  const selection = e.target.value;
+  if (selection !== -1) {
+      setGroupValue(selection);
+  }
+});
+</script>
 `;
 
 export const pickPeopleAndGroups = () => html`