[patterns] guidelines for form fieldsets

[bennypowers]

Form pattern guidelines provides no guidance for fieldsets. We should provide styling and usage guidelines.

References

• <fieldset> on MDN
• fieldset element specification
• WAI tutorial on grouping form controls
• WCAG 2.1 Technique H71

Example HTML

<form id="form">
  <!-- see https://ux.redhat.com/patterns/form/ for design guidelines-->

  <fieldset>
    <legend>Environment Configuration</legend>
    <label for="kubeConfigPath">Path of KubeConfig file:</label>
    <pf-text-input id="kubeConfigPath"
                   name="kubeConfigPath"
                   required
                   pattern="\/"
                   placeholder="/home/username/project/kubeconfig.yml"></pf-text-input>
  </fieldset>

  <fieldset>
    <legend>TNF Configuration</legend>

    <label for="targetNameSpaces">Target Namespaces</label>
    <pf-text-input id="targetNameSpaces"
                   name="targetNameSpaces"></pf-text-input>

    <label for="podsUnderTestLabels"">podsUnderTestLabels:</label>
    <pf-text-input id="podsUnderTestLabels"
                   name="podsUnderTestLabels"
                   placeholder="test-network-function.com/generic: target"></pf-text-input>
  </fieldset>

  <fieldset>
    <legend>Select a Test</legend>
    <label>
      <input type="checkbox"
             value="lifecycle"
             name="selectedOptions"> Lifecycle
    </label>
    <label>
      <input type="checkbox"
             value="certification"
             name="selectedOptions"> Certification
    </label>
    <label>
      <input type="checkbox"
             value="access-control"
             name="selectedOptions"> Access Control
    </label>
  </fieldset>

  <rh-button type="submit">Run Certification Test</rh-button>
</form>

[markcaron]

@bennypowers @nikkimk @zeroedin do you all think adding Subnavigation to the patterns pages would help us better organize all of the information?

I'm thinking of the following 4 "tabs":

1. Overview
2. Style
3. Guidelines
4. Accessibility

I'm thinking that it's possible that there will be a Code "tab" in the future as well.

With that, I think these guidelines for form fieldsets would go under Guidelines.

[bennypowers]

looping in @coreyvickery @markcaron for visual styling guidelines

[zeroedin]

do you all think adding Subnavigation to the patterns pages would help us better organize all of the information?

Yup. They contain all the same style content including a code tab in the future as we start to flesh out the patterns themselves in code, given grid and any other helper classes created as part of the Create typography and base styles for design system