Add semantic roles to make the site more accessible

src/renderer/App.js

@@ -60,7 +60,7 @@ export default defineComponent({
       return this.$store.getters.getShowProgressBar
     },
     isRightAligned: function () {
-      return this.$i18n.locale === 'ar'
+      return this.locale === 'ar' || this.locale === 'he'
     },
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
@@ -102,6 +102,10 @@ export default defineComponent({
       return this.$store.getters.getSecColor
     },
 
+    locale: function() {
+      return this.$i18n.locale.replace('_', '-')
+    },
+
     systemTheme: function () {
       return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     },
@@ -126,6 +130,8 @@ export default defineComponent({
 
     secColor: 'checkThemeSettings',
 
+    locale: 'setLocale',
+
     $route () {
       // react to route changes...
       // Hide top nav filter panel on page change
@@ -135,6 +141,7 @@ export default defineComponent({
   created () {
     this.checkThemeSettings()
     this.setWindowTitle()
+    this.setLocale()
   },
   mounted: function () {
     this.grabUserSettings().then(async () => {
@@ -500,6 +507,10 @@ export default defineComponent({
       }
     },
 
+    setLocale: function() {
+      document.documentElement.setAttribute('lang', this.locale)
+    },
+
     /**
      * provided to all child components, see `provide` near the top of this file
      * after injecting it, they can show outlines during keyboard navigation

src/renderer/App.vue

@@ -11,6 +11,7 @@
     <side-nav ref="sideNav" />
     <ft-flex-box
       class="flexBox routerView"
+      role="main"
     >
       <div
         v-if="showUpdatesBanner || showBlogBanner"

src/renderer/components/ft-input/ft-input.vue

@@ -49,6 +49,7 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :spellcheck="spellcheck"
+        :aria-label="!showLabel ? placeholder : null"
         @input="e => handleInput(e.target.value)"
         @focus="handleFocus"
         @blur="handleInputBlur"

src/renderer/components/ft-list-channel/ft-list-channel.vue

@@ -11,6 +11,7 @@
       <router-link
         :to="`/channel/${id}`"
         tabindex="-1"
+        aria-hidden="true"
       >
         <img
           :src="thumbnail"
@@ -24,7 +25,9 @@
         class="title"
         :to="`/channel/${id}`"
       >
-        {{ channelName }}
+        <h3 class="h3Title">
+          {{ channelName }}
+        </h3>
       </router-link>
       <div class="infoLine">
         <span

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -10,6 +10,8 @@
       <router-link
         class="thumbnailLink"
         :to="`/playlist/${playlistId}`"
+        tabindex="-1"
+        aria-hidden="true"
       >
         <img
           alt=""
@@ -32,7 +34,7 @@
         class="title"
         :to="`/playlist/${playlistId}`"
       >
-        {{ title }}
+        <h3 class="h3Title">{{ title }}</h3>
       </router-link>
       <div class="infoLine">
         <router-link

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -14,6 +14,7 @@
       <router-link
         class="thumbnailLink"
         tabindex="-1"
+        aria-hidden="true"
         :to="{
           path: `/watch/${id}`,
           query: playlistIdFinal ? {playlistId: playlistIdFinal} : {}
@@ -75,7 +76,7 @@
           query: playlistIdFinal ? {playlistId: playlistIdFinal} : {}
         }"
       >
-        {{ displayTitle }}
+        <h3 class="h3Title">{{ displayTitle }}</h3>
       </router-link>
       <div class="infoLine">
         <router-link

src/renderer/components/side-nav/side-nav.vue

@@ -3,6 +3,7 @@
     ref="sideNav"
     class="sideNav"
     :class="[{closed: !isOpen}, applyHiddenLabels]"
+    role="navigation"
   >
     <div
       class="inner"

src/renderer/components/top-nav/top-nav.vue

@@ -2,6 +2,7 @@
   <div
     class="topNav"
     :class="{ topNavBarColor: barColor }"
+    role="navigation"
   >
     <div class="side">
       <font-awesome-icon

src/renderer/scss-partials/_ft-list-item.scss

@@ -304,3 +304,11 @@ $watched-transition-duration: 0.5s;
 .upcoming {
   text-transform: uppercase;
 }
+
+// we use h3 for semantic reasons but don't want to keep the h3 style
+.h3Title {
+  margin-block-start: inherit;
+  margin-block-end: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}

src/renderer/views/Hashtag/Hashtag.vue

@@ -6,7 +6,7 @@
     />
     <div v-else>
       <ft-card>
-        <h3>{{ hashtag }}</h3>
+        <h2>{{ hashtag }}</h2>
         <div
           class="elementList"
         >

src/renderer/views/History/History.vue

@@ -8,7 +8,7 @@
       v-show="!isLoading"
       class="card"
     >
-      <h3>{{ $t("History.History") }}</h3>
+      <h2>{{ $t("History.History") }}</h2>
       <ft-input
         v-show="fullData.length > 0"
         ref="searchBar"

src/renderer/views/Popular/Popular.vue

@@ -8,7 +8,7 @@
       v-else
       class="card"
     >
-      <h3>{{ $t("Most Popular") }}</h3>
+      <h2>{{ $t("Most Popular") }}</h2>
       <ft-element-list
         :data="shownResults"
       />

src/renderer/views/ProfileSettings/ProfileSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ft-card class="card">
-      <h3>{{ $t("Profile.Profile Manager") }}</h3>
+      <h2>{{ $t("Profile.Profile Manager") }}</h2>
       <ft-flex-box
         class="profileList"
       >

src/renderer/views/Search/Search.vue

@@ -10,7 +10,7 @@
       v-else
       class="card"
     >
-      <h3>{{ $t("Search Filters.Search Results") }}</h3>
+      <h2>{{ $t("Search Filters.Search Results") }}</h2>
       <ft-element-list
         :data="shownResults"
       />

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ft-card class="card">
-      <h3>{{ $t('Channels.Title') }}</h3>
+      <h2>{{ $t('Channels.Title') }}</h2>
       <ft-input
         v-show="subscribedChannels.length > 0"
         ref="searchBarChannels"

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ft-card class="card">
-      <h3>{{ $t("Subscriptions.Subscriptions") }}</h3>
+      <h2>{{ $t("Subscriptions.Subscriptions") }}</h2>
       <ft-flex-box
         class="subscriptionTabs"
         role="tablist"

src/renderer/views/Trending/Trending.vue

@@ -8,7 +8,7 @@
       v-else
       class="card"
     >
-      <h3>{{ $t("Trending.Trending") }}</h3>
+      <h2>{{ $t("Trending.Trending") }}</h2>
       <ft-flex-box
         class="trendingInfoTabs"
         role="tablist"

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -8,14 +8,14 @@
       v-show="!isLoading"
       class="card"
     >
-      <h3>
+      <h2>
         {{ $t("User Playlists.Your Playlists") }}
         <ft-tooltip
           class="selectTooltip"
           position="bottom"
           :tooltip="$t('User Playlists.Playlist Message')"
         />
-      </h3>
+      </h2>
       <ft-input
         v-show="fullData.length > 0"
         ref="searchBar"