feat(core): add listbox support for roving-tabindex-controller

core/pfe-core/controllers/internals-controller.ts

@@ -8,6 +8,7 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   declare role: ARIAMixin['role'];
   declare ariaAtomic: ARIAMixin['ariaAtomic'];
   declare ariaAutoComplete: ARIAMixin['ariaAutoComplete'];
+  declare ariaActivedescendant: string | null;
   declare ariaBusy: ARIAMixin['ariaBusy'];
   declare ariaChecked: ARIAMixin['ariaChecked'];
   declare ariaColCount: ARIAMixin['ariaColCount'];

core/pfe-core/controllers/roving-tabindex-controller.ts

@@ -101,20 +101,28 @@ export class RovingTabindexController<
           this.#focusableItems.includes(x as ItemType))) {
       return;
     }
+
+    const orientation = this.host.getAttribute('aria-orientation');
+
     const item = this.activeItem;
     let shouldPreventDefault = false;
     const horizontalOnly =
         !item ? false
       : item.tagName === 'SELECT' ||
-        item.getAttribute('role') === 'spinbutton';
-
-
+        item.getAttribute('role') === 'spinbutton' || orientation === 'horizontal';
+    const verticalOnly = orientation === 'vertical';
     switch (event.key) {
       case 'ArrowLeft':
+        if (verticalOnly) {
+          return;
+        }
         this.focusOnItem(this.prevItem);
         shouldPreventDefault = true;
         break;
       case 'ArrowRight':
+        if (verticalOnly) {
+          return;
+        }
         this.focusOnItem(this.nextItem);
         shouldPreventDefault = true;
         break;
@@ -136,24 +144,10 @@ export class RovingTabindexController<
         this.focusOnItem(this.firstItem);
         shouldPreventDefault = true;
         break;
-      case 'PageUp':
-        if (horizontalOnly) {
-          return;
-        }
-        this.focusOnItem(this.firstItem);
-        shouldPreventDefault = true;
-        break;
       case 'End':
         this.focusOnItem(this.lastItem);
         shouldPreventDefault = true;
         break;
-      case 'PageDown':
-        if (horizontalOnly) {
-          return;
-        }
-        this.focusOnItem(this.lastItem);
-        shouldPreventDefault = true;
-        break;
       default:
         break;
     }
@@ -168,8 +162,8 @@ export class RovingTabindexController<
    * sets tabindex of item based on whether or not it is active
    */
   updateActiveItem(item?: ItemType): void {
-    if (item) {
-      if (!!this.#activeItem && item !== this.#activeItem) {
+    if (item && item !== this.#activeItem) {
+      if (this.#activeItem) {
         this.#activeItem.tabIndex = -1;
       }
       item.tabIndex = 0;
@@ -192,6 +186,7 @@ export class RovingTabindexController<
   updateItems(items: ItemType[]) {
     const sequence = [...items.slice(this.#itemIndex), ...items.slice(0, this.#itemIndex)];
     const first = sequence.find(item => this.#focusableItems.includes(item));
+    this.#items = items ?? [];
     this.focusOnItem(first || this.firstItem);
   }
 

elements/package.json

@@ -36,6 +36,9 @@
     "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",
     "./pf-label/BaseLabel.js": "./pf-label/BaseLabel.js",
     "./pf-label/pf-label.js": "./pf-label/pf-label.js",
+    "./pf-listbox/pf-listbox.js": "./pf-listbox/pf-listbox.js",
+    "./pf-listbox/pf-listbox-group.js": "./pf-listbox/pf-listbox-group.js",
+    "./pf-listbox/pf-listbox-option.js": "./pf-listbox/pf-listbox-option.js",
     "./pf-modal/pf-modal.js": "./pf-modal/pf-modal.js",
     "./pf-panel/pf-panel.js": "./pf-panel/pf-panel.js",
     "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",

elements/pf-listbox/README.md

@@ -0,0 +1,11 @@
+# Listbox
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-listbox>
+
+</pf-listbox>
+```

elements/pf-listbox/demo/demo.css

@@ -0,0 +1,13 @@
+[data-demo="pf-listbox"] {
+  padding: 20px;
+}
+
+#combo {
+  display: inline-flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+#listbox {
+  display: flex;
+}

elements/pf-listbox/demo/filter-modes.html

@@ -0,0 +1,43 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-listbox.js"></script>
+
+<h2>filter-mode="disabled"</h2>
+<p>
+  Any arrow keys work. 
+  Only one option can be selected. 
+  Filter is disabled.</p>
+<pf-listbox filter-mode="disabled">
+  <pf-listbox-option>Blue</pf-listbox-option>
+  <pf-listbox-option>Green</pf-listbox-option>
+  <pf-listbox-option>Magenta</pf-listbox-option>
+  <pf-listbox-option>Orange</pf-listbox-option>
+  <pf-listbox-option>Purple</pf-listbox-option>
+  <pf-listbox-option>Pink</pf-listbox-option>
+  <pf-listbox-option>Red</pf-listbox-option>
+  <pf-listbox-option>Yellow</pf-listbox-option>
+</pf-listbox>
+
+<h2>filter-mode="required": combobox example</h2>
+<p>
+  Any arrow keys work. 
+  Only one option can be selected. 
+  Listbox wont appear until input has text.
+</p>
+<label id="combo">
+  Pick a color:
+  <input id="text"
+    aria-controls="listbox"
+    aria-role="combobox" 
+    aria-autocomplete="both" 
+    aria-expanded="false"/>
+  <pf-listbox id="listbox" filter-mode="required">
+    <pf-listbox-option>Blue</pf-listbox-option>
+    <pf-listbox-option>Green</pf-listbox-option>
+    <pf-listbox-option>Magenta</pf-listbox-option>
+    <pf-listbox-option>Orange</pf-listbox-option>
+    <pf-listbox-option>Purple</pf-listbox-option>
+    <pf-listbox-option>Pink</pf-listbox-option>
+    <pf-listbox-option>Red</pf-listbox-option>
+    <pf-listbox-option>Yellow</pf-listbox-option>
+  </pf-listbox>
+</label>

elements/pf-listbox/demo/grouped-options.html

@@ -0,0 +1,23 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-listbox.js"></script>
+
+<p>
+  Any arrow keys work. 
+  Only one option can be selected. 
+  Filter by typing a letter. 
+  Headings are not selectable.
+</p>
+<pf-listbox>
+  <pf-listbox-group>
+    <span slot="group-heading">Breakfast</span>
+    <pf-listbox-option>Eggs</pf-listbox-option>
+    <pf-listbox-option>Toast</pf-listbox-option>
+    <pf-listbox-option>Waffles</pf-listbox-option>
+  </pf-listbox-group>
+  <pf-listbox-group>
+    <span slot="group-heading">Lunch</span>
+    <pf-listbox-option>Salad</pf-listbox-option>
+    <pf-listbox-option>Sandwich</pf-listbox-option>
+    <pf-listbox-option>Soup</pf-listbox-option>
+  </pf-listbox-group>
+</pf-listbox>

elements/pf-listbox/demo/multiple-selections.html

@@ -0,0 +1,19 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-listbox.js"></script>
+
+<p>
+  Multiple options can be selected. Any arrow keys work. 
+  <kbd>Shift</kbd> will toggling off multiple items. 
+  <kbd>Ctrl+A</kbd> will toggle selection on all items. 
+  Filter by typing a letter.
+</p>
+<pf-listbox multiple>
+  <pf-listbox-option>Blue</pf-listbox-option>
+  <pf-listbox-option>Green</pf-listbox-option>
+  <pf-listbox-option>Magenta</pf-listbox-option>
+  <pf-listbox-option>Orange</pf-listbox-option>
+  <pf-listbox-option>Purple</pf-listbox-option>
+  <pf-listbox-option>Pink</pf-listbox-option>
+  <pf-listbox-option>Red</pf-listbox-option>
+  <pf-listbox-option>Yellow</pf-listbox-option>
+</pf-listbox>

elements/pf-listbox/demo/orientation.html

@@ -0,0 +1,28 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-listbox.js"></script>
+
+<h2>orientation="vertical"</h2>
+<p>Only vertical arrow keys work. Filter by typing a letter.</p>
+<pf-listbox orientation="vertical">
+  <pf-listbox-option>Blue</pf-listbox-option>
+  <pf-listbox-option>Green</pf-listbox-option>
+  <pf-listbox-option>Magenta</pf-listbox-option>
+  <pf-listbox-option>Orange</pf-listbox-option>
+  <pf-listbox-option>Purple</pf-listbox-option>
+  <pf-listbox-option>Pink</pf-listbox-option>
+  <pf-listbox-option>Red</pf-listbox-option>
+  <pf-listbox-option>Yellow</pf-listbox-option>
+</pf-listbox>
+
+<h2>orientation="horizontal"</h2>
+<p>Only horizontal arrow keys work. Filter by typing a letter.</p>
+<pf-listbox orientation="horizontal">
+  <pf-listbox-option>Blue</pf-listbox-option>
+  <pf-listbox-option>Green</pf-listbox-option>
+  <pf-listbox-option>Magenta</pf-listbox-option>
+  <pf-listbox-option>Orange</pf-listbox-option>
+  <pf-listbox-option>Purple</pf-listbox-option>
+  <pf-listbox-option>Pink</pf-listbox-option>
+  <pf-listbox-option>Red</pf-listbox-option>
+  <pf-listbox-option>Yellow</pf-listbox-option>
+</pf-listbox>

elements/pf-listbox/demo/pf-listbox.html

@@ -0,0 +1,19 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-listbox.js"></script>
+
+<h2>default</h2>
+<p>
+  Any arrow keys work. 
+  Only one option can be selected. 
+  Filter by typing a letter.
+</p>
+<pf-listbox>
+  <pf-listbox-option>Blue</pf-listbox-option>
+  <pf-listbox-option>Green</pf-listbox-option>
+  <pf-listbox-option>Magenta</pf-listbox-option>
+  <pf-listbox-option>Orange</pf-listbox-option>
+  <pf-listbox-option>Purple</pf-listbox-option>
+  <pf-listbox-option>Pink</pf-listbox-option>
+  <pf-listbox-option>Red</pf-listbox-option>
+  <pf-listbox-option>Yellow</pf-listbox-option>
+</pf-listbox>

elements/pf-listbox/demo/pf-listbox.js

@@ -0,0 +1,29 @@
+import '@patternfly/elements/pf-listbox/pf-listbox.js';
+
+window.addEventListener('load', () => {
+  /**
+   * pf-listbox in a combox box
+   * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/|WAI ARIA Examples: Combobox with ARIAutocomplete}
+   */
+  const input = document.querySelector('#text');
+  const listbox = document.querySelector('#listbox');
+  if (listbox && input) {
+    listbox.filter = input.value;
+    input.addEventListener('input', () => {
+      if (input.value !== listbox.value) {
+        listbox.filter = input.value;
+      }
+    });
+    listbox.addEventListener('change', () => {
+      const val = (listbox.value || '');
+      if (val.length > 0) {
+        input.value = val;
+        input.focus();
+        input.setSelectionRange(
+          listbox.filter.length,
+          val.length
+        );
+      }
+    });
+  }
+});

elements/pf-listbox/docs/pf-listbox.md

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <pf-listbox></pf-listbox>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}

elements/pf-listbox/pf-listbox-group.css

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+}
+
+slot {
+  padding: 10px;
+}
+
+slot[name="group-heading"] {
+  background-color: #f0f0f0;
+  display: block;
+  font-weight: bold;
+  padding: 0 10px;
+}

elements/pf-listbox/pf-listbox-group.ts

@@ -0,0 +1,45 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import { PfListboxOption } from './pf-listbox-option.js';
+
+import styles from './pf-listbox-group.css';
+
+export type PfListboxGroupOrOption = PfListboxGroup | PfListboxOption;
+
+/**
+ * Group of options within a listbox
+ * @slot - Place element content here
+ */
+@customElement('pf-listbox-group')
+export class PfListboxGroup extends LitElement {
+  static readonly styles = [styles];
+
+  #internals = new InternalsController(this, {
+    role: 'group'
+  });
+
+  @queryAssignedElements() private _options!: PfListboxOption[];
+
+  render() {
+    return html`
+      <slot name="group-heading" role="presentation"></slot>
+      <slot @slotchange="${this.#onSlotchange}"></slot>
+    `;
+  }
+
+  get options() {
+    return this._options;
+  }
+
+  #onSlotchange() {
+    this.dispatchEvent(new Event('slotchange', { bubbles: true }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-listbox-group': PfListboxGroup;
+  }
+}

elements/pf-listbox/pf-listbox-option.css

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+  padding: 2px 10px;
+}
+
+:host([hidden]),
+:host([hidden-by-filter]) {
+  display: none !important;
+}
+
+:host:after,
+:host:before {
+  content: '\2713 ';
+  opacity: 0;
+}
+
+:host([aria-selected="true"]):before {
+  opacity: 1;
+}
+
+:host([active-descendant]) {
+  background-color: var(--_active-descendant-color, transparent);
+}