refactor: using aria-label intead of sr-only

Author: ktquez

src/.vuepress/theme/components/BackToTop.vue

@@ -3,8 +3,8 @@
     :href="anchor"
     class="fixed bottom-0 right-0 z-10 p-6 mb-10 mr-16"
     :class="{ 'block': show, 'hidden': !show }"
+    :aria-label="$themeLocaleConfig.backToTopText"
   >
-    <span class="sr-only">{{ $themeLocaleConfig.backToTopText }}</span>
     <vp-icon
       name="back-to-top"
       size="24"

src/.vuepress/theme/components/TheFooter.vue

@@ -29,8 +29,8 @@
               class="block p-5 border border-solid rounded-full c-border-color bg-main hover:border-accent-primary"
               target="_blank"
               rel="me noopener"
+              :aria-label="`${social.name} Vue A11y (${$themeLocaleConfig.externalLinkText})`"
             >
-              <span class="sr-only">{{ social.name }} Vue A11y {{ ($themeLocaleConfig.externalLinkText) }}</span>
               <vp-icon
                 :name="social.icon"
                 size="1.5rem"

src/.vuepress/theme/components/WebMentions.vue

@@ -36,7 +36,6 @@
               :aria-label="`Ir para o site do ${like.author.name}`"
               rel="nofollow"
             >
-              <span class="sr-only">{{ like.author.name }}</span>
               <img
                 class="rounded-full"
                 :src="like.author.photo"
@@ -80,7 +79,6 @@
               :aria-label="`Ir para o site do ${repost.author.name}`"
               rel="nofollow"
             >
-              <span class="sr-only">{{ repost.author.name }}</span>
               <img
                 class="rounded-full"
                 :src="repost.author.photo"
@@ -135,7 +133,6 @@
                 rel="nofollow"
                 itemprop="url"
               >
-                <span class="sr-only">{{ mention.author.name }}</span>
                 <img
                   id="author-comment-image"
                   class="rounded-full"