[TwigComponent][DX] Better support for boolean ARIA attributes (i.e. aria-hidden)

[gremo]

In short, a boolean attribute in ARIA is an enumerated attribute in the form of strings "true" and "false". This is different from HTML boolean attributes like checked, open or disabled.

In ComponentAttributes we correctly handle HTML boolean attributes but there is not special "treatment" for ARIA enumerated attributes.

Many developers, especially those just starting out or inexperienced with ARIA (me including), could write the following:

{# templates/components/Icon.html.twig #}
{% props icon %}

<i
    {{ attributes.defaults({
        class: html_classes("fa-solid", icon),
        "aria-hidden": true, {# Wrong! It should be a string #}
    }) }}
></i>

Which would produce and invalid HTML (in the sense of the ARIA enumerated attributes explained above):

<i class="fa-solid fa-user" aria-hidden></i> <!-- Wrong! It should be a string -->

To make things easier and more DX, I would suggest to automatically convert true and false to "true" and "false", if the attribute is an ARIA one. Could be easy as:

// Transform ARIA enumerated attribute in case of boolean value
if (str_starts_with($key, 'aria-')) {
  $value = match($value) {
      true => "true",
      false => "false",
      default => $value,
  };
}

Or more concise:

if (is_bool($value) && str_starts_with($key, 'aria-')) {
  $value = $value ? "true" : "false";
}

... just before returing. WDYT?

[smnandre]

Here where we at on the topic for the icons: #1690

Mabe that could help some of your needs

[gremo]

@smnandre Oh I see, but mine was just an example, I'm referring to the ARIA attributes in general... I'm not even using the icon package 😄

[smnandre]

At first i'm not sure to be honest, but open to discussion / ear arguments :)

This does concern only a subset of aria attributes (many have other values, some handle "undefined" as special case), and i'm a bit afraid this would require more documentation / explanation for some users than it would help others.

@kbond @WebMamba ?

[gremo]

@smnandre yeah... this is just an idea, but eventually I don't think it will need any special documentation... it will just work, both ways. I don't see any problems for "undefined" special cases, they will be passed as string as usual.

Thanks for having the time to look at this 👍

[kbond]

Thanks for bringing this to our attention @gremo! I had no idea of this distinction for aria-* attributes.

I'm ok hard-coding this behaviour for now (like shown in the PR description above). Especially if aria-hidden on its own is invalid. If we start getting requests for more of these type of exceptions, we should look into an extensible system.

[gremo]

Nice! Thank you all guys ❤️ I agree with @kbond it should be some kind of system to handle this kind of special attributes at some point in the future 👍

@smnandre thanks for the quick PR

[smnandre]

Happy to help :)