Fix #612: Improved accessibility by using main/section/nav tags and aria-labels in most critical places

front/src/components/library/Album.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <main>
     <div v-if="isLoading" class="ui vertical segment" v-title="">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="album">
-      <div :class="['ui', 'head', {'with-background': album.cover.original}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
+      <section :class="['ui', 'head', {'with-background': album.cover.original}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted sound yellow icon"></i>
@@ -38,86 +38,93 @@
             <translate>View on MusicBrainz</translate>
           </a>
         </div>
-      </div>
-      <div class="ui vertical stripe segment">
+      </section>
+      <section class="ui vertical stripe segment">
         <h2>
           <translate>Tracks</translate>
         </h2>
         <track-table v-if="album" :artist="album.artist" :display-position="true" :tracks="album.tracks"></track-table>
-      </div>
-      <div class="ui vertical stripe segment">
+      </section>
+      <section class="ui vertical stripe segment">
         <h2>
           <translate>User libraries</translate>
         </h2>
         <library-widget :url="'albums/' + id + '/libraries/'">
           <translate slot="subtitle">This album is present in the following libraries:</translate>
         </library-widget>
-      </div>
+      </section>
     </template>
-  </div>
+  </main>
 </template>
 
 <script>
-import axios from 'axios'
-import logger from '@/logging'
-import backend from '@/audio/backend'
-import PlayButton from '@/components/audio/PlayButton'
-import TrackTable from '@/components/audio/track/Table'
-import LibraryWidget from '@/components/federation/LibraryWidget'
+import axios from "axios"
+import logger from "@/logging"
+import backend from "@/audio/backend"
+import PlayButton from "@/components/audio/PlayButton"
+import TrackTable from "@/components/audio/track/Table"
+import LibraryWidget from "@/components/federation/LibraryWidget"
 
-const FETCH_URL = 'albums/'
+const FETCH_URL = "albums/"
 
 export default {
-  props: ['id'],
+  props: ["id"],
   components: {
     PlayButton,
     TrackTable,
     LibraryWidget
   },
-  data () {
+  data() {
     return {
       isLoading: true,
       album: null
     }
   },
-  created () {
+  created() {
     this.fetchData()
   },
   methods: {
-    fetchData () {
+    fetchData() {
       var self = this
       this.isLoading = true
-      let url = FETCH_URL + this.id + '/'
+      let url = FETCH_URL + this.id + "/"
       logger.default.debug('Fetching album "' + this.id + '"')
-      axios.get(url).then((response) => {
+      axios.get(url).then(response => {
         self.album = backend.Album.clean(response.data)
         self.isLoading = false
       })
     }
   },
   computed: {
-    labels () {
+    labels() {
       return {
-        title: this.$gettext('Album')
+        title: this.$gettext("Album")
       }
     },
-    wikipediaUrl () {
-      return 'https://en.wikipedia.org/w/index.php?search=' + encodeURI(this.album.title + ' ' + this.album.artist.name)
+    wikipediaUrl() {
+      return (
+        "https://en.wikipedia.org/w/index.php?search=" +
+        encodeURI(this.album.title + " " + this.album.artist.name)
+      )
     },
-    musicbrainzUrl () {
+    musicbrainzUrl() {
       if (this.album.mbid) {
-        return 'https://musicbrainz.org/release/' + this.album.mbid
+        return "https://musicbrainz.org/release/" + this.album.mbid
       }
     },
-    headerStyle () {
+    headerStyle() {
       if (!this.album.cover.original) {
-        return ''
+        return ""
       }
-      return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.album.cover.original) + ')'
+      return (
+        "background-image: url(" +
+        this.$store.getters["instance/absoluteUrl"](this.album.cover.original) +
+        ")"
+      )
     }
   },
   watch: {
-    id () {
+    id() {
       this.fetchData()
     }
   }
@@ -126,5 +133,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 </style>