@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.15 → 0.0.0-pr1408.17

package/components/combobox/demo/keyboardBehavior.md

@@ -3,7 +3,7 @@
   <div class="mainContent">
     <div class="scrollWrapper">
       <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
-      <p>The component trigger contains an <code>&lt;auro-input&gt;</code> which has two focusable elements:</p>
+      <p>The component trigger contains an <code>&lt;auro-input&gt;</code> which has two elements:</p>
       <ol>
         <li><strong>Input</strong></li>
         <li><strong>Clear button:</strong> only shown when the input has a value.</li>
@@ -11,7 +11,7 @@
       <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
       <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
       <p>On <strong>large viewport devices</strong> (e.g., desktop browser, tablet) there is no focusable content inside the component bib.</p>
-      <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which may be tabbed through naturally.</p>
+      <p>On <strong>small viewport devices</strong> (e.g., phone) the bib opens a modal dialog with a focusable <strong>input</strong> and <strong>clear button</strong> which can receive <strong>Click</strong> and <strong>Tap</strong> events.</p>
       <auro-header level="2" id="keyEvents">Key Events</auro-header>
       <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
       <!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
@@ -166,8 +166,8 @@
             </td>
           </tr>
           <tr>
-            <td rowspan="6">Enter</td>
-            <td rowspan="6">-</td>
+            <td rowspan="4">Enter</td>
+            <td rowspan="4">-</td>
             <td>Collapsed, list options have been populated</td>
             <td>
               Trigger input, <strong>NOT</strong> the input clear button
@@ -186,7 +186,7 @@
             </td>
           </tr>
           <tr>
-            <td rowspan="2">Expanded, large viewport device</td>
+            <td>Expanded, large viewport device</td>
             <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
             </td>
@@ -195,15 +195,7 @@
             </td>
           </tr>
           <tr>
-            <td>
-              Trigger input close button, <strong>NOT</strong> the trigger input 
-            </td>
-            <td>
-              The input value is cleared and <strong>focus</strong> is moved to the trigger input element.
-            </td>
-          </tr>
-          <tr>
-            <td rowspan="2">Expanded, small viewport device</td>
+            <td>Expanded, small viewport device</td>
             <td>
               Dialog input element, <strong>NOT</strong> the dialog input clear button
             </td>
@@ -211,14 +203,6 @@
               The current <code>focused</code> option is selected, closes the bib and <strong>focus</strong> is returned to the trigger input element.
             </td>
           </tr>
-          <tr>
-            <td>
-              Dialog input clear button, <strong>NOT</strong> the dialog input element
-            </td>
-            <td>
-              The <strong>input</strong> value is cleared, <strong>focus</strong> moves to the dialog input element.
-            </td>
-          </tr>
           <tr>
             <td>Escape</td>
             <td>-</td>
@@ -248,9 +232,9 @@
             </td>
           </tr>
           <tr>
-            <td rowspan="3">Tab</td>
-            <td rowspan="2">-</td>
-            <td rowspan="2">Expanded</td>
+            <td rowspan="2">Tab</td>
+            <td>-</td>
+            <td>Expanded</td>
             <td>
               Input element, <strong>NOT</strong> the input clear button
               <div class="note">
@@ -261,17 +245,6 @@
               The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger.
             </td>
           </tr>
-          <tr>
-            <td>
-              Input clear button, <strong>NOT</strong> the input element
-              <div class="note">
-                <strong>Note:</strong> Includes both trigger and bib content input clear buttons.
-              </div>
-            </td>
-            <td>
-              <span style="background-color: pink; color: red;">&nbsp;What do we do here?&nbsp;&nbsp;</span>
-            </td>
-          </tr>
           <tr>
             <td>Shift</td>
             <td>Expanded</td>

package/components/combobox/dist/auro-combobox.d.ts

@@ -42,6 +42,7 @@ export class AuroCombobox extends AuroElement {
         };
         /**
          * Array of available options to display in the dropdown.
+         * This array contains all non-hidden options (e.g., hidden by filtering on input value).
          * @private
          */
         availableOptions: {
@@ -381,6 +382,18 @@ export class AuroCombobox extends AuroElement {
      * @returns {boolean} - Returns true if the element is valid, false otherwise.
      */
     isValid(): boolean;
+    /**
+     * Mark the first available (non-hidden), enabled option as `active`.
+     * @private
+     * @returns {void}
+     */
+    private activateFirstEnabledAvailableOption;
+    /**
+     * Mark the last available (non-hidden), enabled option as `active`.
+     * @private
+     * @returns {void}
+     */
+    private activateLastEnabledAvailableOption;
     /**
      * Updates the filter for the available options based on the input value.
      * @private
@@ -438,6 +451,10 @@ export class AuroCombobox extends AuroElement {
      * @private
      */
     private setClearBtnFocus;
+    /**
+     * @private
+     */
+    private setTriggerInputFocus;
     /**
      * Suppresses or restores dialog semantics on the bib's dialog element.
      * On desktop (non-fullscreen), VoiceOver verbosely announces "listbox inside

package/components/combobox/dist/comboboxKeyboardStrategy.d.ts

@@ -1,6 +1,9 @@
 export namespace comboboxKeyboardStrategy {
-    function Enter(component: any, evt: any, ctx: any): Promise<void>;
-    function Tab(component: any, evt: any, ctx: any): void;
-    function ArrowUp(component: any, evt: any, ctx: any): void;
     function ArrowDown(component: any, evt: any, ctx: any): void;
+    function ArrowUp(component: any, evt: any, ctx: any): void;
+    function End(component: any, evt: any, ctx: any): void;
+    function Enter(component: any, evt: any, ctx: any): void;
+    function Escape(component: any, _evt: any, ctx: any): void;
+    function Home(component: any, evt: any, ctx: any): void;
+    function Tab(component: any, evt: any, ctx: any): void;
 }