Merge pull request #8334 from WilliamHolden/nav_cues

Update anchor tags and enhance navigation cues for screen readers
This commit is contained in:
Martin Cech
2019-08-19 10:55:35 -04:00
committed by GitHub
32 changed files with 123 additions and 112 deletions
+19 -19
View File
@@ -45,8 +45,8 @@ Disabled
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
@@ -58,8 +58,8 @@ Disabled
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
@@ -71,8 +71,8 @@ Disabled
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
@@ -84,8 +84,8 @@ Disabled
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
@@ -105,28 +105,28 @@ Disabled
<div class="alert alert-dismissable alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
</div>
```
```vue
<div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
<strong>Oh snap!</strong> <a href="javascript:void(0)" class="alert-link">Change a few things up</a> and try submitting again.
</div>
```
```vue
<div class="alert alert-dismissable alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
<strong>Well done!</strong> You successfully read <a href="javascript:void(0)" class="alert-link">this important alert message</a>.
</div>
```
```vue
<div class="alert alert-dismissable alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
<strong>Heads up!</strong> This <a href="javascript:void(0)" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
```
@@ -146,9 +146,9 @@ Disabled
```vue
<div class="">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile <span class="badge-pill"></span></a></li>
<li><a href="#">Messages <span class="badge-pill">3</span></a></li>
<li class="active"><a href="javascript:void(0)">Home <span class="badge">42</span></a></li>
<li><a href="javascript:void(0)">Profile <span class="badge-pill"></span></a></li>
<li><a href="javascript:void(0)">Messages <span class="badge-pill">3</span></a></li>
</ul>
</div>
```
@@ -357,8 +357,8 @@ Disabled
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
<a href="javascript:void(0)" class="card-link">Card link</a>
<a href="javascript:void(0)" class="card-link">Another link</a>
</div>
<div class="card-footer text-muted">
2 days ago
@@ -369,8 +369,8 @@ Disabled
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
<a href="javascript:void(0)" class="card-link">Card link</a>
<a href="javascript:void(0)" class="card-link">Another link</a>
</div>
</div>
</div>
+4 -4
View File
@@ -5,21 +5,21 @@
```
```vue
<a href="#" class="action-button">An anchor with .action-button</a>
<a href="javascript:void(0)" class="action-button">An anchor with .action-button</a>
```
All the crazy permutations of menu button...
```vue
<a href="#" class="menubutton">An anchor with .menu-button</a>
<a href="javascript:void(0)" class="menubutton">An anchor with .menu-button</a>
```
```vue
<a href="#" class="menubutton popup">An anchor with .menu-button.popup</a>
<a href="javascript:void(0)" class="menubutton popup">An anchor with .menu-button.popup</a>
```
```vue
<a href="#" class="menubutton popup split">
<a href="javascript:void(0)" class="menubutton popup split">
<a class="menubutton-label">An anchor with .menu-button.popup.split</a>
</a>
```
@@ -164,7 +164,7 @@ WYMeditor.editor.prototype.dialog = function(dialogType, dialogFeatures, bodyHtm
}
show_modal(
"Create Link",
`<div><div><label id='link_attribute_label'>URL <span style='float: right; font-size: 90%'><a href='#' id='set_link_id'>Create in-page anchor</a></span></label><br><input type='text' class='wym_href' value='${curURL}' size='40' /></div><div><label>Title</label><br><input type='text' class='wym_title' value='${curTitle}' size='40' /></div><div>`,
`<div><div><label id='link_attribute_label'>URL <span style='float: right; font-size: 90%'><a href='javascript:void(0)' role="button" id='set_link_id'>Create in-page anchor</a></span></label><br><input type='text' class='wym_href' value='${curURL}' size='40' /></div><div><label>Title</label><br><input type='text' class='wym_title' value='${curTitle}' size='40' /></div><div>`,
{
"Make link": function() {
// Get URL, name/title.
@@ -576,7 +576,7 @@ function renderEditorWithContent(pageId, content) {
// Containers, Galaxy style
//
var containers_menu = $(
"<div class='galaxy-page-editor-button'><a id='insert-galaxy-link' class='action-button popup' href='#'>Paragraph type</a></div>"
"<div class='galaxy-page-editor-button'><a id='insert-galaxy-link' class='action-button popup' href='javascript:void(0)' role='button'>Paragraph type</a></div>"
);
$(".wym_area_top").append(containers_menu);
@@ -596,7 +596,7 @@ function renderEditorWithContent(pageId, content) {
// Add menu button.
var insert_link_menu_button = $(
"<div><a id='insert-galaxy-link' class='action-button popup' href='#'>Insert Link to Galaxy Object</a></div>"
"<div><a id='insert-galaxy-link' class='action-button popup' href='javascript:void(0)' role='button'>Insert Link to Galaxy Object</a></div>"
).addClass("galaxy-page-editor-button");
$(".wym_area_top").append(insert_link_menu_button);
@@ -625,7 +625,7 @@ function renderEditorWithContent(pageId, content) {
// Add menu button.
var embed_object_button = $(
"<div><a id='embed-galaxy-object' class='action-button popup' href='#'>Embed Galaxy Object</a></div>"
"<div><a id='embed-galaxy-object' class='action-button popup' href='javascript:void(0)' role=''button'>Embed Galaxy Object</a></div>"
).addClass("galaxy-page-editor-button");
$(".wym_area_top").append(embed_object_button);
@@ -4,7 +4,7 @@ upstream component or environment that is accessed through props and events -->
<template>
<div class="tags-display" :class="tagContainerClasses">
<a v-if="linkVisible" href="#" class="toggle-link" @click.prevent="toggleTagDisplay">
<a v-if="linkVisible" href="javascript:void(0)" role="button" class="toggle-link" @click.prevent="toggleTagDisplay">
{{ linkText | localize }}
</a>
<vue-tags-input
@@ -6,7 +6,7 @@
</div>
<b-table v-else striped :items="categories" :fields="fields">
<template slot="name" slot-scope="data">
<b-link href="#" class="font-weight-bold" @click="onCategory(data.value)">
<b-link href="javascript:void(0)" role="button" class="font-weight-bold" @click="onCategory(data.value)">
{{ data.value }}
</b-link>
</template>
@@ -2,7 +2,7 @@
<div>
<b-table striped :items="repositories" :fields="fields">
<template slot="name" slot-scope="row">
<b-link href="#" class="font-weight-bold" @click="row.toggleDetails">
<b-link href="javascript:void(0)" role="button" class="font-weight-bold" @click="row.toggleDetails">
{{ row.item.name }}
</b-link>
</template>
@@ -3,7 +3,7 @@
<tbody>
<tr v-if="canExpand && expanded" class="bg-transparent">
<td :class="clsFirstColumn">
<a href="#" @click.stop.prevent="onExpand">
<a href="javascript:void(0)" role="button" @click.stop.prevent="onExpand">
<span class="fa fa-angle-double-up" />
<span>Show less</span>
</a>
@@ -20,7 +20,7 @@
</tr>
<tr v-if="canExpand && !expanded" class="bg-transparent">
<td :class="clsFirstColumn">
<a href="#" @click.stop.prevent="onExpand">
<a href="javascript:void(0)" role="button" @click.stop.prevent="onExpand">
<span class="fa fa-angle-double-down" />
<span>Show more</span>
</a>
@@ -10,7 +10,8 @@
v-for="url in toolshedUrls"
:key="url"
class="dropdown-item"
href="#"
href="javascript:void(0)"
role="button"
@click.prevent="onToolshed(url)"
>{{ url }}</a
>
@@ -12,8 +12,8 @@
<b-form-group label="Password">
<b-form-input name="password" type="password" v-model="password" />
<b-form-text
>Forgot password? Click here to <a @click="reset" href="#">reset</a> your
password.</b-form-text
>Forgot password? <a @click="reset" href="javascript:void(0)" role="button">Click here to reset your
password.</a> </b-form-text
>
</b-form-group>
<b-button name="login" type="submit">Login</b-button>
@@ -21,7 +21,7 @@
<b-card-footer>
Don't have an account?
<span v-if="allowUserCreation">
<a id="register-toggle" href="#" @click.prevent="toggleLogin">Register here.</a>
<a id="register-toggle" href="javascript:void(0)" role="button" @click.prevent="toggleLogin">Register here.</a>
</span>
<span v-else>
Registration for this Galaxy instance is disabled. Please contact an administrator for
@@ -37,7 +37,7 @@
</b-card-body>
<b-card-footer v-if="!isAdmin">
Already have an account?
<a id="login-toggle" href="#" @click.prevent="toggleLogin">Log in here.</a>
<a id="login-toggle" href="javascript:void(0)" role="button" @click.prevent="toggleLogin">Log in here.</a>
</b-card-footer>
</b-card>
</b-form>
+2 -2
View File
@@ -98,8 +98,8 @@ const View = Backbone.View.extend({
_template: function() {
return `
<nav id="masthead" class="navbar navbar-expand justify-content-center navbar-dark">
<a class="navbar-brand">
<img alt="navigation brand image" class="navbar-brand-image"/>
<a class="navbar-brand" aria-label="homepage">
<img alt="logo" class="navbar-brand-image"/>
<span class="navbar-brand-title"/>
</a>
<ul class="navbar-nav"/>
@@ -387,7 +387,7 @@ export default {
// show advanced search link in standard display
if (show_advanced_search_link) {
tmpl += '<a href="" class="advanced-search-toggle">Advanced Search</a>';
tmpl += '<a href="javascript:void(0)" class="advanced-search-toggle">Advanced Search</a>';
}
// finalize standard search display
@@ -396,7 +396,7 @@ export default {
//
// advanced search
//
tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px; border: 1px solid #ccc;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px; border: 1px solid #ccc;"><table><tr><td style="text-align: left" colspan="100"><a href="javascript:void(0)" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
// add advanced filters
for (let column of options.columns) {
@@ -399,7 +399,7 @@ export default Backbone.View.extend({
// Add hyperlink for this filter since grid will no longer be using this filter. It is assumed that
// this element has a single child, a hyperlink/anchor.
$(this).empty();
var t = $(`<a href="#">${text}</a>`);
var t = $(`<a href="javascript:void(0)" role="button">${text}</a>`);
t.click(() => {
self.set_categorical_filter(name, filter_value);
});
@@ -441,7 +441,7 @@ export default Backbone.View.extend({
text = $(this).text();
$(this).empty();
$(this).removeClass("inactive-link");
var t = $(`<a href="#">${text}</a>`);
var t = $(`<a href="javascript:void(0)" role="button">${text}</a>`);
t.click(() => {
self.set_page(page_num);
});
@@ -59,7 +59,7 @@ var DatasetCollectionElementView = Backbone.View.extend(BASE_MVC.LoggableMixin).
[
'<a class="name" title="',
_l("Click to rename"),
'" href="javascript:void(0)">',
'" href="javascript:void(0)" role="button">',
"<%- element.name %>",
"</a>",
'<button class="discard btn btn-sm" title="',
@@ -522,9 +522,9 @@ var ListCollectionCreator = Backbone.View.extend(BASE_MVC.LoggableMixin)
createList: function(name) {
if (!this.workingElements.length) {
var message = `${_l("No valid elements for final list")}. `;
message += `<a class="cancel-create" href="javascript:void(0);">${_l("Cancel")}</a> `;
message += `<a class="cancel-create" href="javascript:void(0);" role="button">${_l("Cancel")}</a> `;
message += _l("or");
message += ` <a class="reset" href="javascript:void(0);">${_l("start over")}</a>.`;
message += ` <a class="reset" href="javascript:void(0);" role="button">${_l("start over")}</a>.`;
this._showAlert(message);
return;
}
@@ -778,11 +778,11 @@ var ListCollectionCreator = Backbone.View.extend(BASE_MVC.LoggableMixin)
header: _.template(
[
'<div class="main-help well clear">',
'<a class="more-help" href="javascript:void(0);">',
'<a class="more-help" href="javascript:void(0);" role="button">',
_l("More help"),
"</a>",
'<div class="help-content">',
'<a class="less-help" href="javascript:void(0);">',
'<a class="less-help" href="javascript:void(0);" role="button">',
_l("Less"),
"</a>",
"</div>",
@@ -801,13 +801,13 @@ var ListCollectionCreator = Backbone.View.extend(BASE_MVC.LoggableMixin)
middle: _.template(
[
'<div class="collection-elements-controls">',
'<a class="reset" href="javascript:void(0);" ',
'<a class="reset" href="javascript:void(0);" role="button" ',
'title="',
_l("Undo all reordering and discards"),
'">',
_l("Start over"),
"</a>",
'<a class="clear-selected" href="javascript:void(0);" ',
'<a class="clear-selected" href="javascript:void(0);" role="button" ',
'title="',
_l("De-select all selected datasets"),
'">',
@@ -852,10 +852,10 @@ var ListCollectionCreator = Backbone.View.extend(BASE_MVC.LoggableMixin)
' <span class="caret"></span>',
"</button>",
'<div class="dropdown-menu" role="menu">',
'<a class="dropdown-item" href="#">',
'<a class="dropdown-item" href="javascript:void(0)" role="button">',
_l("Create a <i>single</i> pair"),
"</a>",
'<a class="dropdown-item" href="#">',
'<a class="dropdown-item" href="javascript:void(0)" role="button">',
_l("Create a list of <i>unpaired</i> datasets"),
"</a>",
"</div>",
@@ -953,7 +953,7 @@ var ListCollectionCreator = Backbone.View.extend(BASE_MVC.LoggableMixin)
'<li class="no-elements-left-message">',
_l("No elements left! "),
_l("Would you like to "),
'<a class="reset" href="javascript:void(0)">',
'<a class="reset" href="javascript:void(0)" role="button">',
_l("start over"),
"</a>?",
"</li>"
@@ -980,7 +980,7 @@ var ListCollectionCreator = Backbone.View.extend(BASE_MVC.LoggableMixin)
_l("At least one element is needed for the collection"),
". ",
_l("You may need to "),
'<a class="cancel-create" href="javascript:void(0)">',
'<a class="cancel-create" href="javascript:void(0)" role="button">',
_l("cancel"),
"</a> ",
_l("and reselect new elements"),
@@ -1545,11 +1545,11 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
header: _.template(
[
'<div class="main-help well clear">',
'<a class="more-help" href="javascript:void(0);">',
'<a class="more-help" href="javascript:void(0);" role="button">',
_l("More help"),
"</a>",
'<div class="help-content">',
'<a class="less-help" href="javascript:void(0);">',
'<a class="less-help" href="javascript:void(0);" role="button">',
_l("Less"),
"</a>",
"</div>",
@@ -1577,13 +1577,13 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
"</div>",
'<div class="paired-column flex-column no-flex column">',
'<div class="column-header">',
'<a class="choose-filters-link" href="javascript:void(0)">',
'<a class="choose-filters-link" href="javascript:void(0)" role="button">',
_l("Choose filters"),
"</a>",
'<a class="clear-filters-link" href="javascript:void(0);">',
'<a class="clear-filters-link" href="javascript:void(0);" role="button">',
_l("Clear filters"),
"</a><br />",
'<a class="autopair-link" href="javascript:void(0);">',
'<a class="autopair-link" href="javascript:void(0);" role="button">',
_l("Auto-pair"),
"</a>",
"</div>",
@@ -1630,7 +1630,7 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
'<div class="column-title paired-column-title">',
'<span class="title"></span>',
"</div>",
'<a class="unpair-all-link" href="javascript:void(0);">',
'<a class="unpair-all-link" href="javascript:void(0);" role="button">',
_l("Unpair all"),
"</a>",
"</div>",
@@ -1679,10 +1679,10 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
' <span class="caret"></span>',
"</button>",
'<div class="dropdown-menu" role="menu">',
'<a class="dropdown-item" href="#">',
'<a class="dropdown-item" href="javascript:void(0)" role="button">',
_l("Create a <i>single</i> pair"),
"</a>",
'<a class="dropdown-item" href="#">',
'<a class="dropdown-item" href="javascript:void(0)" role="button">',
_l("Create a list of <i>unpaired</i> datasets"),
"</a>",
"</div>",
@@ -403,7 +403,7 @@ export default {
// show advanced search link in standard display
if (show_advanced_search_link) {
tmpl += '<a href="" class="advanced-search-toggle">Advanced Search</a>';
tmpl += '<a href="javascript:void(0)" class="advanced-search-toggle">Advanced Search</a>';
}
// finalize standard search display
@@ -412,7 +412,7 @@ export default {
//
// advanced search
//
tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px;"><table><tr><td style="text-align: left" colspan="100"><a href="javascript:void(0)" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
// add advanced filters
for (const column of options.columns) {
+2 -2
View File
@@ -416,7 +416,7 @@ export default Backbone.View.extend({
// Add hyperlink for this filter since grid will no longer be using this filter. It is assumed that
// this element has a single child, a hyperlink/anchor.
$(this).empty();
var t = $(`<a href="#">${text}</a>`);
var t = $(`<a href="javascript:void(0)" role="button">${text}</a>`);
t.click(() => {
self.set_categorical_filter(name, filter_value);
});
@@ -458,7 +458,7 @@ export default Backbone.View.extend({
text = $(this).text();
$(this).empty();
$(this).removeClass("inactive-link");
var t = $(`<a href="#">${text}</a>`);
var t = $(`<a href="javascript:void(0)" role="button">${text}</a>`);
t.click(() => {
self.set_page(page_num);
});
@@ -40,13 +40,13 @@ var HDCAListItemEdit = _super.extend(
<span class="fa fa-times"></span>
</a>
<div class="dropdown-menu" role="menu">
<a href="#" class="dropdown-item delete-collection">
<a href="javascript:void(0)" role="button" class="dropdown-item delete-collection">
${_l("Collection Only")}
</a>
<a href="#" class="dropdown-item delete-collection-and-datasets">
<a href="javascript:void(0)" role="button" class="dropdown-item delete-collection-and-datasets">
${_l("Delete Datasets")}
</a>
<a href="#" style="display: ${
<a href="javascript:void(0)" role="button" style="display: ${
this.purgeAllowed ? "inherit" : "none"
}" class="dropdown-item delete-collection-and-purge-datasets">
${_l("Permanently Delete Datasets")}
@@ -671,7 +671,7 @@ var LibraryDatasetView = Backbone.View.extend({
<% if (item.get("is_unrestricted")) { %>
<div>
This dataset is unrestricted so everybody with the link can access it.
Just share <span class="copy-link-to-clipboard"><a href=""a>this page</a></span>.
Just share <span class="copy-link-to-clipboard"><a href="javascript:void(0)">this page</a></span>.
</div>
<% } %>
@@ -1159,12 +1159,12 @@ var LibraryDatasetView = Backbone.View.extend({
<% if (!item.get("is_unrestricted")) { %>
<p>
You can <span class="remove-restrictions">
<a href="">remove all access restrictions</a></span> on this dataset.
<a href="javascript:void(0)">remove all access restrictions</a></span> on this dataset.
</p>
<% } else { %>
<p>
You can <span class="make-private">
<a href="">make this dataset private</a></span> to you.</p>
<a href="javascript:void(0)">make this dataset private</a></span> to you.</p>
<% } %>
<h4>Roles that can access the dataset</h4>
<div id="access_perm" class="access_perm roles-selection"></div>
@@ -501,27 +501,27 @@ var FolderListView = Backbone.View.extend({
<input id="select-all-checkboxes" style="margin: 0;" type="checkbox">
</th>
<th>
<a class="sort-folder-name" title="Click to reverse order" href="#">Name</a>
<a class="sort-folder-name" title="Click to reverse order" href="javascript:void(0)" role="button">Name</a>
<span title="Sorted by Name" class="sort-icon-name fa fa-sort-alpha-<%- order %>"></span>
</th>
<th style="width:20%;">
<a class="sort-folder-message" title="Click to reverse order" href="#">Description</a>
<a class="sort-folder-message" title="Click to reverse order" href="javascript:void(0)" role="button">Description</a>
<span title="Sorted by Desc." class="sort-icon-message fa"></span>
</th>
<th style="width:5%;">
<a class="sort-folder-file_ext" title="Click to reverse order" href="#">Data Type</a>
<a class="sort-folder-file_ext" title="Click to reverse order" href="javascript:void(0)" role="button">Data Type</a>
<span title="Sorted by Type" class="sort-icon-file_ext fa"></span>
</th>
<th style="width:10%;">
<a class="sort-folder-raw_size" title="Click to reverse order" href='#'>Size</a>
<a class="sort-folder-raw_size" title="Click to reverse order" href="javascript:void(0)" role="button">Size</a>
<span title="Sorted by Size" class="sort-icon-raw_size fa"></span>
</th>
<th style="width:160px;">
<a class="sort-folder-update_time" title="Click to reverse order" href='#'>Date Updated (UTC)</a>
<a class="sort-folder-update_time" title="Click to reverse order" href=href="javascript:void(0)" role="button">Date Updated (UTC)</a>
<span title="Sorted by Date" class="sort-icon-update_time fa"></span>
</th>
<th style="width:5%;">
<a class="sort-folder-state" title="Click to reverse order" href="#">State</a>
<a class="sort-folder-state" title="Click to reverse order" href="javascript:void(0)">State</a>
<span title="Sorted by State" class="sort-icon-state fa"></span>
</th>
<th style="width:160px;"></th>
@@ -1488,10 +1488,10 @@ var FolderToolbarView = Backbone.View.extend({
<span class="fa fa-book"></span> Export to History <span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu">
<a href="#" class="toolbtn-bulk-import add-to-history-datasets dropdown-item">
<a href="javascript:void(0)" role="button" class="toolbtn-bulk-import add-to-history-datasets dropdown-item">
as Datasets
</a>
<a href="#" class="toolbtn-collection-import add-to-history-collection dropdown-item">
<a href="javascript:void(0)" role="button" class="toolbtn-collection-import add-to-history-collection dropdown-item">
as a Collection
</a>
</div>
@@ -331,7 +331,7 @@ var LibraryListView = Backbone.View.extend({
<% if(length === 0) { %> style="display:none;" <% }%> >
<thead>
<th style="width:30%;">
<a class="sort-libraries-link" title="Click to reverse order" href="#">
<a class="sort-libraries-link" title="Click to reverse order" href="javascript:void(0)" role="button">
Name
</a>
<span title="Sorted alphabetically" class="fa fa-sort-alpha-<%- order %>"></span>
+1 -1
View File
@@ -772,7 +772,7 @@ var templates = {
tool_search: _.template(
`<input id="tool-search-query" class="search-query parent-width" name="query"
placeholder="search tools" autocomplete="off" type="text" />
<span id="search-clear-btn" class="search-clear fa fa-times-circle" title="clear search (esc)"/>
<span id="search-clear-btn" class="search-clear fa fa-times-circle" title="clear search (esc)" aria-label="clear search" role="button"/>
<span id="search-spinner" class="search-loading fa fa-spinner fa-spin"/>`
),
@@ -453,7 +453,7 @@ export default Backbone.View.extend({
// Tool menu
$("div.toolSectionBody").hide();
$("div.toolSectionTitle > span").wrap("<a href='#'></a>");
$("div.toolSectionTitle > span").wrap("<a href='javascript:void(0)' role='button'></a>");
var last_expanded = null;
$("div.toolSectionTitle").each(function() {
var body = $(this).next("div.toolSectionBody");
@@ -494,7 +494,7 @@ export default Backbone.View.extend({
var $section = $(
'<div class="toolSectionWrapper">' +
'<div class="toolSectionTitle">' +
'<a href="#"><span>Workflows</span></a>' +
'<a href="javascript:void(0)" role="button"><span>Workflows</span></a>' +
"</div>" +
'<div class="toolSectionBody">' +
'<div class="toolSectionBg"/>' +
@@ -530,7 +530,8 @@ export default Backbone.View.extend({
}
});
var $add = $("<a/>")
.attr("href", "#")
.attr("href", "javascript:void(0)")
.attr("role", "button")
.html(workflow.name)
.on("click", () => {
self.add_node_for_subworkflow(workflow.latest_id, workflow.name);
@@ -764,7 +765,7 @@ export default Backbone.View.extend({
prebuildNode: function(type, title_text, content_id) {
var self = this;
var $f = $("<div class='toolForm toolFormInCanvas'/>");
var $f = $(`<div class='toolForm toolFormInCanvas' tabindex = '0' aria-label='Node ${title_text}'/>`);
var $title = $(`<div class='toolFormTitle unselectable'><span class='nodeTitle'>${title_text}</div></div>`);
add_node_icon($title.find(".nodeTitle"), type);
$f.append($title);
@@ -779,10 +780,14 @@ export default Backbone.View.extend({
// Fix width to computed width
// Now add floats
var buttons = $("<div class='buttons' style='float: right;'></div>");
buttons.append($(`<div class="sr-only"><a href="#right">Node Details</a></div>`));
if (type !== "subworkflow") {
buttons.append(
$("<div/>")
$("<a/>")
.attr({
"aria-label": "clone node",
"role": "button",
"href": "javascript:void(0)"
})
.addClass("fa-icon-button fa fa-files-o node-clone")
.click(e => {
node.clone();
@@ -790,7 +795,12 @@ export default Backbone.View.extend({
);
}
buttons.append(
$("<div/>")
$("<a/>")
.attr({
"aria-label": "destroy node",
"role": "button",
"href": "javascript:void(0)"
})
.addClass("fa-icon-button fa fa-times node-destroy")
.click(e => {
node.destroy();
+1 -1
View File
@@ -50,7 +50,7 @@ export function make_popupmenu(button_element, initial_options) {
menu_element.append(
$("<div/>")
.addClass("dropdown-item head")
.append($("<a href='#'></a>").html(k))
.append($("<a href='javascript:void(0)' role='button'></a>").html(k))
);
}
});
+2 -2
View File
@@ -197,7 +197,7 @@ export class TracksterUI extends Backbone.Model {
.appendTo(new_bookmark);
//position_link
$("<a href=''/>")
$("<a href='javascript:void(0)'/>")
.text(position)
.appendTo(position_div)
.click(() => {
@@ -223,7 +223,7 @@ export class TracksterUI extends Backbone.Model {
});
// delete_icon
$("<a href=''/>")
$("<a href='javascript:void(0)'/>")
.addClass("icon-button delete")
.appendTo(delete_icon_container);
@@ -45,7 +45,7 @@
<ul class="nav navbar-nav">
<li class="dropdown hidden">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Load file<b class="caret"></b></a>
<a href="javascript:void(0)" role="button" class="dropdown-toggle" data-toggle="dropdown">Load file<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><input type="file" id="json_file"></li>
</ul>
@@ -106,9 +106,9 @@
<div class="outer-frame">
<div class="tab">
<a class="button" href="#" data-rel="treeview-wrapper">Treeview</a>
<a class="button" href="#" data-rel="sunburst-wrapper">Sunburst</a>
<a class="button" href="#" data-rel="treemap-wrapper">Treemap</a>
<a class="button" href="javascript:void(0)" data-rel="treeview-wrapper">Treeview</a>
<a class="button" href="javascript:void(0)" data-rel="sunburst-wrapper">Sunburst</a>
<a class="button" href="javascript:void(0)" data-rel="treemap-wrapper">Treemap</a>
</div>
<div class="inner-frame">
@@ -82,7 +82,7 @@
You are viewing a deleted dataset.
%if data.history and data.history.user == trans.get_user():
<br />
<a href="#" onclick="$.ajax( {type: 'GET', cache: false, url: '${h.url_for( controller='dataset', action='undelete_async', dataset_id=trans.security.encode_id( data.id ) )}', dataType: 'text', contentType: 'text/html', success: function( data, textStatus, jqXHR ){ if (data == 'OK' ){ $( '#deleted-data-message' ).slideUp( 'slow' ) } else { alert( 'Undelete failed.' ) } }, error: function( data, textStatus, jqXHR ){ alert( 'Undelete failed.' ); } } );">Undelete</a>
<a href="javascript:void(0)" role="button" onclick="$.ajax( {type: 'GET', cache: false, url: '${h.url_for( controller='dataset', action='undelete_async', dataset_id=trans.security.encode_id( data.id ) )}', dataType: 'text', contentType: 'text/html', success: function( data, textStatus, jqXHR ){ if (data == 'OK' ){ $( '#deleted-data-message' ).slideUp( 'slow' ) } else { alert( 'Undelete failed.' ) } }, error: function( data, textStatus, jqXHR ){ alert( 'Undelete failed.' ); } } );">Undelete</a>
%endif
</div>
%endif
+11 -11
View File
@@ -80,9 +80,9 @@
%if "[[" in tool.description and "]]" in tool.description:
${tool.description.replace( '[[', '<a id="link-${tool.id}" href="workflow_globals.app.add_node_for_tool( ${tool.id} )">' % tool.id ).replace( "]]", "</a>" )}
%elif tool.name:
<a id="link-${tool.id}" href="#" onclick="workflow_globals.app.add_node_for_tool( '${tool.id}', '${markupsafe.escape( tool.name ) | h}' )" style="text-decoration: none; display: block;"><span style="text-decoration: underline">${tool.name | h}</span> ${tool.description}</a>
<a id="link-${tool.id}" role="button" href="javascript:void(0)" onclick="workflow_globals.app.add_node_for_tool( '${tool.id}', '${markupsafe.escape( tool.name ) | h}' )" style="text-decoration: none; display: block;"><span style="text-decoration: underline">${tool.name | h}</span> ${tool.description}</a>
%else:
<a id="link-${tool.id}" href="#" onclick="workflow_globals.app.add_node_for_tool( '${tool.id}', '${markupsafe.escape( tool.name ) | h}' )">${tool.description}</a>
<a id="link-${tool.id}" role="button" href="javascript:void(0)" onclick="workflow_globals.app.add_node_for_tool( '${tool.id}', '${markupsafe.escape( tool.name ) | h}' )">${tool.description}</a>
%endif
</div>
%else:
@@ -119,14 +119,14 @@
<%def name="render_module_section(module_section)">
<div class="toolSectionTitle" id="title___workflow__${module_section['name']}__">
<div class="toolSectionTitle" role="button" id="title___workflow__${module_section['name']}__">
<span>${module_section["title"]}</span>
</div>
<div id="__workflow__${module_section['name']}__" class="toolSectionBody">
<div class="toolSectionBg">
%for module in module_section["modules"]:
<div class="toolTitle">
<a href="#" id="tool-menu-${module_section['name']}-${module['name']}" onclick="workflow_globals.app.add_node_for_module( '${module['name']}', '${module['title']}' )">
<a role="button" href="javascript:void(0)" id="tool-menu-${module_section['name']}-${module['name']}" onclick="workflow_globals.app.add_node_for_module( '${module['name']}', '${module['title']}' )">
${module['description']}
</a>
</div>
@@ -150,7 +150,7 @@
<div class="unified-panel-controls">
<div id="tool-search" class="search-input">
<input id="tool-search-query" class="search-query parent-width" name="query" placeholder="search tools" autocomplete="off" type="text">
<span id="search-clear-btn" class="search-clear fa fa-times-circle" title="" data-original-title="clear search (esc)" />
<span id="search-clear-btn" aria-label="clear search" role="button" class="search-clear fa fa-times-circle" title="" data-original-title="clear search (esc)" />
<span id="search-spinner" class="search-loading fa fa-spinner fa-spin" />
</div>
</div>
@@ -173,7 +173,7 @@
${render_tool( val, False )}
%elif isinstance( val, ToolSection ) and val.elems:
<% section = val %>
<div class="toolSectionTitle" id="title_${section.id}">
<div class="toolSectionTitle" role="button" id="title_${section.id}">
<span>${section.name}</span>
</div>
<div id="${section.id}" class="toolSectionBody">
@@ -196,7 +196,7 @@
%if trans.user_is_admin and trans.app.data_managers.data_managers:
<div>&nbsp;</div>
<div class="toolSectionWrapper">
<div class="toolSectionTitle" id="title___DATA_MANAGER_TOOLS__">
<div class="toolSectionTitle" role="button" id="title___DATA_MANAGER_TOOLS__">
<span>Data Manager Tools</span>
</div>
<div id="__DATA_MANAGER_TOOLS__" class="toolSectionBody">
@@ -232,13 +232,13 @@
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<div class="panel-header-buttons">
<a id="workflow-run-button" class="panel-header-button" href="#" title="Run" style="display: inline-block;" aria-label="Run">
<a id="workflow-run-button" class="panel-header-button" href="javascript:void(0)" role="button" title="Run" style="display: inline-block;" aria-label="Run">
<span class="fa fa-play"></span>
</a>
<a id="workflow-save-button" class="panel-header-button" href="#" title="Save" style="display: inline-block;" aria-label="Save">
<a id="workflow-save-button" class="panel-header-button" href="javascript:void(0)" role="button" title="Save" style="display: inline-block;" aria-label="Save">
<span class="fa fa-floppy-o"></span>
</a>
<a id="workflow-options-button" class="panel-header-button" href="#" title="Workflow options" style="display: inline-block;" aria-label="Workflow options">
<a id="workflow-options-button" class="panel-header-button" href="javascript:void(0)" role="button" title="Workflow options" style="display: inline-block;" aria-label="Workflow options">
<span class="fa fa-cog"></span>
</a>
</div>
@@ -287,7 +287,7 @@
<div id="workflow-version-area" class="form-row">
<label>Version:</label>
</div>
<select id="workflow-version-switch" href="#">Select version</select>
<select id="workflow-version-switch">Select version</select>
## Workflow tags.
<%namespace file="/tagging_common.mako" import="render_individual_tagging_element" />
<div class="form-row">
@@ -145,7 +145,7 @@
${"/".join( url_parts[:-1] )}/<span id='item-identifier'>${url_parts[-1]}</span>
</span>
<a href="#" id="edit-identifier"><img src="${h.url_for('/static/images/fugue/pencil.png')}"/></a>
<a href="javascript:void(0)" role="button" id="edit-identifier"><img src="${h.url_for('/static/images/fugue/pencil.png')}"/></a>
</blockquote>
%if item.published:
+3 -3
View File
@@ -53,8 +53,8 @@
<nav id="masthead" class="navbar navbar-expand fixed-top justify-content-center navbar-dark">
## Logo, layered over tabs to be clickable
<a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" class="navbar-brand">
<img class="navbar-brand-image" src="${h.url_for('/static/images/galaxyIcon_noText.png')}">
<a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
<img alt="logo" class="navbar-brand-image" src="${h.url_for('/static/images/galaxyIcon_noText.png')}">
<span class="navbar-brand-title">
Galaxy Tool Shed
%if app.config.brand:
@@ -103,7 +103,7 @@
<div class="dropdown-divider"></div>
%else:
%if len ( menu_item ) == 1:
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="javascript:void(0)" role="button">
${menu_item[0]}
</a>
%elif len ( menu_item ) == 2: