How to assign aria-control numbers in list.html

support
1

Hello Hugo!

I need to assign unique aria-control ID’s to content blocks in list.html (to trigger accordions to open on-click). What’s the best way to approach this?

{{ range .Paginator.Pages }}

{{ .Params.intro }}

<ul class="usa-accordion mw8">
  <li>
    <button class="usa-accordion-button"
      aria-expanded="false"
      aria-controls="***">
      Read More
    </button>
    <div id="***" class="ph0 usa-accordion-content">
      {{ .Content | replaceRE "<p>" "<p class=\"\">" | safeHTML }}
    </div>
  </li>
</ul>
  
{{ end }}
2

Perhaps the simplest way to achieve what you want would be write those paragraphs in html markup directly in your content files. Html is valid in markdown files.

3

Thanks for the reply @alexandros. I failed to mention this site is hooked up with Netlify’s CMS so content will be continually added via the CMS. I was hoping I could assign a unique ID via the content ID or by simply setting a counter for the first piece of content equal to “1” and counting up for each new piece of content.

For the moment I’m using the .Params.date which works but is — I expect — an ugly hack and not an acceptable solution? It simply sets the same unique ID to the accordion button and content which makes multiple according sections on the same page work, but again it looks ugly in the source code and I doubt meets accessibility standards.

{{ range .Paginator.Pages }}

{{ .Params.intro }}

  <ul class="usa-accordion mw8">
    <li>
      <button class="usa-accordion-button"
        aria-expanded="false"
        aria-controls="{{ .Params.date }}">
        Read More
      </button>
    <div id="{{ .Params.date }}" class="ph0 usa-accordion-content">
      {{ .Content | replaceRE "<p>" "<p class=\"\">" | safeHTML }}
    </div>
  </li>
</ul>
  
{{ end }}