How To Remove Empty Link From Offcanvas Close Button In Shaper_stellar Template - Question | JoomShaper
Back to the questions

How To Remove Empty Link From Offcanvas Close Button In Shaper_stellar Template

Ralf Günther

Ralf Günther

Template 5 months ago

Dear JoomShaper Support Team,

I'm using the shaper_stellar template, and I've encountered an accessibility issue related to the offcanvas menu. Specifically, the close button uses the following markup:

html

<a href="#" class="close-offcanvas"><span class="fa fa-remove"></span></a>

This empty anchor tag (href="#") causes accessibility warnings and fails automated accessibility tests (e.g., WAVE, Axe) due to being a non-functional link.

I would like to know where exactly in the Helix Framework or template files I can find this element so I can modify or remove the empty link and replace it with a <button> element or another accessible structure.

I’ve already searched the template folders but couldn't locate the specific file responsible for rendering this element.

Could you please point me to the file or override where this element is generated?

Thank you in advance for your help!

0
1 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 months ago #196592

Hi Ralf,

similar question was a few days ago on forum. Yes, Easy to solve.

  1. Edit index.php file from your template folder.

  2. Find line where you have: <a href="#" class="close-offcanvas">

  3. use HTML or Text editor and customize that line into: <a href="#" aria-label="Close Mobile Menu" title="Close" class="close-offcanvas">

  4. If your site is in German or Spanish etc., translate aria-label phrase.

  5. Save changes or upload changed file.

Then Accessibility Tester like Wave will not show "error" anymore ;]

Whole guide: https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-correct-the-empty-link-inside-offcanvas-close-button-in-the-helix-template

0