Unable to include tooltips or signposts next to labels in several form fields

[jessie-james]

Describe the bug

Clarity form control containers / fields such as: clr-input, clr-select, clr-combobox, clr-password etc. do not allow for a signpost to be added after the label.

Our forms can be complex we use this to offer more detailed information on a field that is too long for helper text. To get the visual UX we have to embed the signpost or tooltip within the label markup for a field. This causes accessibility screen readers issues. Other work arounds/ solutions are to put the signpost outside the control/ container entirely causing other problems with UX design and rewrite/ overriding css.

How to reproduce

Expected behavior

Developers should be able to add a signpost to any Cl form input/ field after the label.

Versions

Clarity version:

• v12.x
• v13.0
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
_ie: Angular 13.3.0

Device:

• Type: [ MacBook]
• OS: [iOS]
• Browser [e.g. chrome, safari]

Additional notes

[smsalisbury]

We're also having this issue. Can confirm that the following worked in v12 but doesn't in v13:

<clr-combobox-container>
  <label>
    Form label
    <clr-signpost>
      <div clrSignpostTrigger>Trigger</div>
      <clr-signpost-content *clrIfOpen>
        Signpost content
      </clr-signpost-content>
    </clr-signpost>
  </label>
  <clr-combobox formControlName='comboControl'>
    ...
  </clr-combobox>
</clr-combobox-container>

[kevinbuhmann]

Internal issue: https://jira.eng.vmware.com/browse/VPAT-12188

[smsalisbury]

I was able to find a work around to this by making sure that the clrSignpostTrigger is a button. Not ideal since it requires some styling workarounds, but it works for now.

<clr-combobox-container>
  <label>
    Form label
    <clr-signpost>
      <button clrSignpostTrigger>Trigger</button> <!-- This works if it is a button -->
      <clr-signpost-content *clrIfOpen>
        Signpost content
      </clr-signpost-content>
    </clr-signpost>
  </label>
  <clr-combobox formControlName='comboControl'>
    ...
  </clr-combobox>
</clr-combobox-container>

[kevinbuhmann]

The clrSignpostTrigger should be a button, not a div, because it is a clickable/interactive element.

[kevinbuhmann]

Not ideal since it requires some styling workarounds, but it works for now.

Sorry, I missed this part. I will reopen.

[smsalisbury]

The clrSignpostTrigger should be a button, not a div, because it is a clickable/interactive element.

This makes sense semantically. I see now in the documentation that the examples only use button tags, although the requirement that clrSignpostTrigger be a button is not explicitly called out in the documentation. I guess I was just confused because other tags worked in previous versions.

For styling, it also makes sense that the trigger is usually styled like a Clarity button (e.g. <button class="btn btn-link btn-icon">). But that kind of styling doesn't quite fit in a form control label with the padding and margins that buttons come with. For my use, I simply stripped out the padding/margins on the button and changed the color, but I don't know if that's the right solution in all cases.

[Jinnie]

Using button or a elements is just the safest way.

ng-clarity/projects/angular/src/data/datagrid/utils/key-navigation-grid.controller.ts

Line 12 in 895bb00

const tabableSelector = [

Here you can see the selectors of what do we consider actionable elements.
A div with tabindex=0 is okay too, though you will still need to add role=button.

[kumar-tadepalli]

I was able to find a work around to this by making sure that the clrSignpostTrigger is a button. Not ideal since it requires some styling workarounds, but it works for now.

<clr-combobox-container>
  <label>
    Form label
    <clr-signpost>
      <button clrSignpostTrigger>Trigger</button> <!-- This works if it is a button -->
      <clr-signpost-content *clrIfOpen>
        Signpost content
      </clr-signpost-content>
    </clr-signpost>
  </label>
  <clr-combobox formControlName='comboControl'>
    ...
  </clr-combobox>
</clr-combobox-container>

We cannot use info cds-icon with this workaround right?