Duplicate ID attributes in rendered HTML

Developer Support CMS Development
1

Hi there!

I’m working on some accessibility optimizations using axe DevTools (as recommended in HubSpot CMS for Developers II: Best Practices), and I’ve come across an odd thing. It seems that the rendered HTML is not correctly outputting the IDs of my modules, resulting in duplicate IDs and therefore failing axe DevTools scans.

Main Template HTML/HubL:

<body>
 <main class="content">
 {% dnd_area "body_dnd_area" %}
 {% include_dnd_partial "HeroStrip" path='/practicum-theme-ii/sections/heroSection.html' context={} 
 %}
 {% end_dnd_area %}
 </main> 
</body>

Section HTML/HubL:

{% dnd_section "dnd" 
vertical_alignment='MIDDLE',
 max_width=1080,
 min_width=900
%}
 {% dnd_column "col1" offset=0; width=6; %}
 {% dnd_row "row1" offset=0; width=12;%}
 {% dnd_module "hero-image"
 path="/practicum-theme/modules/heroImage.module"
 %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_column "col2" offset=6; width=6;%}
 {% dnd_row "row2" offset=0; width=12;%}
 {% dnd_module "hero-text"
 path="/practicum-theme/modules/heroText.module"
 %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}

heroText Module HTML/HubL:

<div class="stripTextModule">
 <div class="stripContent"> 
 <div class="stripText">
 {% inline_rich_text "hello-there" field="hero_sub_heading" value="{{ module.hero_sub_heading }}" %}
 {% inline_rich_text "general-kenobi" field="hero_text" value="{{ module.hero_text }}" %}
 </div>
 </div>
</div>

However, the rendered HTML uses generic IDs as below…

id="hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_" 

 <div id="hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_" 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="hero_sub_heading"><h3>Hero Sub Heading (H3)</h3></div>↩
 <div id="hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_" 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="hero_text"><p>Lorem ipsum.........

In the above code snippet, you can see that id=“hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_” is used twice, which is causing the flag on axe DevTools.

A similar thread I found is below:

https://community.hubspot.com/t5/CMS-Development/Accessibility-Issue-Duplicate-IDs-in-rendered-content-from/m-p/526833

I also tried adding the “no_wrapper” parameter as outlined here, resulting in the following module code, which, when rendered, still did not solve the issue.

<div class="stripTextModule">
 <div class="stripContent"> 
 <div class="stripText">
 {% inline_rich_text "hi" field="hero_sub_heading" value="{{ module.hero_sub_heading }}", no_wrapper=True %}
 {% inline_rich_text "hello" field="hero_text" value="{{ module.hero_text }}", no_wrapper=True %}
 </div>
 </div>
</div>

Does anyone have any idea how to fix this? I’m banging my head against it and I’m not sure if it’s me or Hubspot/HubL itself!

2

Hi Minccisco,

It seems like the rendered HTML is not correctly outputting the IDs of the modules, resulting in duplicate IDs and failing axe DevTools scans. The code snippet shows that “id=hs_cos_wrapper_body_dnd_area-dnd_partial-2-module-4_” is used twice, causing the flag on axe DevTools. Adding the “no_wrapper” parameter may not solve the issue. It is suggested to try renaming the IDs of the modules to be unique, using a unique identifier or index to distinguish them. This should help fix the accessibility issue of duplicate ID attributes in the rendered HTML.

Regards,

Bryce

3

Hi Bryce! Thanks for replying!

So I thought I’d assigned unique names? At the moment they’re set as “hello-there” and “general-kenobi”… is there another way to do this?

{% inline_rich_text "hello-there" field="hero_sub_heading" value="{{ module.hero_sub_heading }}" %}

{% inline_rich_text "general-kenobi" field="hero_text" value="{{ module.hero_text }}" %}

Please let me know if I’ve done it wrong haha!

Thanks again!