Aria-label that indicates scrolling behaviour interferes in headings content for screen readers (#698)

Resolves: rdar://111006953

Author: marinaaisa

src/components/ContentNode/LinkableHeading.vue

@@ -17,10 +17,10 @@
       v-if="shouldLink"
       :to="{ hash: `#${anchor}` }"
       class="header-anchor"
-      aria-label="Scroll to section"
       @click="handleFocusAndScroll(anchor)"
     >
       <slot />
+      <span class="visuallyhidden" >{{ $t('accessibility.in-page-link') }}</span>
       <LinkIcon class="icon" aria-hidden="true" />
     </router-link>
     <template v-else>
@@ -89,8 +89,10 @@ $icon-margin: 7px;
     margin-left: $icon-margin;
   }
 
-  &:hover .icon {
-    display: inline;
+  &:hover, &:focus {
+    .icon {
+      display: inline;
+    }
   }
 }
 </style>

src/lang/locales/en-US.json

@@ -182,7 +182,8 @@
       "start": "start of code block",
       "end": "end of code block"
     },
-    "skip-navigation": "Skip Navigation"
+    "skip-navigation": "Skip Navigation",
+    "in-page-link": "in page link"
   },
   "select-language": "Select the language for this page",
   "icons": {

tests/unit/components/ContentNode/LinkableHeading.spec.js

@@ -48,7 +48,7 @@ describe('LinkableHeading', () => {
     expect(wrapper.attributes('id')).toBe('title');
     const headerAnchor = wrapper.find('.header-anchor');
     expect(headerAnchor.props('to')).toEqual({ hash: '#title' });
-    expect(headerAnchor.text()).toBe('Title');
+    expect(headerAnchor.text()).toBe('Title accessibility.in-page-link');
   });
 
   it('does not render anchor if there is no anchor', () => {