fix(picker-column): adapt structure to prevent double tab tap on keyboard navigation

Author: joselrio

core/src/components/picker-column/picker-column.tsx

@@ -654,38 +654,6 @@ export class PickerColumn implements ComponentInterface {
     return el ? el.getAttribute('aria-label') ?? el.innerText : '';
   };
 
-  /**
-   * Render an element that overlays the column. This element is for assistive
-   * tech to allow users to navigate the column up/down. This element should receive
-   * focus as it listens for synthesized keyboard events as required by the
-   * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
-   */
-  private renderAssistiveFocusable = () => {
-    const { activeItem } = this;
-    const valueText = this.getOptionValueText(activeItem);
-
-    /**
-     * When using the picker, the valuetext provides important context that valuenow
-     * does not. Additionally, using non-zero valuemin/valuemax values can cause
-     * WebKit to incorrectly announce numeric valuetext values (such as a year
-     * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
-     */
-    return (
-      <div
-        ref={(el) => (this.assistiveFocusable = el)}
-        class="assistive-focusable"
-        role="slider"
-        tabindex={this.disabled ? undefined : 0}
-        aria-label={this.ariaLabel}
-        aria-valuemin={0}
-        aria-valuemax={0}
-        aria-valuenow={0}
-        aria-valuetext={valueText}
-        aria-orientation="vertical"
-        onKeyDown={(ev) => this.onKeyDown(ev)}
-      ></div>
-    );
-  };
 
   render() {
     const { color, disabled, isActive, numericInput } = this;
@@ -700,24 +668,21 @@ export class PickerColumn implements ComponentInterface {
           ['picker-column-disabled']: disabled,
         })}
       >
-        {this.renderAssistiveFocusable()}
         <slot name="prefix"></slot>
         <div
           class="picker-opts"
           ref={(el) => {
             this.scrollEl = el;
           }}
-          /**
-           * When an element has an overlay scroll style and
-           * a fixed height, Firefox will focus the scrollable
-           * container if the content exceeds the container's
-           * dimensions.
-           *
-           * This causes keyboard navigation to focus to this
-           * element instead of going to the next element in
-           * the tab order.
-           */
-          tabIndex={0}
+          role="slider"
+          tabindex={this.disabled ? undefined : 0}
+          aria-label={this.ariaLabel}
+          aria-valuemin={0}
+          aria-valuemax={0}
+          aria-valuenow={0}
+          aria-valuetext={this.getOptionValueText(this.activeItem)}
+          aria-orientation="vertical"
+          onKeyDown={(ev) => this.onKeyDown(ev)}
         >
           <div class="picker-item-empty" aria-hidden="true">
             &nbsp;