From 9dd37604fdf8ba38548b022792e140fddaa878d0 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <109785089+ibrahimjaved12@users.noreply.github.com>
Date: Tue, 28 Jan 2025 19:14:33 +0500
Subject: [PATCH] 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
---
 .../layouts/partials/external_resource_link.html    | 13 +++++++++----
 base-theme/layouts/partials/link.html               |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/base-theme/layouts/partials/external_resource_link.html b/base-theme/layouts/partials/external_resource_link.html
index 60802775b..8823096f1 100644
--- a/base-theme/layouts/partials/external_resource_link.html
+++ b/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 -}}
diff --git a/base-theme/layouts/partials/link.html b/base-theme/layouts/partials/link.html
index 5a260c2f2..a8cc6eb42 100644
--- a/base-theme/layouts/partials/link.html
+++ b/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 -}}