Jump to content

Aria Label Error - "elements contain focusable descendents"

Recommended Posts

Hello!

I'm attempting to unhide and replace the aria labels on Squarespace-provided Slideshow buttons.

I added the below JS to Code Injection > Footer, but still running into same issue on PageSpeed Insights.

This is the affected website

Any thoughts?

image.thumb.png.418a87e46d3ba1087348d79ae077ba9f.png

<script>
// set button text as aria label
const buttons = document.querySelectorAll('button');
for (const button of buttons) {
  if (!button.hasAttribute('aria-label')) {
    button.setAttribute('aria-label', button.textContent);
  }
  if (!button.hasAttribute('aria-hidden')) {
    button.setAttribute('aria-label', button.textContent);
  }
}
</script>

 

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment
  • Replies 1
  • Views 491
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Update: I removed the code cited above since I was still receiving the error described above. The code was also throwing off the aria labels on my slideshow back/forward buttons.

Any thoughts on how to override the aria-hidden="true" code that's automatically programmed by Squarespace?

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.