Merge pull request #15857 from edx/diana/change-icon

Use an X icon instead of text.

lms/static/sass/features/_course-experience.scss

@@ -86,6 +86,9 @@
 
   .dismiss-message {
     @include float(right);
+    .btn-link {
+        color: palette(grayscale, base);
+    }
   }
 }
 

openedx/features/course_experience/static/course_experience/fixtures/latest-update-fragment.html

 <div class="update-message">
     <h3>Latest Update</h3>
     <div class="dismiss-message">
-        <button type="button" class="btn-link">Dismiss</button>
+        <button type="button" class="btn-link">
+            <span class="sr">Dismiss</span>
+            <span class="icon fa fa-times" aria-hidden="true"></span>
+        </button>
     </div>
     This is an update.
 </div>

openedx/features/course_experience/static/course_experience/fixtures/welcome-message-fragment.html

 <div class="welcome-message">
     <div class="dismiss-message">
-        <button type="button" class="btn-link">${_("Dismiss")}</button>
+        <button type="button" class="btn-link">
+            <span class="sr">Dismiss</span>
+            <span class="icon fa fa-times" aria-hidden="true"></span>
+        </button>
     </div>
     This is a useful welcome message!
 </div>

openedx/features/course_experience/templates/course_experience/latest-update-fragment.html

@@ -11,7 +11,10 @@ from openedx.core.djangolib.markup import HTML
 <%block name="content">
 <div class="update-message">
     <div class="dismiss-message">
-        <button type="button" class="btn-link">${_("Dismiss")}</button>
+        <button type="button" class="btn-link">
+            <span class="sr">${_("Dismiss")}</span>
+            <span class="icon fa fa-times" aria-hidden="true"></span>
+        </button>
     </div>
     <h3>${_("Latest Update")}</h3>
 

openedx/features/course_experience/templates/course_experience/welcome-message-fragment.html

@@ -12,7 +12,10 @@ from openedx.core.djangolib.markup import HTML
 <%block name="content">
 <div class="welcome-message">
     <div class="dismiss-message">
-        <button type="button" class="btn-link">${_("Dismiss")}</button>
+        <button type="button" class="btn-link">
+            <span class="sr">${_("Dismiss")}</span>
+            <span class="icon fa fa-times" aria-hidden="true"></span>
+        </button>
     </div>
 
     ${HTML(welcome_message_html)}