Skip to content

Commit

Permalink
Use generic div element for tabspanel
Browse files Browse the repository at this point in the history
Sections when they have an accessible name create landmarks.

> The use of region landmarks should be limited, as too many landmarks can dilute their usefulness in quickly navigating to important areas of a page. If you find there are many landmarks, especially generic regions existing in a single page, then the page’s structure should be reexamined.

- https://www.scottohara.me/blog/2018/03/03/landmarks.html

Also, when the component has not be enhanced these sections do not have
accessible names so it means they are the equivalent of a div already.

When they're enhanced they're given a role of tabpanel, so they're no
longer a section.

Given this I'm not sure it was ever useful and by making them generic
divs we can avoid HTML validators warning about this component.

Closes #1339
  • Loading branch information
NickColley committed Feb 25, 2020
1 parent f0c0f8f commit b933920
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/govuk/components/tabs/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
{% for item in params.items %}
{% if item %}
{% set id = item.id if item.id else idPrefix + "-" + loop.index %}
<section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
<div class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
{{ item.panel.html | safe if item.panel.html else item.panel.text }}
</section>
</div>
{% endif %}
{% endfor %}
</div>

0 comments on commit b933920

Please sign in to comment.