Merge pull request #19358 from edx/REVE-1

Fix content gating a11y issues

lms/djangoapps/courseware/tests/helpers.py

@@ -361,7 +361,8 @@ def get_expiration_banner_text(user, course):
     expiration_date = (now() + timedelta(weeks=4)).strftime('%b %-d')
     upgrade_link = verified_upgrade_deadline_link(user=user, course=course)
     bannerText = 'Your access to this course expires on {expiration_date}. \
-        <a href="{upgrade_link}">Upgrade now</a> for unlimited access.'.format(
+        <a href="{upgrade_link}">Upgrade now <span class="sr-only">to retain access past {expiration_date}.\
+        </span></a><span aria-hidden="true">for unlimited access.</span>'.format(
         expiration_date=expiration_date,
         upgrade_link=upgrade_link
     )

lms/static/sass/bootstrap/_components.scss

@@ -9,6 +9,13 @@
   .user-messages {
     margin-top: $baseline;
   }
+
+  .user-messages-ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
 }
 
 // Alerts
@@ -23,3 +30,10 @@
     margin-left: $baseline;
   }
 }
+
+.alert.alert-info a {
+  // Need to have sufficient contrast for blue links on blue background
+  // Based this on some existing css for this use case
+  color: #245269;
+  font-weight: bold;
+}

lms/static/sass/elements/_banners.scss

@@ -58,6 +58,13 @@ $full-width-banner-margin: 20px;
       color: $link-color;
       text-decoration: underline !important;
     }
+
+  .user-messages-ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
   }
 
   .alert {

lms/static/sass/features/_content-type-gating.scss

@@ -5,28 +5,38 @@
     justify-content: space-between;
     border: lightgrey 1px solid;
     padding: 15px 20px;
-}
-.content-paywall h3 {
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-.content-paywall .fa-lock {
-    color: black;
-    margin-right: 10px;
-    font-size: 24px;
-    margin-left: 5px;
-}
-.content-paywall .certDIV_1 {
-    color: rgb(25, 125, 29);
-    height: 20px;
-    width: 300px;
-    font: normal normal 600 normal 14px / 20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.content-paywall .certA_2 {
-    text-decoration: underline !important;
-    color: rgb(0, 117, 180);
-    font: normal normal 400 normal 16px / 25.6px 'Open Sans';
-}
-.content-paywall img {
-    height: 60px;
+
+    h3 {
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+
+    .fa-lock {
+        color: black;
+        margin-right: 10px;
+        font-size: 24px;
+        margin-left: 5px;
+    }
+
+    .certDIV_1 {
+        color: rgb(25, 125, 29);
+        height: 20px;
+        width: 300px;
+        font: normal normal 600 normal 14px / 20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    }
+
+    .certA_1 {
+        text-decoration: underline !important;
+        color: rgb(0, 117, 180);
+        font: normal normal 400 normal 16px / 25.6px 'Open Sans';
+    }
+
+    .certSPAN_1 {
+        padding: 10px 0;
+    }
+
+    img {
+        height: 60px;
+    }
+
 }

lms/templates/fields/message_banner.underscore

@@ -1,4 +1,4 @@
-<div class="wrapper-msg urgency-<%= urgency %> <%= type %>">
+<div class="wrapper-msg urgency-<%- urgency %> <%- type %>" role="alert">
     <div class="msg">
         <div class="msg-content">
             <div class="copy">

lms/templates/page_banner.html

@@ -24,13 +24,17 @@ if site_status_message:
 
 % if banner_messages:
     <div class="page-banner">
-        <div class="user-messages">
-            % for message in banner_messages:
-                <div class="alert ${message.css_class}" role="alert">
-                    <span class="icon icon-alert fa ${message.icon_class}" aria-hidden="true"></span>
-                    ${HTML(message.message_html)}
-                </div>
-            % endfor
+        <div class="user-messages" role="complementary" aria-label="messages">
+            <ul class="user-messages-ul">
+                % for message in banner_messages:
+                    <li>
+                        <div class="alert ${message.css_class}" role="alert">
+                            <span class="icon icon-alert fa ${message.icon_class}" aria-hidden="true"></span>
+                            ${HTML(message.message_html)}
+                        </div>
+                    </li>
+                % endfor
+            </ul>
         </div>
     </div>
 % endif

openedx/features/content_type_gating/templates/content_type_gating/access_denied_message.html

@@ -1,21 +1,21 @@
 {% load i18n %}
 {% load static %}
-<div class="content-paywall">
+<div class="content-paywall" role="group" aria-label="{% trans 'Content available only to verified track learners' %}">
     <div>
         <h3>
             <span class="fa fa-lock" aria-hidden="true"></span>
             {% trans "Verified Track Access" %}
         </h3>
-        <span style=" padding: 10px 0;">
+        <span class="certSPAN_1">
             {% trans "Graded assessments are available to Verified Track learners." %}
         </span>
         {% if not mobile_app and ecommerce_checkout_link %}
         <span class="certDIV_1" style="">
-            <a href="{{ecommerce_checkout_link}}" class="certA_2">
+            <a href="{{ecommerce_checkout_link}}" class="certA_1">
                 {% trans "Upgrade to unlock" %}  (${{min_price}} USD)
             </a>
         </span>
         {% endif %}
     </div>
-    <img src="{% static 'images/edx-verified-mini-cert.png' %}">
+    <img src="{% static 'images/edx-verified-mini-cert.png' %}" alt="">
 </div>

openedx/features/course_duration_limits/access.py

@@ -20,7 +20,7 @@ from lms.djangoapps.courseware.masquerade import get_course_masquerade, is_masqu
 from openedx.core.djangoapps.catalog.utils import get_course_run_details
 from openedx.core.djangoapps.content.course_overviews.models import CourseOverview
 from openedx.core.djangoapps.util.user_messages import PageLevelMessages
-from openedx.core.djangolib.markup import HTML
+from openedx.core.djangolib.markup import HTML, Text
 from openedx.features.course_duration_limits.models import CourseDurationLimitConfig
 
 MIN_DURATION = timedelta(weeks=4)
@@ -132,11 +132,18 @@ def register_course_expired_message(request, course):
         )
     else:
         upgrade_message = _('Your access to this course expires on {expiration_date}. \
-                <a href="{upgrade_link}">Upgrade now</a> for unlimited access.')
+                    {a_open}Upgrade now {sronly_span_open}to retain access past {expiration_date}.\
+                    {span_close}{a_close}{sighted_only_span_open}for unlimited access.{span_close}')
         PageLevelMessages.register_info_message(
             request,
-            HTML(upgrade_message).format(
+            Text(upgrade_message).format(
+                a_open=HTML('<a href="{upgrade_link}">').format(
+                    upgrade_link=verified_upgrade_deadline_link(user=request.user, course=course)
+                ),
+                sronly_span_open=HTML('<span class="sr-only">'),
+                sighted_only_span_open=HTML('<span aria-hidden="true">'),
+                span_close=HTML('</span>'),
+                a_close=HTML('</a>'),
                 expiration_date=expiration_date.strftime('%b %-d'),
-                upgrade_link=verified_upgrade_deadline_link(user=request.user, course=course)
             )
         )

openedx/features/course_experience/tests/views/test_course_home.py

@@ -266,7 +266,7 @@ class TestCourseHomePageAccess(CourseHomePageTestCase):
         self.assertContains(response, TEST_WELCOME_MESSAGE, count=expected_count)
 
         # Verify that the expected message is shown to the user
-        self.assertContains(response, '<div class="user-messages">', count=1 if expected_message else 0)
+        self.assertContains(response, '<div class="user-messages"', count=1 if expected_message else 0)
         if expected_message:
             self.assertContains(response, expected_message)
 
@@ -306,7 +306,7 @@ class TestCourseHomePageAccess(CourseHomePageTestCase):
         self.assertContains(response, 'Learn About Verified Certificate', count=(1 if is_enrolled else 0))
 
         # Verify that the expected message is shown to the user
-        self.assertContains(response, '<div class="user-messages">', count=1 if expected_message else 0)
+        self.assertContains(response, '<div class="user-messages"', count=1 if expected_message else 0)
         if expected_message:
             self.assertContains(response, expected_message)