Can't use `triggerEvent` on a disabled element

[lougreenwood]

I'm trying to test that a disabled button displays a tooltip when hovered, but it seems that triggerEvent won't allow this.

Can not triggerEvent on disabled [object HTMLButtonElement]

Seems this rule is overly strict?

[ro0gr]

I've created a quick reproduction https://codepen.io/ro0gr/pen/qBVdRoo, and I'm really surprised that title is shown for a disabled button.

However, there is a bit inconsitent behavior between browsers. In case of Firefox, a button is able to handle mouseover. While in Chrome event listeners don't react. It might mean that disabled + "events based logic" can't be implemented reliably(cross-browser).

Can you elaborate more on your exact use case please? Is it a custom tooltip element(cause I don't think it's possible to test native tooltips appearance)? Which events does your tooltip rely on?

[lougreenwood]

Thanks @ro0gr, sure - an example of our use case looks something like:

<TooltipDecorator @tooltipText="bla" @showTooltip={{true}}>
    <button disabled={{@disabled}}>hello</button>
</TooltipDecorator>

So basically, we have this re-usable component which we wrap around elements to add a tooltip to them. In this case the button element itself doesn't have a tooltip, but rather, hovering it causes the tooltip on the parent wrapping TooltipDecorator to display.

The implementation of TooltipDecorator looks something like this:

{{#if @showTooltip}}
<span
      data-test-tooltip-decorator-tooltip
      aria-label={{translate-newlines @tooltipText}}
      class="tooltip {{@verticalPosition}}"
      ...attributes
>
  {{yield}}
</span>
{{else}}
    {{yield}}
{{/if}}

One workaround is that I could hover the decorator instead of the button - but that feels a bit too close to testing an implementation detail and I'd prefer to just trigger a mouseover or similar event on the disabled button to test that a tooltip is shown.

Which events does your tooltip rely on?

Looking at the code above, seems there is no JS used to display the tooltip and instead it uses aria-label to display the styled tooltip.

[MelSumner]

👋 From an accessibility perspective, if an interactive element is disabled, a triggerEvent should not be allowed. If you want to explore some alternative UX solutions, I'd be happy to discuss further- check out the #topic-a11y channel in Discord.

[ro0gr]

Now I see, it's probably achieved via hover pseudo class, which propagates from disabled button to a decorator. However, I believe it won't be possible to emulate this via JS https://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

So, if I don't miss smth, interacting with a TooltipDecorator element seems reasonable to me.

[MelSumner]

@ro0gr how would you access it as a keyboard-only user?

[ro0gr]

@MelSumner sorry, not sure if I follow your question, but as a keyboard user I'd probably use Tab or vim flavoured keybindings.

I mean I approach this issue from the low level testing perspective.

Seems this rule is overly strict?

as I can see now, there is still no point to make it less restrictive, cause I can not see any practical value for it.