kethinov / semanticforms Goto Github PK

If someone finds 16px too small and changes the default font size in the browser, these form fields will stay fixed.

h/t

Needs more CSS love and attention.

Instead of hardcoding it to two columns.

Should turn fields red.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Probably use visually hidden to preserve accessibility tree.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Need to output two files, e.g.

• semanticForms.css has SVG images embedded in the CSS
• semanticForms-bare.css has no SVG images embedded in the CSS (requires user to set them)

Given:

<form id="" action='/somewhere' method='post' class='semanticForms' data-clearfield-horizontal-offset='25' data-clearfield-vertical-offset='5'>
  <fieldset>
    <dl>
      <dt>
        <label for='statusReportedInput'>Status Reported</label>
      </dt>
      <dd>
        <input id='statusReportedInput' name='statusReportedInput' type='checkbox'>
      </dd>
    </dl>
    <input type='submit' name='submit' id='save' value='Save'>
    <input type='submit' name='cancel' id='cancel' value='Cancel'>
  </fieldset>
</form>

The following error is produced:
DOMException: Failed to execute 'querySelector' on 'Document': 'label[data-for=]' is not a valid selector.

Originating from line 59 of semanticforms.js

Might be better for accessibility.

I'd love to have a discussion to what a good UI pattern would look like to display the accepted pattern in a form element.

We could try and fit it next to the floating label assuming the label wasn't too long.

At present, these JS events could stand to be a bit more defensive.

It would be preferable to return false on them immediately if the target element is not within a form element of class semanticForms. That restriction will prevent the events from firing in a context where they're not needed.

In the original version of this project, those events were just attached directly to the input elements that needed them, but this turned out to be inadequate because if you added more form elements to the DOM after this library's JS executes, the newly added form elements wouldn't get the JS events.

Adding a global event listener to the body tag itself solves that problem, but introduces the problem of needing to make sure the event is defensive enough to not fire when not needed.

Returning false if the target element is not within a form element of class semanticForms should help, but I am certainly open to other suggestions as well.