Problem/Motivation

Form fields with bootstrap_storybook are not accessible good enough. The reason is, that the markup does not use proper HTML labels, that can be clicked and let the cursor jump into the form field. The theme currerntly makes use of a <legend> element instead, because it's wrapping each form element into a separate fieldset.

CommentFileSizeAuthor
Bildschirmfoto 2021-06-17 um 11.02.12.png63.7 KBszeidler

Comments

szeidler created an issue. See original summary.

  • doxigo committed 67275ed on 3.2.x 
    Issue #3219310 by szeidler: Form field labels do not use proper labels
doxigo’s picture

doxigo commented
Status: Active » Fixed

wrong comment

doxigo’s picture

doxigo commented
Status: Fixed » Active
doxigo’s picture

doxigo commented

Made multiple fixes for accessibility on fieldset on dev branch, please check and see if there's room for more

  • doxigo committed 3d33d41 on 3.2.x 
    Issue #3219310 by szeidler, doxigo: Form field labels do not use proper...
doxigo’s picture

doxigo commented
Status: Active » Fixed
szeidler’s picture

szeidler commented
Status: Fixed » Active

Thanks for the update. I think we're not 100% there yet, since <label for="form-element-id"> the label for attribute should include the id of the form element (e.g. input element). Then clicking on the label will make the cursor jump into that input field. That's core adds those attributes in template_preprocess_form_element_label() and twig makes use of them via <label{{ attributes.addClass(classes) }}>

doxigo’s picture

doxigo commented
Status: Active » Needs review

Thanks for the tip, I removed the hardcoded for and updated the dev release, please check and let me know if that is alright

  • doxigo committed 6f260fb on 3.2.x 
    Issue #3219310 by szeidler, doxigo: Form field labels do not use proper...
szeidler’s picture

szeidler commented
Status: Needs review » Fixed

Looks good. I'm closing this one.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.