Merge pull request #14481 from dannon/a11y

Primary analysis interface a11y fixes

client/.eslintrc.json

@@ -3,8 +3,8 @@
     "extends": [
         "eslint:recommended",
         "plugin:vue/recommended",
-        "plugin:compat/recommended"
-        //"airbnb-base", eventually (?)
+        "plugin:compat/recommended",
+        "plugin:vuejs-accessibility/recommended"
     ],
     "env": {
         "browser": true,
@@ -41,7 +41,19 @@
         "vue/singleline-html-element-content-newline": "off",
         "vue/multiline-html-element-content-newline": "off",
         "vue/html-closing-bracket-newline": "off",
-        "vue/html-closing-bracket-spacing": "off"
+        "vue/html-closing-bracket-spacing": "off",
+
+        // Accessibility rules
+        "vuejs-accessibility/alt-text": "error",
+        "vuejs-accessibility/anchor-has-content": "warn",
+        "vuejs-accessibility/click-events-have-key-events": "warn",
+        "vuejs-accessibility/form-control-has-label": "warn",
+        "vuejs-accessibility/heading-has-content": "error",
+        "vuejs-accessibility/iframe-has-title": "error",
+        "vuejs-accessibility/label-has-for": "warn",
+        "vuejs-accessibility/mouse-events-have-key-events": "warn",
+        "vuejs-accessibility/no-autofocus": "error",
+        "vuejs-accessibility/tabindex-no-positive": "error"
     },
     "ignorePatterns": ["src/qunit", "src/mocha", "src/libs", "src/nls", "src/legacy"]
 }

client/package.json

@@ -148,6 +148,7 @@
     "eslint": "^8.20.0",
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-vue": "^9.3.0",
+    "eslint-plugin-vuejs-accessibility": "^1.2.0",
     "expose-loader": "^4.0.0",
     "gulp": "^4.0.2",
     "ignore-loader": "^0.1.2",

client/src/components/ClickToEdit.vue

@@ -17,7 +17,6 @@
                         <b-form-input
                             ref="clickToEditInput"
                             :value="debouncedValue"
-                            :autofocus="true"
                             :placeholder="placeholder"
                             :state="stateValidator(debouncedValue, localValue)"
                             @input="input"

client/src/components/History/CurrentCollection/CollectionDetails.vue

@@ -6,6 +6,7 @@
         :show-annotation="false"
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
+            <!-- eslint-disable-next-line vuejs-accessibility/heading-has-content -->
             <h3 v-short="dsc.name || 'Collection'" data-description="collection name display" />
             <CollectionDescription
                 :job-state-summary="jobState"

client/src/components/History/CurrentHistory/HistoryDetails.vue

@@ -6,6 +6,7 @@
         :writeable="writeable"
         @save="onSave">
         <template v-slot:name>
+            <!-- eslint-disable-next-line vuejs-accessibility/heading-has-content -->
             <h3 v-short="history.name || 'History'" data-description="name display" class="my-2" />
         </template>
     </DetailsLayout>

client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.test.js

@@ -53,7 +53,7 @@ describe("HistoryFilters", () => {
         await expectCorrectEmits(wrapper, false, "name:name-filter");
 
         // Test: clearing the filterText
-        const clearButton = wrapper.find("[data-description='show deleted filter toggle']");
+        const clearButton = wrapper.find("[data-description='clear filters']");
         await clearButton.trigger("click");
         await expectCorrectEmits(wrapper, false, "");
 

client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue

@@ -17,11 +17,16 @@
                     :pressed="showAdvanced"
                     :variant="showAdvanced ? 'info' : 'secondary'"
                     data-description="show advanced filter toggle"
+                    aria-label="Show advanced filter"
                     @click="onToggle">
                     <icon v-if="showAdvanced" icon="angle-double-up" />
                     <icon v-else icon="angle-double-down" />
                 </b-button>
-                <b-button size="sm" data-description="show deleted filter toggle" @click="updateFilter('')">
+                <b-button
+                    size="sm"
+                    aria-label="Clear filters"
+                    data-description="clear filters"
+                    @click="updateFilter('')">
                     <icon icon="times" />
                 </b-button>
             </b-input-group-append>

client/src/components/History/CurrentHistory/HistoryNavigation.vue

@@ -33,7 +33,11 @@
                     variant="link"
                     toggle-class="text-decoration-none"
                     menu-class="history-options-button-menu"
+                    title="History options"
                     data-description="history options">
+                    <template v-slot:button-content>
+                        <span class="sr-only">History Options</span>
+                    </template>
                     <b-dropdown-text>
                         <div v-if="historiesLoading">
                             <b-spinner v-if="historiesLoading" small />

client/src/components/History/CurrentHistory/HistoryOperations/Operations.vue

@@ -8,6 +8,7 @@
             toggle-class="text-decoration-none rounded-0"
             data-description="history action menu">
             <template v-slot:button-content>
+                <span class="sr-only">History actions</span>
                 <Icon icon="cog" />
             </template>
             <b-dropdown-text id="history-op-all-content">

client/src/components/History/Layout/ListingLayout.vue

@@ -3,6 +3,7 @@
         <virtual-list
             ref="listing"
             class="listing"
+            role="list"
             data-key="id"
             :offset="offset"
             :data-sources="items"

client/src/components/Markdown/Elements/Visualization.vue

@@ -2,7 +2,7 @@
     <b-card body-class="embed-responsive embed-responsive-4by3">
         <LoadingSpan v-if="loading" class="m-2" message="Loading Visualization" />
         <div v-else-if="error" class="m-2">{{ error }}</div>
-        <iframe v-else class="embed-responsive-item" :src="visualizationUrl" />
+        <iframe v-else title="Galaxy Visualization Frame" class="embed-responsive-item" :src="visualizationUrl" />
     </b-card>
 </template>
 

client/src/components/Masthead/Masthead.test.js

@@ -140,7 +140,7 @@ describe("Masthead.vue", () => {
     });
 
     it("should display window manager button", async () => {
-        expect(wrapper.find("#enable-window-manager a span").classes("fa-th")).toBe(true);
+        expect(wrapper.find("#enable-window-manager a span.fa-th").exists()).toBe(true);
         expect(windowManager.active).toBe(false);
         await wrapper.find("#enable-window-manager a").trigger("click");
         expect(windowManager.active).toBe(true);

client/src/components/Masthead/MastheadItem.vue

@@ -8,11 +8,12 @@
         :style="styles"
         :href="formatUrl(tab.url)"
         :target="tab.target || '_parent'"
-        role="menuitem"
         :link-classes="linkClasses"
         :title="tab.tooltip"
         @click="open(tab, $event)">
         <template v-if="tab.icon">
+            <!-- If this is an icon-based tab, inject tooltip directly for screen readers -->
+            <span class="sr-only">{{ tab.tooltip || tab.id }}</span>
             <span :class="iconClasses" />
             <span v-if="toggle" class="nav-note fa fa-check" />
         </template>

client/src/components/Masthead/QuotaMeter.vue

@@ -5,7 +5,9 @@
                 {{ usingString + " " + totalUsageString }}
             </b-link>
             <b-link v-else v-b-tooltip.hover.left class="quota-progress" to="/storage" :title="title">
-                <b-progress :value="usage" :max="100" :variant="variant" />
+                <b-progress :max="100">
+                    <b-progress-bar aria-label="Quota usage" :value="usage" :variant="variant" />
+                </b-progress>
                 <span>{{ usingString + " " + usage.toFixed(0) }}%</span>
             </b-link>
         </div>

client/src/components/Panels/Buttons/PanelViewButton.vue

@@ -2,12 +2,15 @@
     <b-dropdown
         v-b-tooltip.hover
         right
-        role="button"
         title="Show panel options"
         variant="link"
+        role="menu"
         aria-label="View all tool panel configurations"
         class="tool-panel-dropdown"
         size="sm">
+        <template v-slot:button-content>
+            <span class="sr-only">View all tool panel configurations</span>
+        </template>
         <PanelViewMenuItem
             :current-panel-view="currentPanelView"
             :panel-view="defaultPanelView"

client/src/components/Panels/Common/Tool.vue

@@ -5,7 +5,7 @@
             <span class="description">{{ tool.description }}</span>
         </a>
         <a v-else :class="targetClass" :href="tool.link" :target="tool.target" @click="onClick">
-            <img v-if="tool.logo" class="logo" :src="tool.logo" />
+            <img v-if="tool.logo" class="logo" :src="tool.logo" :alt="tool.name" />
             <span class="labels">
                 <span
                     v-for="(label, index) in tool.labels"

client/src/components/Sharing/Sharing.vue

@@ -123,7 +123,7 @@
                                                 <span>{{ option.email }}</span>
                                                 <i
                                                     aria-hidden="true"
-                                                    tabindex="1"
+                                                    tabindex="0"
                                                     class="multiselect__tag-icon"
                                                     @click="remove(option)"></i>
                                             </span>

client/src/components/Tour/TourRunner.vue

@@ -1,14 +1,14 @@
 <template>
-    <CenterPanel src="welcome" />
+    <CenterFrame src="welcome" />
 </template>
 
 <script>
-import CenterPanel from "entry/analysis/modules/CenterPanel";
+import CenterFrame from "entry/analysis/modules/CenterFrame";
 import { runTour } from "./runTour";
 
 export default {
     components: {
-        CenterPanel,
+        CenterFrame,
     },
     props: {
         tourId: {

client/src/entry/analysis/modules/Analysis.vue

@@ -7,7 +7,7 @@
             :current-panel-properties="toolBoxProperties" />
         <div id="center">
             <div class="center-container">
-                <CenterPanel v-show="showCenter" id="galaxy_main" @load="onLoad" />
+                <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
                 <div v-show="!showCenter" class="center-panel" style="display: block">
                     <router-view :key="$route.fullPath" />
                 </div>
@@ -21,11 +21,11 @@ import { getGalaxyInstance } from "app";
 import HistoryIndex from "components/History/Index";
 import ToolBox from "components/Panels/ProviderAwareToolBox";
 import SidePanel from "components/Panels/SidePanel";
-import CenterPanel from "./CenterPanel";
+import CenterFrame from "./CenterFrame";
 
 export default {
     components: {
-        CenterPanel,
+        CenterFrame,
         SidePanel,
     },
     data() {

client/src/entry/analysis/modules/Base.vue

@@ -1,3 +1,3 @@
 <template>
-    <router-view class="m-2" :key="$route.fullPath" />
+    <router-view :key="$route.fullPath" class="m-2" />
 </template>

client/src/entry/analysis/modules/CenterFrame.vue

@@ -38,7 +38,7 @@ export default {
                     this.$emit("load");
                 }
             } catch (err) {
-                console.warn("CenterPanel - onLoad location access forbidden.", ev, location);
+                console.warn("CenterFrame - onLoad location access forbidden.", ev, location);
             }
         },
     },

client/src/entry/analysis/modules/Home.vue

@@ -3,19 +3,19 @@
         <ToolForm v-if="isTool && !isUpload" v-bind="toolParams" />
         <WorkflowRun v-else-if="isWorkflow" v-bind="workflowParams" />
         <div v-else-if="isController" :src="controllerParams" />
-        <CenterPanel v-else src="welcome" />
+        <CenterFrame v-else src="welcome" />
     </div>
 </template>
 
 <script>
 import decodeUriComponent from "decode-uri-component";
-import CenterPanel from "entry/analysis/modules/CenterPanel";
+import CenterFrame from "entry/analysis/modules/CenterFrame";
 import ToolForm from "components/Tool/ToolForm";
 import WorkflowRun from "components/Workflow/Run/WorkflowRun";
 
 export default {
     components: {
-        CenterPanel,
+        CenterFrame,
         ToolForm,
         WorkflowRun,
     },

client/yarn.lock

@@ -3926,6 +3926,11 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
+emoji-regex@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.1.0.tgz#d50e383743c0f7a5945c47087295afc112e3cf66"
+  integrity sha512-xAEnNCT3w2Tg6MA7ly6QqYJvEoY1tm9iIjJ3yMKK9JPlWuRHAMoe5iETwQnx3M9TVbFMfsrBgWKR+IsmswwNjg==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -4159,6 +4164,15 @@ eslint-plugin-vue@^9.3.0:
     vue-eslint-parser "^9.0.1"
     xml-name-validator "^4.0.0"
 
+eslint-plugin-vuejs-accessibility@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vuejs-accessibility/-/eslint-plugin-vuejs-accessibility-1.2.0.tgz#b7304bc8dfe4fad930c5d95cd51a2e0979225bda"
+  integrity sha512-wF7kT22lS2VOmIpDeI65bnFFKFgESEEpI+CWKr43mdfDRywA4sCk7cKhtZsvfbPOtKO0GDlnpFxZbOIGsFn7IQ==
+  dependencies:
+    aria-query "^5.0.0"
+    emoji-regex "^10.0.0"
+    vue-eslint-parser "^9.0.1"
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"

lib/tool_shed/webapp/templates/base.mako

@@ -8,10 +8,6 @@
     ${self.init()}
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        ## For mobile browsers, don't scale up
-        <meta name = "viewport" content = "maximum-scale=1.0">
-        ## Force IE to standards mode, and prefer Google Chrome Frame if the user has already installed it
-        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
         <title>
             Galaxy

lib/tool_shed/webapp/templates/base/base_panels.mako

@@ -123,10 +123,6 @@
     ${self.init()}
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        ## For mobile browsers, don't scale up
-        <meta name = "viewport" content = "maximum-scale=1.0">
-        ## Force IE to standards mode, and prefer Google Chrome Frame if the user has already installed it
-        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
         <title>
             Galaxy

templates/base.mako

@@ -8,10 +8,6 @@
     ${self.init()}
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        ## For mobile browsers, don't scale up
-        <meta name = "viewport" content = "maximum-scale=1.0">
-        ## Force IE to standards mode, and prefer Google Chrome Frame if the user has already installed it
-        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
         <title>
             Galaxy

templates/base/base_panels.mako

@@ -119,10 +119,6 @@
     ${self.init()}
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        ## For mobile browsers, don't scale up
-        <meta name = "viewport" content = "maximum-scale=1.0">
-        ## Force IE to standards mode, and prefer Google Chrome Frame if the user has already installed it
-        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
         <title>
             Galaxy

templates/js-app.mako

@@ -1,13 +1,9 @@
 <%namespace name="galaxy_client" file="/galaxy_client_app.mako" />
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
     <!--js-app.mako-->
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        ## For mobile browsers, don't scale up
-        <meta name="viewport" content="maximum-scale=1.0">
-        ## Force IE to standards mode, and prefer Google Chrome Frame if the user has already installed it
-        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
         <title>
             Galaxy
@@ -31,7 +27,9 @@
 
     <body scroll="no" class="full-content">
         <!-- Provide mount point for application -->
-        <div id="app"></div>
+        <main>
+            <div id="app"></div>
+        </main>
 
         ${ js_disabled_warning() }
         ${ javascripts() }

templates/webapps/galaxy/galaxy.panels.mako

@@ -28,10 +28,6 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        ## for mobile browsers, don't scale up
-        <meta name = "viewport" content = "maximum-scale=1.0">
-        ## force IE to standards mode, and prefer Google Chrome Frame if the user has already installed it
-        <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
 
         <title>
             Galaxy