chore: updated documentation

Author: ArathyKumar

elements/pf-search-input/docs/pf-search-input.md

@@ -34,8 +34,52 @@ import '@patternfly/elements/pf-search-input/pf-search-input.js';
   {% renderFile "./elements/pf-search-input/demo/pf-search-input-with-submit.html" %}
 {% endhtmlexample %}
 
+#### Disabled
+{% htmlexample %}
+  {% renderFile "./elements/pf-search-input/demo/disabled.html" %}
+{% endhtmlexample %}
+
 {% endband %}
 
+{% band header="Accessibility" %}
+
+The select uses the [Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) recommendations from the WAI ARIA [Authoring Best Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg).
+
+When the dropdown is disabled it follows [WAI ARIA focusability recommendations](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) for composite widget elements, where dropdown items are still focusable even when the dropdown is disabled.
+
+#### Toggle and typeahead input
+
+When focus is on the toggle, the following keyboard interactions apply:
+
+| Key                    | Function                                                                               |
+| ---------------------- | -------------------------------------------------------------------------------------- |
+| <kbd>Down Arrow</kbd>  | Opens the listbox and moves focus to the first listbox item.                           |
+| <kbd>Tab</kbd>         | Moves focus out of element onto the next focusable item and closes listbox.            |
+| <kbd>Shift + Tab</kbd> | Moves focus out of element onto the previous focusable item and closes listbox.        |
+
+#### Listbox options
+
+Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex) recommendation. When focus is on the listbox, the following keyboard interactions apply:
+
+| Key                    | Function                                                                              |
+| ---------------------- | ------------------------------------------------------------------------------------- |
+| <kbd>Enter</kbd>       | Selects the options and closes the listbox.                                           |
+| <kbd>Space</kbd>       | Selects the options and closes the listbox.                                           |
+| <kbd>Tab</kbd>         | Moves focus out of element onto the next focusable options and closes listbox.        |
+| <kbd>Shift + Tab</kbd> | Moves focus to the toggle button and closes listbox.                                  |
+| <kbd>Up Arrow</kbd>    | Moves focus to the previous option, optionally wrapping from the first to the last.   |
+| <kbd>Down Arrow</kbd>  | Moves focus to the next option, optionally wrapping from the last to the first.       |
+| <kbd>Left Arrow</kbd>  | Moves focus to the previous option, optionally wrapping from the first to the last.   |
+| <kbd>Right Arrow</kbd> | Moves focus to the next option, optionally wrapping from the last to the first.       |
+| <kbd>Home</kbd>        | Moves focus to the first option in the current listbox.                               |
+| <kbd>Escape</kbd>      | Close the listbox that contains focus and return focus to the toggle button.          |
+| <kbd>Any letter</kbd>  | Navigates to the next option that starts with the letter.                             |
+
+{% endband %}
+
+
+
+
 {% renderSlots %}{% endrenderSlots %}
 
 {% renderAttributes %}{% endrenderAttributes %}

elements/pf-search-input/pf-search-input.css

@@ -89,12 +89,12 @@
 }
 
 :host([aria-disabled="true"]) {
-	pointer-events: none !important;
-	cursor: not-allowed !important;
+	pointer-events: none;
+	cursor: not-allowed;
 }
 
 #outer.disabled {
-	color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+	color: var(--pf-global--Color--dark-200, #6a6e73);
 }
 
 #outer {

elements/pf-search-input/pf-search-input.ts

@@ -185,6 +185,11 @@ export class PfSearchInput extends LitElement {
           instance._onOutsideClick(event);
         }
       });
+      document.addEventListener('focusout', () => {
+        for (const instance of PfSearchInput.instances) {
+          instance._onFocusOut();
+        }
+      });
     }
   }
 
@@ -198,7 +203,7 @@ export class PfSearchInput extends LitElement {
     PfSearchInput.instances.delete(this);
   }
 
-  // Function to handle the closing of popover
+  // Function to handle the closing of popover on outside click
   @bound private _onOutsideClick(event: MouseEvent) {
     const path = event.composedPath();
     if (!path.includes(this._searchInputContainer)) {
@@ -208,6 +213,13 @@ export class PfSearchInput extends LitElement {
     }
   }
 
+  // Function to handle the closing of popover on focus out
+  @bound private _onFocusOut() {
+    if (this.expanded) {
+      this.expanded = false;
+    }
+  }
+
   /**
    * Single select option value for single select menus,
    * or array of select option values for multi select.