Input Fields Accessibility

[Cadranel-Kael]

Hi! I’m really loving MaryUI, it’s awesome to have an open-source alternative to FluxUI.
I noticed that the input fields are wrapped in <fieldset> elements. According to the W3C spec, “The <fieldset> element represents a set of form controls optionally grouped under a common name.” (W3C Spec).
I was wondering: why use a <fieldset> instead of a <div> or <label>? Also, <legend> elements don’t have the built-in functionality to focus the input when clicked, unlike <label> elements.
Furthermore, when using <x-input>, I noticed that there are two <label> elements surrounding the input.
Thanks again for your amazing work on MaryUI!

[robsontenorio]

@Cadranel-Kael

I must confess I’m not an accessibility expert.
With the release of v2, I want to ensure that all input components follow the same pattern, based on examples I’ve seen in the daisyUI documentation.

Maybe someone with more expertise could help by creating a draft PR to improve this.

[Cadranel-Kael]

Hi, I've notice some issues from daisyUI's documentation notably this one:

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
  <legend class="fieldset-legend">Page title</legend>
  <input type="text" class="input" placeholder="My awesome page" />
  <p class="label">You can edit page title later on from settings</p>
</fieldset>

https://daisyui.com/components/fieldset/#fieldset-fieldset-legend-and-label
Here the screen reader will only read "My awesome page" as indicator what to write when focused on the input.

I've tested it with MaryUI and the issues rise up.

Here it says, "With hint: 'John Doe'".

[robsontenorio]

Yes , because I have mirrored daisyUI examples.

[brun0f0nseca]

Hi, I also have the same problem. I have tried everything to fix it and cannot seem to "escape" this error. I have tried changing the aria-label to fix it, but it is impossible. I keep getting the same warning about it...

<x-mary-select aria-label="{{ __('public.travel-simulator.from') }}" label="{{__('public.travel-simulator.from')}}" wire:model="from" :options="$itineraryStopsName" placeholder="{{__('public.travel-simulator.select-from')}}" class="w-32! p-0! bg-none [&_select]:appearance-auto" required />