Cannot select a o-field component using getByRole and an accessible name about oruga

[messenjer]

Yes, it's not that simple. In VeeValidate, they do something similar with the Form, Field, ErrorMessage Components. It's a bit too magical for me.

The developer has written an article on the subject: https://logaretm.com/blog/making-the-most-out-of-vuejs-injections/

[messenjer]

I tested with the new version 0.8.8 and it works. Thanks

[messenjer]

The use of 'aria-labelledby' breaks also the use of getByLabel('Firstname')

In v0.7, it's working

<div class="field" placeholder="First Name" type="text">
  <label 
     for="firstname"
     class="label"
    ><div class="is-inline-flex is-align-items-center">
      First Name <span class="is-required">*</span>
    </div>
    </label
  >
  <div class="control">
    <input
      placeholder="First Name"
      name="firstname"
      id="firstname"
      class="input"
      type="text"
      autocomplete="off"
    />
  </div>
</div>

In 0.8, its not working

<div class="field" placeholder="First Name" type="text">
  <label 
     for="firstname"
     class="label"
    ><div class="is-inline-flex is-align-items-center">
      First Name <span class="is-required">*</span>
    </div>
    </label
  >
  <div class="control">
    <input
      placeholder="First Name"
      name="firstname"
      id="firstname"
      class="input"
      type="text"
      autocomplete="off"
      aria-labelledby="5usgluoiyzy"
    />
  </div>
</div>

[mlmoravek]

Yeah the uuid() default of ariaLabelledby needs to be removed. I like the idea of injecting the id used for o-field into the o-input component. But with the posibility to override it with a directly passed prop to o-input.

[messenjer]

Like this ?

without labelFor attribute in o-field

    <o-field label="Name">
        <o-input model-value="Kevin Garvey" />
    </o-field>

Generates:

<div data-oruga="field" class="field">
  <label
       class="label"
+       for="9kht9axc5v4"
   >Name</label>
  <div data-oruga="input" class="control">
    <input
      data-oruga-input="text"
      type="text"
      class="input"
      autocomplete="off"
+      id="9kht9axc5v4"
    />
  </div>
</div>

With labelFor attribute in o-field

    <o-field label="Name" label-for="name">
        <o-input model-value="Kevin Garvey" id="name" />
    </o-field>

Generates

<div data-oruga="field" class="field">
  <label class="label"
+       for="name"
   >Name</label>
  <div data-oruga="input" class="control">
    <input
      data-oruga-input="text"
      type="text"
      class="input"
      autocomplete="off"
+      id="name"
    />
  </div>
</div>

[mlmoravek]

@Messenger yes, something like that. I just need to figure out whether the o-field should define the id and pass it down, or the input below should define the id and pass it up to the o-field...

[mlmoravek]

However, I see the strength of Oruga more in the features of the other components. For proper form components with validation and so on I suggest FormKit.

[mlmoravek]

@messenjer Wow, thank you so much for the article, it is very interesting!