Skip to content

Commit 4dd5cac

Browse files
Improve accessibility - remove inappropriate role="presentation" on tabs (#7534)
#### Rationale We are inappropriately tagging our folder portal tabs with `role="presentation"`. You're not allowed to use it on an `<li>` without a similar tag on a parent element like the `<ul>`. Since these tabs are full-page navigations instead of in-page replacements, it seems the most appropriate thing is to simply remove this incorrect attribute. https://www.w3.org/WAI/ARIA/apg/practices/hiding-semantics/ #### Changes - Remove `role="presentation"` from folder portal tabs - Signify the active tab using `aria-current="page"` <!-- list of standard tasks (remove this comment to enable) #### Tasks 📍 - [ ] Manual Testing - [ ] Needs Automation - [ ] Verify Fix -->
1 parent 49c3073 commit 4dd5cac

1 file changed

Lines changed: 5 additions & 5 deletions

File tree

core/src/org/labkey/core/view/template/bootstrap/navigation.jsp

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@
114114
if (show && null != tab.getText() && !tab.getText().isEmpty())
115115
{
116116
%>
117-
<li role="presentation" class="<%= unsafe(tab.isSelected() ? "active" : "") %>">
118-
<a href="<%=h(tab.getHref())%>" id="<%=h(tab.getText().replace(" ", ""))%>Tab">
117+
<li class="<%= unsafe(tab.isSelected() ? "active" : "") %>">
118+
<a href="<%=h(tab.getHref())%>" id="<%=h(tab.getText().replace(" ", ""))%>Tab"<%= unsafe(tab.isSelected() ? " aria-current=\"page\"" : "") %>>
119119
<% if (tab.isDisabled()) { %>
120120
<i class="fa fa-eye-slash"></i>
121121
<% } %>
@@ -141,7 +141,7 @@
141141
{
142142
HtmlString plus = HtmlString.unsafe("<i class=\"fa fa-plus\" style=\"font-size: 12px;\"></i>");
143143
%>
144-
<li role="presentation">
144+
<li>
145145
<%=simpleLink(plus).id("addTab").title("Add New Tab").onClick("LABKEY.Portal.addTab();")%>
146146
</li>
147147
<%
@@ -160,7 +160,7 @@
160160
if (tab.isSelected())
161161
{
162162
%>
163-
<li role="presentation" class="dropdown active">
163+
<li class="dropdown active">
164164
<a data-target="#" class="dropdown-toggle" data-toggle="dropdown">
165165
<%=h(tab.getText())%>&nbsp;
166166
<span class="fa fa-chevron-down" style="font-size: 12px;"></span>
@@ -181,7 +181,7 @@
181181
{
182182
%>
183183
<li>
184-
<a href="<%=h(tab.getHref())%>">
184+
<a href="<%=h(tab.getHref())%>"<%= unsafe(tab.isSelected() ? " aria-current=\"page\"" : "") %>>
185185
<% if (tab.isSelected())
186186
{
187187
%><b><%=h(tab.getText())%></b><%

0 commit comments

Comments
 (0)