AlaskaAirlines / auro-hyperlink

Custom hyperlink element to connect webpages or data items to one another
https://auro.alaskaair.com/components/auro/hyperlink
Apache License 2.0
2 stars 2 forks source link

Auro-hyperlink issue - Screen reader is not reading text indicating that this is a link to an external site. #165

Open mrdaas opened 1 year ago

mrdaas commented 1 year ago

Describe the bug

Problem: When using auro-hyperlink for an external domain it is not reading the following text with-in shadow root:

**title: This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites.

desc: Notice indicator to alert user with disabilities that action will result in the browser opening a new context.

This occurs in an as.com Sitecore 9 page such as:

This occurs in the Auro Design Guide page for hyperlink

Verify the version of @aurodesignsystem/auro-hyperlink you have installed

The current version is: In SC9 the current version is: auro 2.2.0. Not sure what the Auro Design guide version is. I'm assuming its 3.3.0, but maybe wrong.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://auro.alaskaair.com/components/auro/hyperlink/a11y
  2. Use a screen reader. The reader that I used was a Chrome ext called Screen Reader 53.0.2784.13
  3. Tab to the first external site step-out, which in this case is "Reference Accessibility Techniques for Links". This is a normal tag and it reads the information for a step-out for accessibility correctly.
  4. Tab to the step-out link below this that is an , in this case that link is "Web AIM Links and Hypertext". Only the hyperlink text is read, none of the text or <desc> text is read. </li> </ol> <p>This issue can be reproduced on the SC9 page: <a rel="noreferrer nofollow" target="_blank" href="https://www.alaskaair.com/content/airports/washington/bellingham/bellingham-international?lid=travel:info-AirportsGuides-bellingham&int=_AS_TRAVINFO_-prodID:AirportsGuides-bellingham">https://www.alaskaair.com/content/airports/washington/bellingham/bellingham-international?lid=travel:info-AirportsGuides-bellingham&int=_AS_TRAVINFO_-prodID:AirportsGuides-bellingham</a></p> <p>For this page, just tab to the "Website" or "Get Directions" link. Only the link text is heard. No Title or Description text of the link is triggered. </p> <p>Are you able to reproduce this issue on the <a rel="noreferrer nofollow" target="_blank" href="https://auro.alaskaair.com/">Auro doc site</a>?</p> <ul> <li>[x] YES</li> <li>[ ] NO</li> </ul> <h2>Expected behavior</h2> <p>When a link that goes to an external domain or opens a new tab is highlighted with a screenreader, the title and/or description in the shadow root should trigger to help indicate the behavior of this type of link, similar to how an <code><a></code> tag works ( see example listed in reproduction steps for what was expected of the <auro-hyperlink> ).</p> <h2>Screenshots</h2> <!-- If applicable, add screenshots to help explain your problem. --> <h2>Desktop (please complete the following information):</h2> <ul> <li>OS: [e.g. iOS] - Mac OS 13.3.1 (22E261)</li> <li>Browser [e.g. chrome, safari] - Chrome</li> <li>Version [e.g. 22] - Version 108.0.5359.71 </li> </ul> <h2>Smartphone (please complete the following information):</h2> <ul> <li>Device: [e.g. iPhone6]</li> <li>OS: [e.g. iOS8.1]</li> <li>Browser [e.g. stock browser, safari]</li> <li>Version [e.g. 22]</li> </ul> <h2>Additional context</h2> <!-- Add any other context about the problem here. --> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>