Improve accessibility for external links by adding aria-label (#1494)

* Improve accessibility for external links by adding aria-label

* Add aria label for warning dialog

base-theme/layouts/partials/external_resource_link.html

@@ -3,10 +3,14 @@
 {{- $hasWarning := default true .has_external_license_warning -}}
 {{- $className := printf "%s %s" "external-link" (default "" .class) -}}
 {{- $onClick := "" -}}
+{{- $ariaLabel := "" -}}
 {{- if $hasWarning -}}
   {{- $className = printf "%s %s" "external-link-warning" $className -}}
+  {{- $ariaLabel = printf "%s (opens warning dialog)" $text -}}
   {{/* Prevents external links from being clicked before corresponding JS is fully loaded. */}}
   {{- $onClick = "event.preventDefault()" -}}
+{{- else -}}
+  {{- $ariaLabel = printf "%s (opens in a new tab)" $text -}}
 {{- end -}}
 {{- if not (in $href "ocw.mit.edu") -}}
   {{- partial "link" (dict
@@ -15,14 +19,15 @@
       "class" $className
       "onClick" $onClick
       "target" "_blank"
+      "ariaLabel" $ariaLabel
     )
   -}}
 {{- else -}}
   {{- partial "link" (dict
-    "href" $href
-    "text" $text
-    "class" .class
-    "onClick" ""
+      "href" $href
+      "text" $text
+      "class" .class
+      "onClick" ""
     )
   -}}
 {{- end -}}

base-theme/layouts/partials/link.html

@@ -4,6 +4,7 @@
 {{- $text := .text | default "" -}}
 {{- $target := .target | default "" -}}
 {{- $onClick := .onClick | default "" -}}
+{{- $ariaLabel := .ariaLabel | default "" -}}
 {{- $stripLinkOffline := .stripLinkOffline | default false -}}
 {{- $hideLinkOffline := .hideLinkOffline | default false -}}
 {{- if $stripLinkOffline -}}
@@ -13,7 +14,7 @@
   {{- $class = print $class " hide-offline" -}}
 {{- end -}}
 {{- if or $href $name -}}
-<a {{ if $name }} name="{{ $name }}"{{ end }} {{ if $class }} class="{{ $class }}" {{ end }} {{ if $target }} target="{{ $target }}" {{ end }} {{ if $href }} href="{{ $href }}"{{ end }} {{ if $onClick }} onclick="{{ $onClick | safeJS }}" {{ end }} >{{ $text }}</a>
+<a {{ if $name }} name="{{ $name }}"{{ end }} {{ if $class }} class="{{ $class }}" {{ end }} {{ if $target }} target="{{ $target }}" {{ end }} {{ if $href }} href="{{ $href }}"{{ end }} {{ if $ariaLabel }} aria-label="{{ $ariaLabel }}" {{ end }} {{ if $onClick }} onclick="{{ $onClick | safeJS }}" {{ end }}>{{ $text }}</a>
 {{- else -}}
 <span>{{ $text }}</span>
 {{- end -}}