Skip to content

WCAG - Aria Attributes #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
milospp wants to merge 13 commits into
base: main
Choose a base branch
from
Open

WCAG - Aria Attributes #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
87078b6
Added aria attributes, aria-label, aria-labelledby, labels
milospp Apr 3, 2026
24acf26
Updated aria current in alphabet filter for People, Organisation, Res…
milospp Apr 4, 2026
f9ad84d
Added aria-current polite when there is no data in filter (browseByVC…
milospp Apr 6, 2026
6eff953
Fixed no-individuals aria-live pt2
milospp Apr 6, 2026
07fbedd
Removed redudant role section in section tag
milospp Apr 6, 2026
40e82c8
Added sr-only class
milospp Apr 6, 2026
90ac0f6
Fixed no-individuals screen reader in browseByVClass
milospp Apr 6, 2026
2b8a400
Added aria attr to search list download modal
milospp Apr 7, 2026
4dca7ab
WCAG Pagination in search
milospp Apr 7, 2026
fdafe78
Added aria tahs to propertyGroup and removed redudant role and alt tags
milospp Apr 7, 2026
284ada1
Removed all role="input" because it's shouldn't be used with <input> …
milospp Apr 7, 2026
6833a46
Language Menu aria attrs
milospp Apr 7, 2026
179c54a
Added capitalization function
milospp Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions home/src/main/resources/rdf/i18n/en_US/interface-i18n/firsttime/vitro_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5566,6 +5566,14 @@ uil-data:page.Vitro
uil:hasKey "page" ;
uil:hasPackage "Vitro-languages" .

uil-data:pagination.Vitro
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Pagination"@en-US ;
uil:hasApp "Vitro" ;
uil:hasKey "pagination" ;
uil:hasPackage "Vitro-languages" .

uil-data:type_more_characters.Vitro
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
12 changes: 12 additions & 0 deletions webapp/src/main/webapp/css/vitro.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,18 @@
clear: both;
}

/* SCREEN READER ONLY */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

/* <------ INDEX PAGE*/
.siteMap h2 {
padding-bottom: 0;
Expand Down
6 changes: 6 additions & 0 deletions webapp/src/main/webapp/js/individual/propertyGroupControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ $(document).ready(function(){
$.each($('li.selectedGroupTab'), function() {
$(this).removeClass("selectedGroupTab clickable");
$(this).addClass("nonSelectedGroupTab clickable");
$(this).attr("aria-selected", "false");
});
$propertyGroupLi.removeClass("nonSelectedGroupTab clickable");
$propertyGroupLi.addClass("selectedGroupTab clickable");
$propertyGroupLi.attr("aria-selected", "true");
}
if ( $propertyGroupLi.attr("groupname") == "viewAll" ) {
processViewAllTab();
Expand Down Expand Up @@ -79,9 +81,11 @@ $(document).ready(function(){
// select the correct tab
$('li[groupName="' + tabName + '"]').removeClass("nonSelectedGroupTab clickable");
$('li[groupName="' + tabName + '"]').addClass("selectedGroupTab clickable");
$('li[groupName="' + tabName + '"]').attr("aria-selected", "true");
// deselect the first tab
$firstTab.removeClass("selectedGroupTab clickable");
$firstTab.addClass("nonSelectedGroupTab clickable");
$firstTab.attr("aria-selected", "false");
$('section.property-group:visible').hide();
// show the selected tab section
$('section#' + tabName).show();
Expand Down Expand Up @@ -168,9 +172,11 @@ $(document).ready(function(){
var $firstTab = $('li.clickable').first();
$firstTab.removeClass("selectedGroupTab clickable");
$firstTab.addClass("nonSelectedGroupTab clickable");
$firstTab.attr("aria-selected", "false");
// select the stored tab
$("li[groupName='" + groupName + "']").removeClass("nonSelectedGroupTab clickable");
$("li[groupName='" + groupName + "']").addClass("selectedGroupTab clickable");
$("li[groupName='" + groupName + "']").attr("aria-selected", "true");
// hide the first tab section
$('section.property-group:visible').hide();

Expand Down
10 changes: 8 additions & 2 deletions webapp/src/main/webapp/js/languageMenuUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,19 @@ $(function() {
$("ul.language-dropdown li#language-menu").on("mouseenter", function(){
$("a#lang-link").html(theText);
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
$('ul:first',this)
.css('visibility', 'visible')
.attr('aria-hidden', 'false');
$(this).attr('aria-expanded', 'true');
$("ul.language-dropdown ul.sub_menu li").css('width', ($("ul.language-dropdown").width() - 4) + 'px');

}).on("mouseleave", function(){
$("a#lang-link").html(imgHTML);
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
$('ul:first',this)
.css('visibility', 'hidden')
.attr('aria-hidden', 'true');
$(this).attr('aria-expanded', 'false');
});

$("ul.language-dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
Expand Down
37 changes: 24 additions & 13 deletions webapp/src/main/webapp/js/menupage/browseByVClass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ var browseByVClass = {
this.alphaIndexLinks = $('#alpha-browse-individuals li a');
this.individualsInVClass = $('#individuals-in-class ul');
this.individualsContainer = $('#individuals-in-class');
this.individualsListInfo = $('#individuals-list-info');
},

// Event listeners. Called on page load
Expand Down Expand Up @@ -176,11 +177,13 @@ var browseByVClass = {
pagination += '<li class="round';
// Test for active page
if ( pages[i].text == page) {
pagination += ' selected';
pagination += ' selected" aria-current="page"';
anchorOpen = "";
anchorClose = "";
} else {
pagination += '"';
}
pagination += '" role="listitem">';
pagination += ' role="listitem">';
pagination += anchorOpen;
pagination += pages[i].text;
pagination += anchorClose;
Expand All @@ -197,10 +200,14 @@ var browseByVClass = {
// Toggle the active class so it's clear which is selected
selectedVClass: function(vclassUri) {
// Remove active class on all vClasses
$('#browse-classes li a.selected').removeClass('selected');
$('#browse-classes li a.selected')
.removeClass('selected')
.removeAttr('aria-current');

// Add active class for requested vClass
$('#browse-classes li a[data-uri="'+ vclassUri +'"]').addClass('selected');
$('#browse-classes li a[data-uri="'+ vclassUri +'"]')
.addClass('selected')
.attr('aria-current', 'true');
},

// Toggle the active letter so it's clear which is selected
Expand All @@ -210,18 +217,23 @@ var browseByVClass = {
alpha = "all";
}
// Remove active class on all letters
$('#alpha-browse-individuals li a.selected').removeClass('selected');
// Remove active class and aria-selected on all letters
$('#alpha-browse-individuals li a.selected')
.removeClass('selected')
.removeAttr('aria-current');

// Add active class for requested alpha
$('#alpha-browse-individuals li a[data-alpha="'+ alpha +'"]').addClass('selected');
// Add active class and aria-selected for requested alpha
$('#alpha-browse-individuals li a[data-alpha="'+ alpha +'"]')
.addClass('selected')
.attr('aria-current', 'true');

return alpha;
},

// Wipe the currently displayed individuals, no-content message, and existing pagination
wipeSlate: function() {
browseByVClass.individualsInVClass.empty();
$('p.no-individuals').remove();
browseByVClass.individualsInVClass.children(':not(#individuals-list-info)').remove();
$('#individuals-list-info > .no-individuals').remove();
$('.pagination').remove();
},

Expand All @@ -233,12 +245,11 @@ var browseByVClass = {
var alpha = this.selectedAlpha(alpha);

if ( alpha != "all" ) {
nothingToSeeHere = '<p class="no-individuals">' + browseByVClass.thereAreNoEntriesStartingWith + ' <em>'+ alpha.toUpperCase() +'</em>.</p> <p class="no-individuals">' + browseByVClass.tryAnotherLetter + '</p>';
nothingToSeeHere = '<p class="no-individuals aria-atomic="true">' + browseByVClass.thereAreNoEntriesStartingWith + ' '+ alpha.toUpperCase() +'.</p> <p class="no-individuals">' + browseByVClass.tryAnotherLetter + '</p>';
} else {
nothingToSeeHere = '<p class="no-individuals">' + browseByVClass.thereAreNoEntriesStartingWith + '</p> <p class="no-individuals">' + browseByVClass.selectAnotherClass + '</p>';
nothingToSeeHere = '<p class="no-individuals" aria-atomic="true">' + browseByVClass.thereAreNoEntriesStartingWith + '</p> <p class="no-individuals">' + browseByVClass.selectAnotherClass + '</p>';
}

browseByVClass.individualsContainer.prepend(nothingToSeeHere);
browseByVClass.individualsListInfo.append(nothingToSeeHere);
}

};
Expand Down
44 changes: 31 additions & 13 deletions webapp/src/main/webapp/js/searchDownload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,45 @@
$(document).ready(function(){

function configSlider() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 10,
max: 1000,
value: 500,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
$('#csvDownload').attr("href", urlsBase + '/search?' + queryText +'&csv=1&documentsNumber=' + ui.value);
$('#xmlDownload').attr("href", urlsBase + '/search?' + queryText +'&xml=1&documentsNumber=' + ui.value);

$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 10,
max: 1000,
value: 500,
slide: function(event, ui) {
$("#amount").val(ui.value);
$('#csvDownload').attr("href", urlsBase + '/search?' + queryText + '&csv=1&documentsNumber=' + ui.value);
$('#xmlDownload').attr("href", urlsBase + '/search?' + queryText + '&xml=1&documentsNumber=' + ui.value);
// Update aria-valuenow on slide
$("#slider-vertical .ui-slider-handle").attr("aria-valuenow", ui.value);
$("#slider-vertical .ui-slider-range").attr("role", "presentation");
$("#slider-vertical .ui-slider-range").attr("aria-hidden", "true");

},
create: function(event, ui) {
// Set ARIA attributes on the slider handle after creation
var $handle = $("#slider-vertical .ui-slider-handle");
$handle.attr({
"role": "slider",
"aria-valuemin": 10,
"aria-valuemax": 1000,
"aria-valuenow": 500,
"aria-orientation": "vertical",
"aria-label": i18nStrings.downloadResultsMaxResultsSliderString
});
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
$("#amount").val($("#slider-vertical").slider("value"));
}

setTooltip("#downloadIcon", {
title: '<div class="clearfix"><div style="float:right; width:150px;border-left: 1px solid #A6B1B0; padding: 3px 0 0 20px">'
+'<p><label for="amount" style="font-size:14px;">Maximum Records:</label>'
+'<input disabled type="text" id="amount" style="margin-left:35px; border: 0; color: #f6931f; font-weight: bold; width:45px" /></p>'
+'<div id="slider-vertical" style="margin-left:52px; margin-top: -20px; height: 100px; background-color:white"></div>'
+'<br /><a class="close" href="#">close</a></div>'
+'<div id="slider-vertical" aria-label="Adjust maximum number of records" style="margin-left:52px; margin-top: -20px; height: 100px; background-color:white"></div>'
+'<br aria-hidden="true"/><a class="close" href="#">close</a></div>'
+'<div style="float:left; font-size:14px; width:280px; padding: 3px 0 0 20px"><p><label>Download the results from this search</label></p> '
+'<p class ="download-url"><a id=xmlDownload href="' + urlsBase + '/search?' + queryText +'&amp;xml=1&amp;documentsNumber=500">download results in XML format</a></p>'
+'<p class ="download-url"><a id=csvDownload href="' + urlsBase + '/search?' + queryText +'&amp;csv=1&amp;documentsNumber=500">download results in CSV format</a></p>'
Expand Down
10 changes: 8 additions & 2 deletions webapp/src/main/webapp/js/userMenu/userMenuUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ $(function(){

$("ul.dropdown li").on("mouseenter", function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
$('ul:first',this)
.css('visibility', 'visible')
.attr('aria-hidden', 'false');
$(this).attr('aria-expanded', 'true');
if ( $('ul.dropdown').width() > 88 ) {
$('ul:first li',this).css('width', ($("ul.dropdown").width() - 22) + 'px');
}
Expand All @@ -13,7 +16,10 @@ $(function(){
}).on("mouseleave", function(){

$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
$('ul:first',this)
.css('visibility', 'hidden')
.attr('aria-hidden', 'true');
$(this).attr('aria-expanded', 'false');

});

Expand Down
2 changes: 2 additions & 0 deletions webapp/src/main/webapp/js/vitroUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ $(document).ready(function(){
//$(this).css('background','url(../../themes/vivo-cornell/images/filteredSearchActive.gif) no-repeat right top');
$(this).removeClass('filter-default');
$(this).addClass('filter-active');
$(this).attr('aria-expanded', 'true');

//Reveal filter select list
$searchFilterList.css('display','block');
Expand All @@ -40,6 +41,7 @@ $(document).ready(function(){
//$('a.filter-search').css('background','url(../../themes/vivo-cornell/images/filteredSearch.gif) no-repeat right top');
$(this).removeClass('filter-active');
$(this).addClass('filter-default');
$(this).attr('aria-expanded', 'false');

//Hide filter select list
$searchFilterList.css('display','none');
Expand Down
10 changes: 5 additions & 5 deletions webapp/src/main/webapp/templates/freemarker/body/accounts/userAccounts-add.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,13 @@
<section id="add-account" role="region">
<form method="POST" action="${formUrls.add}" class="customForm" role="add new account">
<label for="email-address">${strings.email_address}<span class="requiredHint"> *</span></label>
<input type="text" name="emailAddress" value="${emailAddress}" id="email-address" role="input" />
<input type="text" name="emailAddress" value="${emailAddress}" id="email-address" />

<label for="first-name">${strings.first_name}<span class="requiredHint"> *</span></label>
<input type="text" name="firstName" value="${firstName}" id="first-name" role="input" />
<input type="text" name="firstName" value="${firstName}" id="first-name" />

<label for="last-name">${strings.last_name}<span class="requiredHint"> *</span></label>
<input type="text" name="lastName" value="${lastName}" id="last-name" role="input" />
<input type="text" name="lastName" value="${lastName}" id="last-name" />

<#include "userAccounts-associateProfilePanel.ftl">

Expand All @@ -61,11 +61,11 @@
<#else>
<section id="passwordContainer" role="region">
<label for="initial-password">${strings.initial_password}<span class="requiredHint"> *</span></label>
<input type="password" name="initialPassword" value="${initialPassword}" id="initial-password" role="input" />
<input type="password" name="initialPassword" value="${initialPassword}" id="initial-password" />
<p class="note">${strings.minimum_password_length(minimumLength, maximumLength)}</p>

<label for="confirm-password">${strings.confirm_initial_password}<span class="requiredHint"> *</span></label>
<input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" role="input" />
<input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" />
</section>
</#if>

Expand Down
8 changes: 4 additions & 4 deletions webapp/src/main/webapp/templates/freemarker/body/accounts/userAccounts-createPassword.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@
<p>${strings.enter_new_password(userAccount.emailAddress)}</p>

<form method="POST" action="${formUrls.createPassword}" class="customForm" role="create password">
<input type="hidden" name="user" value="${userAccount.emailAddress}" role="input" />
<input type="hidden" name="key" value="${userAccount.emailKey}" role="input" />
<input type="hidden" name="user" value="${userAccount.emailAddress}" />
<input type="hidden" name="key" value="${userAccount.emailKey}" />

<label for="new-password">${strings.new_password}<span class="requiredHint"> *</span></label>
<input type="password" name="newPassword" value="${newPassword}" id="new-password" role="input" />
<input type="password" name="newPassword" value="${newPassword}" id="new-password" />

<p class="note">${strings.minimum_password_length(minimumLength, maximumLength)}</p>

<label for="confirm-password">${strings.confirm_password}<span class="requiredHint"> *</span></label>
<input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" role="input" />
<input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" />

<p><input type="submit" name="submit" value="${strings.save_changes}" class="submit"/></p>

Expand Down
10 changes: 5 additions & 5 deletions webapp/src/main/webapp/templates/freemarker/body/accounts/userAccounts-edit.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,13 @@
<section id="edit-account" role="region">
<form method="POST" action="${formUrls.edit}" id="userAccountForm" class="customForm" role="edit account">
<label for="email-address">${strings.email_address}<span class="requiredHint"> *</span></label>
<input type="text" name="emailAddress" value="${emailAddress}" id="email-address" role="input" />
<input type="text" name="emailAddress" value="${emailAddress}" id="email-address" />

<label for="first-name">${strings.first_name}<span class="requiredHint"> *</span></label>
<input type="text" name="firstName" value="${firstName}" id="first-name" role="input" />
<input type="text" name="firstName" value="${firstName}" id="first-name" />

<label for="last-name">${strings.last_name}<span class="requiredHint"> *</span></label>
<input type="text" name="lastName" value="${lastName}" id="last-name" role="input" />
<input type="text" name="lastName" value="${lastName}" id="last-name" />

<#if externalAuthPermitted??>
<#include "userAccounts-associateProfilePanel.ftl">
Expand All @@ -71,12 +71,12 @@
<#else>
<section id="passwordContainer" <#if externalAuthOnly?? >class="hidden"</#if> role="region">
<label for="new-password">${strings.new_password}</label>
<input type="password" name="newPassword" value="${newPassword}" id="new-password" role="input" />
<input type="password" name="newPassword" value="${newPassword}" id="new-password" />
<p class="note">${strings.minimum_password_length(minimumLength, maximumLength)}<br />
${strings.leave_password_unchanged}</p>

<label for="confirm-password">${strings.confirm_password}</label>
<input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" role="input" />
<input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" />
</section>
</#if>

Expand Down
10 changes: 5 additions & 5 deletions webapp/src/main/webapp/templates/freemarker/body/accounts/userAccounts-firstTimeExternal.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,17 @@
<p>${strings.please_provide_contact_information}</p>

<form method="POST" action="${formUrls.firstTimeExternal}" class="customForm" role="my account">
<input type="hidden" name="externalAuthId" value="${externalAuthId}" role="input" />
<input type="hidden" name="afterLoginUrl" value="${afterLoginUrl}" role="input" />
<input type="hidden" name="externalAuthId" value="${externalAuthId}" />
<input type="hidden" name="afterLoginUrl" value="${afterLoginUrl}" />

<label for="first-name">${strings.first_name}<span class="requiredHint"> *</span></label>
<input type="text" name="firstName" value="${firstName}" id="first-name" role="input" />
<input type="text" name="firstName" value="${firstName}" id="first-name" />

<label for="last-name">${strings.last_name}<span class="requiredHint"> *</span></label>
<input type="text" name="lastName" value="${lastName}" id="last-name" role="input" />
<input type="text" name="lastName" value="${lastName}" id="last-name" />

<label for="email-address">${strings.email_address}<span class="requiredHint"> *</span></label>
<input type="text" name="emailAddress" value="${emailAddress}" id="email-address" role="input" />
<input type="text" name="emailAddress" value="${emailAddress}" id="email-address" />

<#if emailIsEnabled??>
<p class="note">${strings.first_time_login_note}</p>
Expand Down
Loading
Loading