From bc94f3deddcd22c64ea4208db0eb6b3387a6f9a0 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 3 Oct 2024 19:35:45 +0000
Subject: [PATCH 1/6] Fix scrollable listbox not focusing first item

---
 content/patterns/listbox/examples/js/listbox.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/content/patterns/listbox/examples/js/listbox.js b/content/patterns/listbox/examples/js/listbox.js
index 632063f25c..6475933057 100644
--- a/content/patterns/listbox/examples/js/listbox.js
+++ b/content/patterns/listbox/examples/js/listbox.js
@@ -59,6 +59,8 @@ aria.Listbox = class Listbox {
     if (this.activeDescendant) {
       const listitem = document.getElementById(this.activeDescendant);
       listitem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    } else {
+      this.focusFirstItem();
     }
   }
 

From 871c007ea48ad6a918fc7d2aadb8cd5d781d8aea Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Mon, 28 Oct 2024 13:24:06 +0000
Subject: [PATCH 2/6] fixup! Fix scrollable listbox not focusing first item

---
 content/patterns/listbox/examples/listbox-scrollable.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 2ab524eb67..1e55943467 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -53,6 +53,10 @@ <h2 id="ex_label">Example</h2>
             <div>
               <span id="ss_elem" class="listbox-label">Transuranium elements:</span>
               <ul id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem">
+                <li id="ss_elem_Np" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  None
+                </li>
                 <li id="ss_elem_Np" role="option">
                   <span class="checkmark" aria-hidden="true"></span>
                   Neptunium

From 050fda271a20ec7c865a8890ad36fbae10477858 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Mon, 28 Oct 2024 13:25:44 +0000
Subject: [PATCH 3/6] fixup! Fix scrollable listbox not focusing first item

---
 content/patterns/listbox/examples/listbox-scrollable.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 1e55943467..2bf7a9a17a 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -53,7 +53,7 @@ <h2 id="ex_label">Example</h2>
             <div>
               <span id="ss_elem" class="listbox-label">Transuranium elements:</span>
               <ul id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem">
-                <li id="ss_elem_Np" role="option">
+                <li id="ss_elem_None" role="option">
                   <span class="checkmark" aria-hidden="true"></span>
                   None
                 </li>

From 48344fad179fe5f08182bd6f1153beaa8188a50c Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 31 Oct 2024 14:51:41 +0000
Subject: [PATCH 4/6] fixup! Fix scrollable listbox not focusing first item

---
 test/tests/listbox_scrollable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/tests/listbox_scrollable.js b/test/tests/listbox_scrollable.js
index d33b474880..0833149317 100644
--- a/test/tests/listbox_scrollable.js
+++ b/test/tests/listbox_scrollable.js
@@ -12,8 +12,8 @@ const ex = {
   listboxSelector: '#ex [role="listbox"]',
   optionSelector: '#ex [role="option"]',
   spanSelector: '#ex [role="option"] span.checkmark',
-  numOptions: 26,
-  firstOptionSelector: '#ex #ss_elem_Np',
+  numOptions: 27,
+  firstOptionSelector: '#ex #ss_elem_None',
 };
 
 // Attributes

From 953e40963bd433da473b8388527a99406976171e Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 6 Nov 2024 01:34:04 +0000
Subject: [PATCH 5/6] fixup! Fix scrollable listbox not focusing first item

---
 .../examples/js/listbox-collapsible.js        |  1 -
 .../listbox/examples/listbox-collapsible.html |  1 +
 test/tests/listbox_collapsible.js             | 38 ++++++++++---------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/content/patterns/listbox/examples/js/listbox-collapsible.js b/content/patterns/listbox/examples/js/listbox-collapsible.js
index 4beaae9f5c..4002d17a45 100644
--- a/content/patterns/listbox/examples/js/listbox-collapsible.js
+++ b/content/patterns/listbox/examples/js/listbox-collapsible.js
@@ -53,7 +53,6 @@ class ListboxButton {
       case 'ArrowDown':
         evt.preventDefault();
         this.showListbox();
-        this.listbox.checkKeyPress(evt);
         break;
     }
   }
diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
index 5fa5958390..8a8a726db5 100644
--- a/content/patterns/listbox/examples/listbox-collapsible.html
+++ b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -66,6 +66,7 @@ <h2 id="ex_label">Example</h2>
               <div id="exp_wrapper">
                 <button type="button" aria-haspopup="listbox" aria-labelledby="exp_elem exp_button" id="exp_button">Neptunium</button>
                 <ul id="exp_elem_list" tabindex="-1" role="listbox" aria-labelledby="exp_elem" class="hidden">
+                  <li id="exp_elem_None" role="option">None</li>
                   <li id="exp_elem_Np" role="option">Neptunium</li>
                   <li id="exp_elem_Pu" role="option">Plutonium</li>
                   <li id="exp_elem_Am" role="option">Americium</li>
diff --git a/test/tests/listbox_collapsible.js b/test/tests/listbox_collapsible.js
index 25855968c5..4f6abb9f9d 100644
--- a/test/tests/listbox_collapsible.js
+++ b/test/tests/listbox_collapsible.js
@@ -13,7 +13,7 @@ const ex = {
   buttonSelector: '#ex button',
   listboxSelector: '#ex [role="listbox"]',
   optionSelector: '#ex [role="option"]',
-  numOptions: 26,
+  numOptions: 27,
 };
 
 const checkFocus = async function (t, selector) {
@@ -132,23 +132,27 @@ ariaTest(
       By.css(ex.listboxSelector)
     );
     const options = await t.context.queryElements(t, ex.optionSelector);
-    const optionId = await options[0].getAttribute('id');
+    const optionId0 = await options[0].getAttribute('id');
+    const optionId1 = await options[1].getAttribute('id');
 
-    // no active descendant is expected until arrow keys are used
+    // The first active descendant is selected
     t.is(
       await listbox.getAttribute('aria-activedescendant'),
-      null,
-      'activedescendant not set on open click'
+      optionId0,
+      'aria-activedescendant should be set to ' +
+        optionId0 +
+        ' for items: ' +
+        ex.listboxSelector
     );
 
-    // active descendant set to first item on down arrow
+    // The active descendant moves to the second item on down arrow
     await listbox.sendKeys(Key.DOWN);
 
     t.is(
       await listbox.getAttribute('aria-activedescendant'),
-      optionId,
+      optionId1,
       'aria-activedescendant should be set to ' +
-        optionId +
+        optionId1 +
         ' for items: ' +
         ex.listboxSelector
     );
@@ -160,7 +164,7 @@ ariaTest(
   exampleFile,
   'option-role',
   async (t) => {
-    await assertAriaRoles(t, 'ex', 'option', 26, 'li');
+    await assertAriaRoles(t, 'ex', 'option', 27, 'li');
   }
 );
 
@@ -444,7 +448,7 @@ ariaTest(
     // will automatically select the first option.
     await t.context.session.findElement(By.css(ex.buttonSelector)).click();
 
-    // The third item is 'Americium'
+    // The fourth item is 'Americium'
     let listbox = await t.context.session.findElement(
       By.css(ex.listboxSelector)
     );
@@ -453,7 +457,7 @@ ariaTest(
       t,
       ex.listboxSelector,
       ex.optionSelector,
-      2
+      3
     );
 
     // Reload page
@@ -464,14 +468,14 @@ ariaTest(
     await t.context.session.findElement(By.css(ex.buttonSelector)).click();
 
     // Keys in rapid session will treat characters like first few characters of item
-    // In this cae, 'Curium' at index 3 will be skipped for 'Californium' at index 5
+    // In this cae, 'Curium' at index 4 will be skipped for 'Californium' at index 6
     listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
     await listbox.sendKeys('c', 'a');
     await assertAriaSelectedAndActivedescendant(
       t,
       ex.listboxSelector,
       ex.optionSelector,
-      5
+      6
     );
 
     // Reload page
@@ -483,25 +487,25 @@ ariaTest(
 
     listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
 
-    // With a break, sending on 'b' will land us on 'Berkelium' at index 4
+    // With a break, sending on 'b' will land us on 'Berkelium' at index 5
     await listbox.sendKeys('b');
     await assertAriaSelectedAndActivedescendant(
       t,
       ex.listboxSelector,
       ex.optionSelector,
-      4
+      5
     );
 
     // Wait for half a second before sending second 'b'
     await new Promise((resolve) => setTimeout(resolve, 500));
 
-    // A second 'b' should land us on 'Bohrium' at index 14
+    // A second 'b' should land us on 'Bohrium' at index 15
     await listbox.sendKeys('b');
     await assertAriaSelectedAndActivedescendant(
       t,
       ex.listboxSelector,
       ex.optionSelector,
-      14
+      15
     );
   }
 );

From 3d8fdca5812b32046dc82f6af9ad22ff58a004f8 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 6 Nov 2024 01:44:09 +0000
Subject: [PATCH 6/6] fixup! Fix scrollable listbox not focusing first item

---
 test/tests/listbox_grouped.js    | 6 +++---
 test/tests/listbox_scrollable.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/tests/listbox_grouped.js b/test/tests/listbox_grouped.js
index 32ef9927f1..5672b1506f 100644
--- a/test/tests/listbox_grouped.js
+++ b/test/tests/listbox_grouped.js
@@ -176,11 +176,11 @@ ariaTest(
 );
 
 ariaTest(
-  'DOWN ARROW sends initial focus to the first option',
+  'DOWN ARROW moves focus to the second option',
   exampleFile,
   'key-down-arrow',
   async (t) => {
-    // Sending the key down arrow will put focus on the first option if no options are focused
+    // Sending the key down arrow will move focus to the second option.
     const listbox = await t.context.session.findElement(
       By.css(ex.listboxSelector)
     );
@@ -190,7 +190,7 @@ ariaTest(
       t,
       ex.listboxSelector,
       ex.optionSelector,
-      0
+      1
     );
   }
 );
diff --git a/test/tests/listbox_scrollable.js b/test/tests/listbox_scrollable.js
index 0833149317..9676dcafb5 100644
--- a/test/tests/listbox_scrollable.js
+++ b/test/tests/listbox_scrollable.js
@@ -75,7 +75,7 @@ ariaTest(
   exampleFile,
   'option-role',
   async (t) => {
-    await assertAriaRoles(t, 'ex', 'option', 26, 'li');
+    await assertAriaRoles(t, 'ex', 'option', 27, 'li');
   }
 );