Alpine dropdown component has unsupported attributes in LiveView 0.18

Hi all,

I have a Phoenix component for dropdown menus based on Dropdown Component — Alpine.js that works fine with Live View 0.17 but is not working with Live View 0.18, because the HTMLEngine complains about unsupported attributes like :aria-expanded, :aria-controls, and :id.

You can find the complete code on the Alpine page linked above, here’s an excerpt:

<button
  x-ref="button"
  x-on:click="toggle()"
  :aria-expanded="open"
  :aria-controls="$id('dropdown-button')"
  type="button"
>

The W3C Validator certainly doesn’t like those attributes but it doesn’t like others like x-on:click either, which Phoenix HTML does not complain about.

Should these attributes be accepted? Is there a way to bypass this validation?

With 0.18 you afaik need to use the longform alpine attributes x-bind/…, which you can whitelist by prefix.

5 Likes

Thank you!

Using the longform attributes like x-bind:aria-expanded fixed the issue.