feat(copy-button): add alt text for screen readers (#13)

Author: clemcode

components/ProseCodeCopyButton.vue

@@ -33,6 +33,7 @@ const copy = (e: MouseEvent) => {
 
 <template>
   <button :class="[(show || state === 'copied') && 'show' ]" @click="copy">
+    <span class="sr-only">Copy to clipboard</span>
     <span class="icon-wrapper">
       <Transition name="fade">
         <Icon v-if="state === 'copied'" :name="prose.copyButton?.iconCopied" size="18" class="copied" />

main.css

@@ -6,3 +6,14 @@ html {
 html.dark {
   color: $dt('colors.neutral.white')
 }
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0,0,0,0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}