Added tooltips and aria-labels (#394)

* Titles on buttons replaced by tooltips, and added aria-labels everywhere * Removed useless ALink component * CategorySettingsDialog component disabling submit if no changes * Removed useless ALink component * CategorySettingsDialog component disabling submit if no changes * Removed useless ALink component * CategorySettingsDialog component disabling submit if no changes
2025-01-01 01:52:51 +03:00 · 2019-09-05 19:02:18 +04:00 · 2019-09-05 19:02:18 +04:00 · a6e62882cb
commit a6e62882cb
parent b4b2b94a0c
21 changed files with 185 additions and 47 deletions
--- a/front/client/app.ts
+++ b/front/client/app.ts
@ -4,8 +4,10 @@ import Vuex from 'vuex'
 import vuetify from 'client/plugins/vuetify'
 import { sync } from 'vuex-router-sync'
 import confirmDialogMixin from 'client/mixins/confirmDialogMixin'
+import VTooltip from 'v-tooltip'

-import 'client/assets/code-highlight.css'
+import 'client/styles/tooltip.css'
+import 'client/styles/code-highlight.css'

 import AppComponent from './App.vue'
 import { createRouter } from './router'
@ -14,6 +16,11 @@ import { createStore } from './store'
 function initVue () {
  Vue.use(VueRouter)
  Vue.use(Vuex)
+  Vue.use(VTooltip, {
+    defaultOffset: 5,
+    defaultDelay: 150,
+    defaultPlacement: 'bottom'
+  })
  Vue.mixin(confirmDialogMixin)
 }

--- a/front/client/components/AddCategoryDialog.vue
+++ b/front/client/components/AddCategoryDialog.vue
@ -43,14 +43,14 @@
        <v-spacer></v-spacer>
        <v-btn
          text
-          title="Cancel"
+          aria-label="Cancel"
          color="primary"
          @click.native="close"
        >
          Cancel
        </v-btn>
        <v-btn
-          title="Submit"
+          aria-label="Submit"
          color="info"
          class="add-category-submit-btn"
          :disabled="!isValid"
--- a/front/client/components/AddItemDialog.vue
+++ b/front/client/components/AddItemDialog.vue
@ -48,7 +48,7 @@
        <v-spacer />
        <v-btn
          text
-          title="Cancel"
+          aria-label="Cancel"
          color="primary"
          @click.native="close"
        >
@ -57,7 +57,7 @@
        <v-btn
          color="info"
          :disabled="!isValid"
-          title="Create"
+          aria-label="Create"
          @click.native="submit"
        >
          Create
--- a/front/client/components/Categories.vue
+++ b/front/client/components/Categories.vue
@ -54,7 +54,7 @@
            text
            class="ma-0 mt-1 px-2"
            color="grey darken-2"
-            title="Add new category"
+            aria-label="Add new category"
            @click="openAddCategoryDialog(groupName)"
          >
            <v-icon size="14" class="mr-1" left v-text="'$vuetify.icons.plus'"></v-icon>
--- a/front/client/components/Category.vue
+++ b/front/client/components/Category.vue
@ -37,7 +37,7 @@
        text
        class="ml-2"
        color="grey darken-2"
-        title="Add new item"
+        aria-label="Add new item"
        @click="openAddItemDialog"
      >
        <v-icon size="14" class="mr-1" left>$vuetify.icons.plus</v-icon>
--- a/front/client/components/CategoryDescription.vue
+++ b/front/client/components/CategoryDescription.vue
@ -22,7 +22,7 @@
      v-if="!isEditDescription"
      color="grey darken-2"
      class="mt-3"
-      :title="descriptionBtnText"
+      :aria-label="descriptionBtnText"
      @click="toggleEditDescription"
    >
      <v-icon size="14" class="mr-1" left>{{ descriptionBtnIcon }}</v-icon>
--- a/front/client/components/CategoryHeader.vue
+++ b/front/client/components/CategoryHeader.vue
@ -1,22 +1,17 @@
 <template>
  <div class="category-header">
-    <h1 class="category-name-title" :title="categoryTitle">
-      <v-tooltip bottom>
-        <template v-slot:activator="{ on }">
-          <a
-            target="_blank"
-            aria-label="RSS feed for all new items in this category"
-            :href="`https://guide.aelve.com/haskell/feed/category/${categoryId}`"
-            class="rss-link"
-            v-on="on"
-          >
-            <v-icon
-              class="rss-link-icon"
-            >$vuetify.icons.rss</v-icon>
-          </a>
-        </template>
-        <span>RSS feed for all new items in this category</span>
-      </v-tooltip>{{categoryTitle}}</h1>
+    <div class="category-header__first-row">
+      <a
+        class="rss-link"
+        :href="`https://guide.aelve.com/haskell/feed/category/${categoryId}`"
+        target="_blank"
+        aria-label="RSS feed for all new items in this category"
+        v-tooltip.bottom-start="{ content: 'RSS feed for all new items in this category'}"
+      >
+        <v-icon class="rss-link-icon">$vuetify.icons.rss</v-icon>
+      </a>
+      <h1 class="category-name-title" :title="categoryTitle">{{categoryTitle}}</h1>
+    </div>

    <div class="category-header__second-row">
      <div class="category-group-title-wrap">
@ -48,7 +43,8 @@
          <v-btn
            text
            icon
-            title="Actions"
+            aria-label="Actions"
+            v-tooltip="'Actions'"
            class="category-actions-menu-btn"
            v-on="on"
          >
@ -78,7 +74,7 @@
          </v-list-item>
          <v-list-item>
            <CategoryHeaderBtn
-              block 
+              block
              text="Delete category"
              icon="trash-alt"
              @click="deleteCategory"
@ -102,8 +98,8 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import { Prop } from 'vue-property-decorator'
 import CategorySettingsDialog from 'client/components/CategorySettingsDialog.vue'
-import Confirm from 'client/helpers/ConfirmDecorator'
 import CategoryHeaderBtn from 'client/components/CategoryHeaderBtn.vue'
+import Confirm from 'client/helpers/ConfirmDecorator'

@Component({
  components: {
@ -162,17 +158,18 @@ export default class CategoryHeader extends Vue {
  font-weight: 700;
  margin: 0 0 5px;
  letter-spacing: -1px;
+  display: inline;
 }

-/* Space beetwen category rss ling title  */
-.rss-link:after {
-  content: " ";
-  visibility: hidden;
+.rss-link {
+  margin-right: 2px;
+  height: calc(1.8rem - 5px);
+  display: inline-block;
+  vertical-align: top;
 }

 .rss-link-icon {
  height: calc(1.8rem - 5px) !important;
-  vertical-align: bottom;

  &:hover {
    color: #000;
--- a/front/client/components/CategoryHeaderBtn.vue
+++ b/front/client/components/CategoryHeaderBtn.vue
@ -3,7 +3,7 @@
    text
    class="category-header-btn"
    color="grey darken-2"
-    :title="text"
+    :aria-label="text"
    v-bind="$attrs"
    v-on="$listeners"
  >
--- a/front/client/components/CategoryItem.vue
+++ b/front/client/components/CategoryItem.vue
@ -68,7 +68,7 @@
          small
          dark
          rounded
-          :title="areNotesExpanded ? 'Collapse' : 'Expand'"
+          :aria-label="areNotesExpanded ? 'Collapse' : 'Expand'"
          class="mx-0"
          @click="toggleNotes"
        >
--- a/front/client/components/CategoryItemBtn.vue
+++ b/front/client/components/CategoryItemBtn.vue
@ -4,7 +4,7 @@
        color: 'grey darken-2',
        icon: !!icon && !showTitle,
        style,
-        title,
+        'aria-label': title,
        ...$attrs
    }"
    v-on="$listeners"
--- a/front/client/components/CategoryItemSection.vue
+++ b/front/client/components/CategoryItemSection.vue
@ -5,6 +5,7 @@
      <category-item-btn
        small
        :title="editBtnTitle"
+        v-tooltip="editBtnTitle"
        :icon="editBtnIcon"
        class="ml-1"
        @click="toggleEdit"
--- a/front/client/components/CategoryItemToolbar.vue
+++ b/front/client/components/CategoryItemToolbar.vue
@ -44,6 +44,7 @@
              size="40px"
              iconSize="18"
              title="Move item up"
+              v-tooltip="'Move item up'"
              icon="arrow-up"
              @click="moveItem('up')"
            />
@ -51,6 +52,7 @@
              size="40px"
              iconSize="18"
              title="Move item down"
+              v-tooltip="'Move item down'"
              icon="arrow-down"
              @click="moveItem('down')"
            />
@ -58,6 +60,7 @@
              size="40px"
              iconSize="18"
              title="Edit item info"
+              v-tooltip="'Edit item info'"
              icon="cog"
              @click="toggleEditItemInfoMenu"
            >
@ -73,6 +76,7 @@
              size="40px"
              iconSize="18"
              title="Delete item"
+              v-tooltip="'Delete item'"
              icon="trash-alt"
              @click="deleteItem"
            />
@ -84,7 +88,8 @@
                icon
                small
                :ripple="false"
-                title="Actions"
+                aria-label="Actions"
+                v-tooltip="'Actions'"
                class="category-toolbar-mobile-menu-btn"
                v-on="on"
              >
@ -181,14 +186,14 @@
        <v-flex align-self-end>
          <v-btn
            class="mr-1"
-            title="Cancel"
+            aria-label="Cancel"
            @click="resetAndToggleEditItemInfoMenu"
          >
            Cancel
          </v-btn>
          <v-btn
            color="info"
-            title="Save"
+            aria-label="Save"
            :disabled="!isInfoSaveEnabled"
            @click="updateItemInfo"
          >
--- a/front/client/components/CategoryItemTraits.vue
+++ b/front/client/components/CategoryItemTraits.vue
@ -22,6 +22,7 @@
                class="trait-actions-menu-btn"
                size="22px"
                title="Actions"
+                v-tooltip="'Actions'"
                iconSize="14"
                icon="ellipsis-v"
                v-on='on'
--- a/front/client/components/CategorySettingsDialog.vue
+++ b/front/client/components/CategorySettingsDialog.vue
@ -79,7 +79,7 @@
        <v-spacer />
        <v-btn
          text
-          title="Cancel"
+          aria-label="Cancel"
          color="primary"
          @click.native="close"
        >
@ -87,7 +87,7 @@
        </v-btn>
        <v-btn
          color="info"
-          title="Submit"
+          aria-label="Submit"
          :disabled="!isValid || !hasChanges"
          @click="updateCategoryInfo"
        >
--- a/front/client/components/ConflictDialog.vue
+++ b/front/client/components/ConflictDialog.vue
@ -25,7 +25,7 @@
        </v-card>
        <v-btn
          class="conflict-dialog-btn"
-          title="Submit this version, disregard changes on server"
+          aria-label="Submit this version, disregard changes on server"
          @click="save(modified)"
        >
          Submit this version, disregard changes on server
@ -41,7 +41,7 @@
        </v-card>
        <v-btn
          class="conflict-dialog-btn"
-          title="Submit this version, disregard my changes"
+          aria-label="Submit this version, disregard my changes"
          @click="save(serverModified)"
        >
          Accept this version, disregard my changes
@ -60,7 +60,7 @@
        />
        <v-btn
          class="conflict-dialog-btn"
-          title="Submit merged version"
+          aria-label="Submit merged version"
          @click="save(mergedEdit)"
        >
          Submit the merged version
--- a/front/client/components/MarkdownEditor.vue
+++ b/front/client/components/MarkdownEditor.vue
@ -29,14 +29,14 @@
      <v-toolbar-items>
        <v-btn
          class="mr-2"
-          title="Cancel"
+          aria-label="Cancel"
          @click="cancel"
        >
          Cancel
        </v-btn>
        <v-btn
          color="info"
-          title="Save"
+          aria-label="Save"
          @click="save"
        >
          Save
--- a/front/client/components/Toolbar.vue
+++ b/front/client/components/Toolbar.vue
@ -18,7 +18,8 @@
    <v-btn
      text
      icon
-      title="Search"
+      aria-label="Search"
+      v-tooltip="'Search'"
      color="#fff"
      class="mobile-displayed"
      @click="toggleSearchField"
--- a/front/client/styles/code-highlight.css
+++ b/front/client/styles/code-highlight.css
--- a/front/client/styles/tooltip.css
+++ b/front/client/styles/tooltip.css
@ -0,0 +1,105 @@
+.tooltip .tooltip-inner {
+  font-size: 14px;
+  display: inline-block;
+  color: #fff;
+  background-color: #000;
+  padding: 8px 12px 10px;
+  border-radius: 8px;
+  font-weight: 700;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: black;
+  z-index: 1;
+}
+
+.tooltip[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.tooltip[x-placement^="top"] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.tooltip[x-placement^="right"] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.tooltip[x-placement^="left"] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip.popover .popover-inner {
+  background: #f9f9f9;
+  color: black;
+  padding: 24px;
+  border-radius: 5px;
+  box-shadow: 0 5px 30px rgba(black, 0.1);
+}
+
+.tooltip.popover .popover-arrow {
+  border-color: #f9f9f9;
+}
+
+.tooltip[aria-hidden="true"] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+
+.tooltip[aria-hidden="false"] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
--- a/front/package-lock.json
+++ b/front/package-lock.json
@ -8212,6 +8212,11 @@
      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
      "dev": true
    },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
    "posix-character-classes": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -11487,6 +11492,16 @@
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
    },
+    "v-tooltip": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.2.tgz",
+      "integrity": "sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "popper.js": "^1.15.0",
+        "vue-resize": "^0.4.5"
+      }
+    },
    "v8-compile-cache": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
@ -11570,6 +11585,11 @@
        "vue-class-component": "^7.0.1"
      }
    },
+    "vue-resize": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+    },
    "vue-router": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
--- a/front/package.json
+++ b/front/package.json
@ -43,6 +43,7 @@
    "moment": "^2.24.0",
    "normalize-url": "^4.3.0",
    "nprogress": "^0.2.0",
+    "v-tooltip": "^2.0.2",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-mixin-decorator": "^1.2.0",