Skip to content

WCAG - Keyboard Navigation #4135

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 1 commit into
base: main
Choose a base branch
from
Open

WCAG - Keyboard Navigation #4135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 11 additions & 0 deletions ...app/edit/n3editing/configuration/generators/AddAuthorsToInformationResourceGenerator.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@

import javax.servlet.http.HttpSession;

import edu.cornell.mannlib.vitro.webapp.beans.Individual;
import edu.cornell.mannlib.vitro.webapp.i18n.I18n;
import edu.cornell.mannlib.vitro.webapp.i18n.I18nBundle;
import org.apache.jena.query.QueryExecution;
import org.apache.jena.query.QueryExecutionFactory;
import org.apache.jena.rdf.model.Model;
Expand Down Expand Up @@ -102,6 +105,14 @@ public EditConfigurationVTwo getEditConfiguration(VitroRequest vreq,
//NOITCE this generator does not run prepare() since it
//is never an update and has no SPARQL for existing

I18nBundle i18n = I18n.bundle(vreq);
String title = i18n.text("manage_authors");
Individual subject = vreq.getWebappDaoFactory().getIndividualDao().getIndividualByURI(editConfiguration.getSubjectUri());
if( subject != null && subject.getName() != null ){
title += " - " + subject.getName();
}
editConfiguration.addNewResource("pageTitle", title);

return editConfiguration;
}

Expand Down
11 changes: 11 additions & 0 deletions ...app/edit/n3editing/configuration/generators/AddEditorsToInformationResourceGenerator.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@

import javax.servlet.http.HttpSession;

import edu.cornell.mannlib.vitro.webapp.beans.Individual;
import edu.cornell.mannlib.vitro.webapp.i18n.I18n;
import edu.cornell.mannlib.vitro.webapp.i18n.I18nBundle;
import org.apache.jena.query.QueryExecution;
import org.apache.jena.query.QueryExecutionFactory;
import org.apache.jena.rdf.model.Model;
Expand Down Expand Up @@ -104,6 +107,14 @@ public EditConfigurationVTwo getEditConfiguration(VitroRequest vreq, HttpSession
// NOITCE this generator does not run prepare() since it
// is never an update and has no SPARQL for existing

I18nBundle i18n = I18n.bundle(vreq);
String title = i18n.text("manage_editors");
Individual subject = vreq.getWebappDaoFactory().getIndividualDao().getIndividualByURI(editConfiguration.getSubjectUri());
if( subject != null && subject.getName() != null ){
title += " - " + subject.getName();
}
editConfiguration.addNewResource("pageTitle", title);

return editConfiguration;
}

Expand Down
11 changes: 11 additions & 0 deletions .../webapp/edit/n3editing/configuration/generators/ManageWebpagesForIndividualGenerator.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

import javax.servlet.http.HttpSession;

import edu.cornell.mannlib.vitro.webapp.i18n.I18n;
import edu.cornell.mannlib.vitro.webapp.i18n.I18nBundle;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.jena.query.ParameterizedSparqlString;
Expand Down Expand Up @@ -98,6 +100,15 @@ public EditConfigurationVTwo getEditConfiguration(VitroRequest vreq, HttpSession
}else{
config.addFormSpecificData("subjectName", null);
}

String name = (String) config.getFormSpecificData().get("subjectName");
I18nBundle i18n = I18n.bundle(vreq);
String title = i18n.text("manage_web_pages");;
if (name != null && !name.isEmpty()) {
title += " - " + name;
}
config.addNewResource("pageTitle", title);

prepare(vreq, config);
return config;
}
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/de_DE/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5926,6 +5926,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Verwenden Sie die Pfeiltasten zur Navigation und Shift + Pfeiltasten, um Elemente nach oben oder unten zu verschieben."@de-DE ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} wurde an die Position {1} verschoben."@de-DE ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/en_CA/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5923,6 +5923,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Use Arrow keys to navigate, and Shift + Arrow keys to move items up or down."@en-CA ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} moved to position {1}."@en-CA ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/en_US/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5923,6 +5923,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Use Arrow keys to navigate, and Shift + Arrow keys to move items up or down."@en-US ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} moved to position {1}."@en-US ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/es/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5923,6 +5923,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Usa las teclas de flecha para navegar y Shift + flechas para mover los elementos hacia arriba o hacia abajo."@es ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} se movió a la posición {1}."@es ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/fr_CA/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5923,6 +5923,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Aucune page web n'est associée à cette personne. Ajouter une page web en cliquant sur le bouton ci-dessous."@fr-CA ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} a été déplacé à la position {1}."@fr-CA ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/pt_BR/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5923,6 +5923,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Use as teclas de seta para navegar e Shift + setas para mover os itens para cima ou para baixo."@pt-BR ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} foi movido para a posição {1}."@pt-BR ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/ru_RU/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5923,6 +5923,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Используйте клавиши со стрелками для навигации, а Shift + стрелки — для перемещения элементов вверх или вниз."@ru-RU ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} перемещён на позицию {1}."@ru-RU ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
16 changes: 16 additions & 0 deletions home/src/main/resources/rdf/i18n/sr_Latn_RS/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5922,6 +5922,22 @@ uil-data:has_no_webpages.VIVO
uil:hasKey "has_no_webpages" ;
uil:hasPackage "VIVO-languages" .

uil-data:arrow_key_reorder_note.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Koristite tastere sa strelicama za navigaciju, a Shift + strelice za pomeranje stavki nagore ili nadole."@sr-Latn-RS ;
uil:hasApp "VIVO" ;
uil:hasKey "arrow_key_reorder_note" ;
uil:hasPackage "VIVO-languages" .

uil-data:reorder_action_info.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "{0} je pomeren na poziciju {1}."@sr-Latn-RS ;
uil:hasApp "VIVO" ;
uil:hasKey "reorder_action_info" ;
uil:hasPackage "VIVO-languages" .

uil-data:through_today.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
11 changes: 9 additions & 2 deletions webapp/src/main/webapp/templates/freemarker/edit/forms/addAuthorsToInformationResource.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@

<h3>${i18n().manage_authors}</h3>

<div id="reorder-instructions" class="sr-only">
${i18n().arrow_key_reorder_note}
</div>
<div id="live-region" class="sr-only" aria-live="polite" aria-atomic="true"></div>

<ul id="dragDropList" ${ulClass}>

<script type="text/javascript">
Expand All @@ -64,7 +69,7 @@
<#assign authorUri = authorship.authorUri/>
<#assign authorName = authorship.authorName/>

<li class="authorship">
<li class="authorship" tabindex="0">
<#-- span.author will be used in the next phase, when we display a message that the author has been
removed. That text will replace the a.authorName, which will be removed. -->
<span class="authorship">
Expand Down Expand Up @@ -201,7 +206,9 @@ var i18nStrings = {
authorTypeText: '${i18n().author_capitalized?js_string}',
organizationTypeText: '${i18n().organization_capitalized?js_string}',
helpTextSelect: '${i18n().select_an_existing?js_string}',
helpTextAdd: '${i18n().or_add_new_one?js_string}'
helpTextAdd: '${i18n().or_add_new_one?js_string}',
errorRemovingWebpage: '${i18n().error_removing_webpage?js_string}',
reorderActionInfo: '${i18n().reorder_action_info?js_string}'
};

$(document).ready(function () {
Expand Down
11 changes: 9 additions & 2 deletions webapp/src/main/webapp/templates/freemarker/edit/forms/addEditorsToInformationResource.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@

<h3>${i18n().manage_editors}</h3>

<div id="reorder-instructions" class="sr-only">
${i18n().arrow_key_reorder_note}
</div>
<div id="live-region" class="sr-only" aria-live="polite" aria-atomic="true"></div>

<ul id="dragDropList" ${ulClass}>

<script type="text/javascript">
Expand All @@ -62,7 +67,7 @@
<#assign editorUri = editorship.editorUri/>
<#assign editorName = editorship.editorName/>

<li class="editorship">
<li class="editorship" tabindex="0">
<#-- span.editor will be used in the next phase, when we display a message that the editor has been
removed. That text will replace the a.editorName, which will be removed. -->
<span class="editor">
Expand Down Expand Up @@ -196,7 +201,9 @@ var i18nStrings = {
editorTypeText: '${i18n().editor_capitalized?js_string}',
organizationTypeText: '${i18n().organization_capitalized?js_string}',
helpTextSelect: '${i18n().select_an_existing?js_string}',
helpTextAdd: '${i18n().or_add_new_one?js_string}'
helpTextAdd: '${i18n().or_add_new_one?js_string}',
errorRemovingWebpage: '${i18n().error_removing_webpage?js_string}',
reorderActionInfo: '${i18n().reorder_action_info?js_string}'
};

$(document).ready(function () {
Expand Down
64 changes: 62 additions & 2 deletions webapp/src/main/webapp/templates/freemarker/edit/forms/js/addAuthorsToInformationResource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,10 +382,70 @@ var addAuthorForm = {

authorshipList.sortable({
cursor: 'move',
update: function(event, ui) {
addAuthorForm.reorderAuthors(event, ui);
});

authorshipList.on('sortupdate', (event, ui) => {
addAuthorForm.reorderAuthors(event, ui);
});

authorshipList.on('keydown', 'li', (e) => {
const $focused = $(e.currentTarget);
const $allItems = authorshipList.children('li');
const index = $allItems.index($focused);
const key = e.key;

const moveItem = (direction) => {
const targetIndex = index + direction;
if (targetIndex < 0 || targetIndex >= $allItems.length) return;

e.preventDefault();

if (direction === -1) {
$focused.insertBefore($allItems.eq(targetIndex));
} else {
$focused.insertAfter($allItems.eq(targetIndex));
}

$focused.focus();
triggerUpdateEvent();

const itemName = $focused.find('.itemName').text().trim() || $focused.text().trim();
const newIndex = targetIndex + 1;

$('#live-region').text(
i18nStrings.reorderActionInfo
.replace("{0}", itemName)
.replace("{1}", newIndex)
);
};

const moveFocus = (direction) => {
const targetIndex = index + direction;
if (targetIndex < 0 || targetIndex >= $allItems.length) return;

e.preventDefault();
$allItems.eq(targetIndex).focus();
};

if (e.shiftKey || e.ctrlKey) {
if (key === 'ArrowUp') {
moveItem(-1);
} else if (key === 'ArrowDown') {
moveItem(1);
}
} else {
if (key === 'ArrowUp') {
moveFocus(-1);
} else if (key === 'ArrowDown') {
moveFocus(1);
}
}
});

function triggerUpdateEvent() {
authorshipList.sortable('refresh');
authorshipList.trigger('sortupdate');
}
},

// Reorder authors. Called on page load and after author drag-and-drop and remove.
Expand Down
Loading
Loading