D8CORE-2536: adding aria-label

[cjwest]

READY for review.

Summary

• Adds <span class="su-global-footer__link--external">(link is external)</span> to the external links in the global footer

Needed By (Date)

Soon

Urgency

Not urgent

Steps to Test

1. Check out this branch in Stanford Basic
2. run npm install in Stanford Basic
3. Run npm run publish to populate /decanter in the Stanford Basic templates directory
4. Inspect global footer to verify <span class="su-global-footer__link--external">(link is external)</span> accompanies every external link in the global footer.

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?
  D8Core, Decanter, anything using Decanter

Associated Issues and/or People

• JIRA ticket: https://stanfordits.atlassian.net/browse/D8CORE-2536
• Related PRs: D8CORE-2544: added (link is external) to the brandbar #717
• Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
• Anyone who should be notified? (@mention them here)

See Also

• PR Checklist

[sherakama]

Feedback provided.

[yvonnetangsu]

@cjwest I'm curious - would it get repetitive if all the links in the global footer have "external link" announced with them? I'm wonder if it is a possibility to just add it once in a SR only heading that all the navigation elements in the global footer are external?

[cjwest]

@yvonnetangsu,
That's a good point regarding redundancy. Would you happen to know of any examples where it's announced only once?

[yvonnetangsu]

@yvonnetangsu,
That's a good point regarding redundancy. Would you happen to know of any examples where it's announced only once?

Hey @cjwest :) admittedly I haven't really looked into this. I'm thinking maybe a SR only Heading that says something along the line of "This is a footer with common navigation menus for most Stanford website and consists of mostly external links". Maybe something we could talk to Level Access about in an office hour.

That is a super long heading of course.... so maybe something shorter like "Stanford global footer with common important external links". Hmm.

[cjwest]

I spoke with Clare O'Keefe at SOAP office hours.
Because people often navigate a site just by the links, putting it on a containing element element won't get attention by the screen reader. It would be best to add the text to every link.

[sherakama]

I spoke with Clare O'Keefe at SOAP office hours.
Because people often navigate a site just by the links, putting it on a containing element element won't get attention by the screen reader. It would be best to add the text to every link.

Good to know. Thanks for digging into this.

[cjwest]

Hi @yvonnetangsu,
Let me know if this makes sense. I'm assigning this to you to merge because I'm thinking you're more familiar with the global footer. Please let me know if you think differently.

[yvonnetangsu]

Hi @yvonnetangsu,
Let me know if this makes sense. I'm assigning this to you to merge because I'm thinking you're more familiar with the global footer. Please let me know if you think differently.

HI @cjwest Sure, I'll look at this tomorrow! Thanks.

[yvonnetangsu]

@cjwest This looks good to me - I'm testing this in the Decanter developer environment, not on Stanford Basics. It looks like another small PR might be needed to add the (link is external) ally text to the Logo link element as well, since the logo link is included in the Global Footer. I'm going to approve this PR though. Thanks for working on this.

[cjwest]

Oh thank you @yvonnetangsu!
Good catch! I created another ticket for the logo:
https://stanfordits.atlassian.net/browse/D8CORE-2730