[Accessibility Issue] Duplicate IDs in rendered content from module snippets

Develop, Build & Integrate CMS Development
1

If i have 2 fields in a module for example a plain text - title and a rich text - text field

{% inline_text field="title" value="{{ module.title }}" %}
{% inline_rich_text field="text" value="{{ module.text }}" %}

The content rendered on the page inculdes duplicate IDs:

<div id="hs_cos_wrapper_widget_1632126977537_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_text" data-hs-cos-field="title">Title text here</div>

<div id="hs_cos_wrapper_widget_1632126977537_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_rich_text" data-hs-cos-field="text"><p>Rich Text here.</p></div>

The ID just seems to be the module id with an underscore, presumably it should have something after the underscore to make it unique
This fails on 2 parts firstly it’s not allowed just in general w3c standards although it obviously doesn’t actually break anything
But the bigger one is it fails accessibility wcag 2.1 specification which is required by law in certain areas and sectors.

This needs to be fixed

2

Hi @matt_scott ,

I agree that this is an issue, however, you can resolve it yourself for now.

Check out this post that describes how you can prevent the wrapper from being set. That way, you can define your own wrappers for this module instead.

3

Thanks I did know you can do this but I hoped it would be something hubspot can fix, looks like I’ve got to go through updating all my modules…
I also thought hubspot recommends using the wrapper so it works better with the visual editor

4

I hoped it would be something hubspot can fix

@matt_scott considering the half decade old problems that still exist in this CMS… That’s a hard no.h This is the state of normalcy you can expect with HubSpot development.

If you’re worried about accessibility … Hubspot isn’t the place. No matter how much custom deb you try to do and things you try to fix - which is an entirely uphill battle in this CMS - you still won’t achieve anything of value because there are accessibility problems fundamentally baked in.

5

So much for accessibility is not a feature…

I’ve also found date picker fields in forms are also not keyboard accessible, they require a mouse to use, my workaround is to hide the field in the form settings then unhide it with js and turn it into a native browser date field. That’s not a solution that’s a hack!

6

@matt_scott

Lol… That’s the least of the problems you’ll find when you start digging. Like I said hubspot… Not the place for accessibility. Or really anything of value at all with regards to web development.

Their implementations are exceedingly novice and the ideas by the product team are even worse.

Don’t even get me started on performance and the remarkably poorly optimized JavaScript bundles served for things such as forms.

Oh and what’s really funny… You know that “don’t use jquery” toggle in site settings?

Some of their included JavaScript bundles load an ancient version of jquery. So even if you try to remove jquery from a HubSpot website you still can’t.

Each of those bundles is also 500kb. Even gzipped that’s still 150kb roughly. PER FEATURE. Absolite garbage. All of it.

7

I’ve not had that many issues, and not sure I’ve seen jquery added anywhere it shouldn’t, So i’ve had some input from someone at hubspot and firstly they are now looking into this to fix it
Also you can change the id by adding text in quotes after the initial tag e.g.

{% inline_text "tag-id-here" field="title" value="{{ module.title }}" %}

This will render as the current id with the tag name after the underscore e.g.

<div id="hs_cos_wrapper_widget_1632126977537_tag-id-here" ...

This will solve general modules but not within a repeater.
I did flag repeaters with them and they said they will fix for that too when they implement their solution

8

**@matt_scott**I’m aware of the “fix” you listed. My point was largely the fact it exists in the first place is… Lacking. Considering its level of triviality. It shows a lack of rudimentary testing. Which, again,is a repeated pattern if behavior. Whilst most development certainly occurs in an agile fashion having a repeated pattern of behavior at the core of a product isn’t quality.

This is precisely the reason development paradigms such as TDD exist.

Regardless, as long as it works for you and you feel helped that’s what’s important I suppose.