The "Follow Me - LP" module provided by HubSpot as a default module for CMS content is being updated to fix a couple of issues. This module is separate from the "Follow Me" module, and the "Follow Me - Email" module. The Follow me LP module is intended to be used on landing pages and landing page templates.
We will be updating the module's module.html which previously caused all of the social anchor links to have a duplicate id attribute.
The duplicate id is an accessibility issue and doesn't make it easier to style the icons.
Here's what the old code looked like:
The new code looks like:
As you'll notice we're dropping the id attribute and adding a new social-links__icon-–{{ network }} class that denotes the social network that it's for. If you need to style a specific social icon differently, you can use that class name to target that icon.
Additionally, we're making a change to how the instance specific CSS styles are applied. We're switching from using {{ name }} to the scope_css HubL tag to scope the CSS to the specific instance. We don't anticipate disruption as a result of the CSS changes.
Most HubSpot customers will be completely unaffected by this change. The only accounts that may be impacted are ones where developers have written custom code (CSS or JavaScript) targeting the id attribute for the social icon. Due to that attribute being duplicated previously, it was not a very useful way to target your code, so we expect the actual number of affected sites to be very minimal. If you are scoping your CSS that way, we would encourage using the class names instead.
While this change should not negatively impact the vast majority of HubSpot customers, we thought it best to communicate the change ahead of time in case developers want to check their CSS and JavaScript to see if it targets that id attribute. In 91 days, June 20th, 2022 the change will go into effect.
Have any questions about this change? Ask in the developer forums.