I am working on improving the accessibility on a web page that is using Thymeleaf (version 3.0.11.RELEASE) and would like to add an aria-label attribute to a hyperlink. The current version of the code snippet which gives me a parse error looks something like:
<dd th:each="facet : ${facetField.values}">
<a th:with="facetParams=|${facetField.name.replace('_facet', '')}="${facet.name}"|"
th:href="@{${path}(c=${page.size}, fq=${facetParam})}${snapshotUrlParams}${collection}|"
th:aria-label="the ${facet.name} facet in the ${collection} collection has ${facet.count} hits"
th:text="${facet.name.toUpperCase()}" />
<span class="facetCount" aria-hidden="true" th:text="|(${#numbers.formatInteger(facet.count, 0, 'COMMA')})|" />
</dd>
The parser doesn't like the th:aria-label line. I have also tried th:attr="aria-label=...etc...". It is possible that I've used the wrong syntax or characters to specify my string. I've been through several iterations; I'll either get a parse error or the arguments don't expand into actual values, which is what I'm looking to happen. Any help would be greatly appreciated!
Not sure what you tried, but this is working for me:
th:attr="aria-label=|the ${facet.name} facet in the ${collection} collection has ${facet.count} hits|"
The complete would look like this (though I didn't test the rest of your attributes).
<dd th:each="facet : ${facetField.values}">
<a th:with="facetParams=|${facetField.name.replace('_facet', '')}="${facet.name}"|"
th:href="@{${path}(c=${page.size}, fq=${facetParam})}${snapshotUrlParams}${collection}|"
th:attr="aria-label=|the ${facet.name} facet in the ${collection} collection has ${facet.count} hits|"
th:text="${facet.name.toUpperCase()}" />
<span class="facetCount" aria-hidden="true" th:text="|(${#numbers.formatInteger(facet.count, 0, 'COMMA')})|" />
</dd>