Skip to content

Add Boolean and or wrapping class for HS forms to hide labels in an accessible way #90

@TheWebTech

Description

@TheWebTech

I have been using this code to hide labels without killing accessibility completely, we can roll it into the framework's cs-defaults.css and make it optional via boolean in the theme-variables.css file as well as have a class that can trigger it as well if a site is supposed to only do it in specific scenarios.

If anyone feels like doing the honors of implementing this go for it! :)

form.hs-form label span {
    position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

form.hs-form label.hs-form-radio-display span {
    display: inline-block;
}

Note this would still require the marketer to manually set the placeholders. If we can find a way to even have an auto placeholder feature if labels are hidden and one doesn't exist - that'd be way cool
Only concern is that react forms might clear the placeholder

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions