[myfaces-tobago] 03/04: feat(selectMany): impl tabindex

[hn...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit 49b4417e8f06eb6dab7f53d5fbd9b5ade6517a86
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Nov 18 11:17:16 2022 +0100

    feat(selectMany): impl tabindex
    
    Issue: TOBAGO-2159
---
 .../internal/renderkit/renderer/SelectManyRenderer.java |  6 ++++--
 .../src/main/ts/tobago-select-many.ts                   | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
index 1bfb380596..ef30a8cccf 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
@@ -79,6 +79,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
     final boolean inline = component.isInline();
     final Markup markup = component.getMarkup();
     final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
+    final Integer tabIndex = component.getTabIndex();
 
     encodeHiddenSelect(facesContext, component, items, clientId, selectedId, disabled);
 
@@ -87,7 +88,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
         inline ? BootstrapClass.LIST_GROUP : BootstrapClass.DROPDOWN,
         inline ? BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)) : null);
 
-    encodeSelectField(facesContext, component, clientId, fieldId, filterId, filter, disabled, inline, title);
+    encodeSelectField(facesContext, component, clientId, fieldId, filterId, filter, disabled, inline, title, tabIndex);
     encodeOptions(facesContext, component, items, clientId, inline, disabled);
 
     writer.endElement(HtmlElements.DIV);
@@ -120,7 +121,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
 
   private void encodeSelectField(final FacesContext facesContext, final T component,
       final String clientId, final String fieldId, final String filterId, final String filter, final boolean disabled,
-      final boolean inline, final String title) throws IOException {
+      final boolean inline, final String title, final Integer tabIndex) throws IOException {
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
 
     writer.startElement(HtmlElements.DIV);
@@ -144,6 +145,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
     writer.writeAttribute(HtmlAttributes.AUTOCOMPLETE, "off", false);
     writer.writeAttribute(HtmlAttributes.READONLY, filter == null);
     writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
+    writer.writeAttribute(HtmlAttributes.TABINDEX, tabIndex);
 
     writer.endElement(HtmlElements.INPUT);
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
index 6a8d9f7107..e36c68e86d 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
@@ -141,8 +141,9 @@ class SelectMany extends HTMLElement {
     const row: HTMLTableRowElement = this.tbody.querySelector(`[data-tobago-value="${itemValue}"]`);
     if (option.selected) {
       // create badge
+      const tabIndex: number = this.filterInput.tabIndex;
       this.filterInput.insertAdjacentHTML("beforebegin",
-        this.getRowTemplate(itemValue, row.innerText, option.disabled || this.hiddenSelect.disabled));
+        this.getRowTemplate(itemValue, row.innerText, option.disabled || this.hiddenSelect.disabled, tabIndex));
 
       // todo: nicer adding the @click with lit-html
       const closeButton = this.selectField
@@ -181,13 +182,15 @@ class SelectMany extends HTMLElement {
     }
   }
 
-  getRowTemplate(value: string, text: string, disabled: boolean): string {
-    return `
+  getRowTemplate(value: string, text: string, disabled: boolean, tabIndex: number): string {
+    return disabled ? `
 <span class="btn-group" role="group" data-tobago-value="${value}">
-  <tobago-badge class="badge text-bg-primary btn
-  ${disabled ? "disabled" : ""}">${text}</tobago-badge>
-  ${disabled ? ""
-      : "<button type='button' class='tobago-button btn btn-secondary badge'><i class='bi-x-lg'></i></button>"}
+  <tobago-badge class="badge text-bg-primary btn disabled">${text}</tobago-badge>
+</span>` : `
+<span class="btn-group" role="group" data-tobago-value="${value}">
+  <tobago-badge class="badge text-bg-primary btn">${text}</tobago-badge>
+  <button type='button' class='tobago-button btn btn-secondary badge'
+  ${tabIndex > 0 ? " tabindex='" + String(tabIndex) + "'" : ""}><i class='bi-x-lg'></i></button>
 </span>`;
   }