spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[Bug][a11y]: Slider editable NumberField labeled twice

Open majornista opened this issue 1 year ago • 0 comments

Code of conduct

  • [X] I agree to follow this project's code of conduct.

Impacted component(s)

Slider, FieldLabel, NumberField

Expected behavior

The NumberField that displays in the shadowDom for the editable variant of a Slider should only include the textContent for its label once as its aria-label.

A possible solution for this would be to deduplicate within the get labelText() method in FieldLabel, as follows:

    private get labelText(): string | undefined {
        const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
        if (!assignedNodes.length) {
            return undefined;
        }
        const labelText = assignedNodes.map((node) =>
            (node.textContent || /* c8 ignore next */ '').trim()
        )
        /** deduplicate and omit empty nodes */
        .filter(
            (textContent, index, array) => (
                textContent.length && 
                array.findIndex((item) => item === textContent) === index
            )
        );
        return labelText.join(' ');
    }

Actual behavior

On https://opensource.adobe.com/spectrum-web-components/components/slider/#editable, the NumberField that displays in the shadowDom for the editable variant of a Slider repeats the textContent for its label twice in its aria-label.

Rendered <sp-number-field> element in shadowDom, where you can see aria-label=" Angle (editable) Angle (editable) " on the input, follows:

<sp-number-field id="number-field" min="0" max="360" step="1" value="180" hide-stepper="" dir="ltr" type="text" step-modifier="10" autocomplete="off" focusable="" data-dashlane-shadowhost="true" data-dashlane-observed="true">
    <!-- #shadow-root -->
      <div id="textfield">
          <!--?lit$812536239$-->
          <!--?lit$812536239$-->
          <!--?lit$812536239$-->
          <!--?lit$812536239$-->
          <!-- @ts-ignore -->
          <input class="input" type="text" aria-describedby="sp-help-text-1" aria-label=" Angle (editable)  Angle (editable) " placeholder="" autocomplete="off" inputmode="numeric" data-dashlane-rid="cde23094b63176a0" data-form-type="other">
          <!--?lit$812536239$--><!--?-->
      </div>
</sp-number-field>

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

  1. Go to '...'
  2. Click on '....'
  3. Scroll to '....'
  4. Check console
  5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

majornista avatar Jun 15 '23 18:06 majornista