chore: Update branch with latest issue3193-aria-actions-listbox changes and submodule updates

Author: w3cgruntbot

ARIA/apg/patterns/listbox/examples/listbox-actions.md

@@ -130,7 +130,6 @@ lang: en
         <h2 id="ex_label">Example</h2>
       </div>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-      <div class="offscreen">Last change: <span aria-live="polite" id="ss_live_region"></span></div>
       <div id="ex">
         <p>
           Plan your bucket list: Select an item to view or edit its details. Flag it for follow up if you need to do
@@ -217,22 +216,13 @@ lang: en
 
           <div class="contentColumn">
             <div class="listbox-area">
-              <h3>Details:</h3>
-              <div id="ss_elem_IronMan_detail_panel" class="js-detailPanel detailPanel is-hidden">
-                Iron Man content goes here.
-              </div>
-              <div id="ss_elem_Everest_detail_panel" class="js-detailPanel detailPanel is-hidden">
-                Climbing Mount Everest content goes here.
-              </div>
-              <div id="ss_elem_Archery_detail_panel" class="js-detailPanel detailPanel is-hidden">
-                Archery content goes here.
-              </div>
-              <div id="ss_elem_GuideDog_detail_panel" class="js-detailPanel detailPanel is-hidden">
-                Gide dog training content goes here.
-              </div>
-              <div id="ss_elem_Airplane_detail_panel" class="js-detailPanel detailPanel is-hidden">
-                Airplane Building content goes here.
-              </div>
+              <h3 id="listboxDetailsLabel">Details:</h3>
+              <textarea aria-labelledby="listboxDetailsLabel" readonly id="ss_elem_IronMan_detail_panel" class="js-detailPanel detailPanel is-hidden">Iron Man content goes here.</textarea>
+              <textarea aria-labelledby="listboxDetailsLabel" readonly id="ss_elem_Everest_detail_panel" class="js-detailPanel detailPanel is-hidden">Climbing Mount Everest content goes here.</textarea>
+              <textarea aria-labelledby="listboxDetailsLabel" readonly id="ss_elem_Archery_detail_panel" class="js-detailPanel detailPanel is-hidden">Archery content goes here.</textarea>
+              <textarea aria-labelledby="listboxDetailsLabel" readonly id="ss_elem_GuideDog_detail_panel" class="js-detailPanel detailPanel is-hidden">Gide dog training content goes here.</textarea>
+              <textarea aria-labelledby="listboxDetailsLabel" readonly id="ss_elem_Airplane_detail_panel" class="js-detailPanel detailPanel is-hidden">Airplane Building content goes here.
+              </textarea>
             </div>
           </div>
         </div>

_external/aria-practices

@@ -47,11 +47,12 @@ li {
 }
 
 .detailPanel {
-    margin: 1em 0 0;
-    padding: 7px 0 0 10px;
     min-height: 18em;
     border: 1px solid #aaa;
     background: white;
+    height: 100%;
+    width: 95%;
+    margin-top: .15em
 }
 
 .detailPanel.is-hidden {
@@ -167,7 +168,7 @@ button.delete::before  {
     white-space: pre;
 }
 
-.focusedActionButton {
+#ss_elem_list:focus button.focusedActionButton {
     color: black !important;
     background-color: rgb(226 239 225) !important;
     border-color: rgb(0 90 156);

content-assets/wai-aria-practices/patterns/listbox/examples/css/listbox-actions.css

@@ -24,19 +24,24 @@ var aria = aria || {};
 aria.ListboxActions = class ListboxActions {
   constructor(listboxActionsObject) {
     this.listboxActionsNode = listboxActionsObject;
+    this.listboxCurrentItemActionsButtons = [];
     this.activeDescendant = this.listboxActionsNode.getAttribute(
       'aria-activedescendant'
     );
     this.listboxOptionArray = Array.from(
       this.listboxActionsNode.querySelectorAll('[role="option"]')
     );
-    this.listboxItemCurrent = null;
+    this.selectItem(this.listboxOptionArray[0]);
+    this.listboxItemCurrent = this.listboxOptionArray[0];
+    this.populateCurrentItemActionButtons ()
     this.listboxActiveOption = null;
     this.activeDescendant = null;
-    this.listboxCurrentItemActionsButtons = [];
     this.listboxCurrentOptionIndex = -1;
     this.listboxItemsWithAriaActionsArray = [];
     this.registerActionsEvents();
+    this.useAriaNotify = document.ariaNotify;
+    this.setupNotifications();
+    this.ariaLiveRegion;
   }
 
   registerActionsEvents() {
@@ -58,6 +63,25 @@ aria.ListboxActions = class ListboxActions {
       );
     }
   }
+  setupNotifications () {
+    if (!this.useAriaNotify) {
+      this.ariaLiveRegion = document.createElement('div');
+      this.ariaLiveRegion.ariaLive = 'assertive';
+      this.ariaLiveRegion.classList.add("offscreen");
+      document.querySelector('main').appendChild(this.ariaLiveRegion);
+    }
+  }
+  removeNotificationViaTimeout(ariaLiveRegion) {
+    ariaLiveRegion.innerText = '';
+  }
+  doNotification (notificationText){
+    if (this.useAriaNotify) {
+      document.ariaNotify(notificationText);
+    } else {
+      this.ariaLiveRegion.innerText = notificationText;
+      setTimeout(this.removeNotificationViaTimeout, 2000, this.ariaLiveRegion);
+    }
+  }
   handleItemChange (event, item) {
     var updateText = '';
     switch (event) {
@@ -81,8 +105,7 @@ aria.ListboxActions = class ListboxActions {
         break;
     }
     if (updateText) {
-      var ex1LiveRegion = document.getElementById('ss_live_region');
-      ex1LiveRegion.innerHTML = updateText;
+      this.doNotification (updateText);
     }
   }
   /* Return the next listbox option, if it exists; otherwise, returns null */
@@ -119,8 +142,6 @@ aria.ListboxActions = class ListboxActions {
    *  Remove all of the selected items from the listbox; Removes the focused items
    *  in a single select listbox and the items with aria-selected in a multi
    *  select listbox.
-   * @returns {Array}
-   *  An array of items that were removed from the listbox
    */
   deleteItems() {
     let itemToDelete = document.getElementById(this.activeDescendant);
@@ -182,6 +203,17 @@ aria.ListboxActions = class ListboxActions {
       element.removeAttribute('aria-selected');
     }
   }
+  /**
+   * @description
+   *  Populates the list of action buttons
+   */
+  populateCurrentItemActionButtons () {
+    this.listboxCurrentItemActionsButtons = Array.from(
+      this.listboxItemCurrent.querySelectorAll(
+        'button:not(.hide-actions-button),[role=“button”]:not(.hide-actions-button)'
+      )
+    );
+  }
   /**
    * @description
    *  Enable/disable the up/down arrows based on the activeDescendant.
@@ -396,6 +428,7 @@ aria.ListboxActions = class ListboxActions {
         }
         this.setActiveDescendant(this.listboxItemsWithAriaActionsArray[0]);
         this.updateArrowUpDownItems();
+        this.populateCurrentItemActionButtons();
         break;
       case 'js-favorite':
       case 'favorite':
@@ -412,7 +445,7 @@ aria.ListboxActions = class ListboxActions {
         );
         this.handleItemChange(
           activeButton.ariaPressed == 'true' ? 'favorite' : 'unfavorited',
-          [activeOption]
+          activeOption
         );
         activeOption.classList.toggle('js-favoriteIndication');
         if (activeOption.classList.contains('js-favoriteIndication')) {
@@ -423,10 +456,12 @@ aria.ListboxActions = class ListboxActions {
       case 'uparrow':
         this.moveUpItems();
         this.updateArrowUpDownItems();
+        this.populateCurrentItemActionButtons();
         break;
       case 'downarrow':
         this.moveDownItems();
         this.updateArrowUpDownItems();
+        this.populateCurrentItemActionButtons();
         break;
       default:
         this.selectItem(event.currentTarget.querySelector('.focused'));
@@ -478,11 +513,7 @@ aria.ListboxActions = class ListboxActions {
         if (this.listboxItemCurrent) {
           this.focusItem(this.listboxItemCurrent);
         }
-        this.listboxCurrentItemActionsButtons = Array.from(
-          this.listboxItemCurrent.querySelectorAll(
-            'button:not(.hide-actions-button),[role="button"]:not(.hide-actions-button)'
-          )
-        );
+        this.populateCurrentItemActionButtons();
         this.setAriaActions(
           this.listboxItemCurrent,
           this.listboxCurrentItemActionsButtons.map((node) => node.id).join(' ')