How can I make the label an `h6`?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm trying to make the label Note (for your QSA) an h6 but I don't really know how to do that

Here's the part of the code I'm talking about.

I don't really think you can, minus editing the form gem you're using. Why not just give it a unique class and style it the same way as your h6. For example: h6, .specific-class { styles here }
magicmarkker 6 years ago
awarded to kc00l

Crowdsource coding tasks.

1 Solution

Winning solution

By overriding simple-form input you can make the label be a screen-reader-only element, add a h6 visible label and just use a normal textarea element:

<div class="row">
  <div class="col-md-8 col-md-offset-1">
    <div class="form-group>
      <h6>Note (for your QSA)</h6>      
      <%= f.label :note, class: 'control-label sr-only' %>
      <%= form.text_area :note,
        placeholder: "Share some details about how you meet this requirement with your QSA",
        rows: 6, class: "col-md-8"  %>
@kc00l what about setting f.label to false and putting <h6>Note (for your QSA)</h6> above the text area? Would that work?
apr 6 years ago
Removing a label for a form field reduces accessibility. That's why I use the sr-only class in order to make the label visible only for screen readers.
kc00l 6 years ago
If the h6 is above the form, how does it reduce accessibility for screen readers? Accessibility is important, I wish I had a screen reader to test it out.
apr 6 years ago
According to accessibility rules each form field must have a related label: <label for="field_id">Foo label</label><textarea id="field_id"></textarea>
kc00l 6 years ago