Merge pull request #17294 from edx/HarryRein/a11y-footer-upgrade-div

Ensuring div and not button inside link tag for a11y.

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

@@ -101,6 +101,12 @@
         color: theme-color("inverse");
         background-image: none;
         box-shadow: none;
+        cursor: pointer;
+
+        &:hover {
+          background-color: theme-color("inverse");
+          color: theme-color("success");
+        }
 
         @media (max-width: 960px) {
           & {

openedx/features/course_experience/templates/course_experience/course-sock-fragment.html

@@ -59,9 +59,9 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
                 % endif
                 <img class="mini-cert" alt="Example Certificate Image" src="${static.url('course_experience/images/verified-cert.png')}"/>
                 <a href="${upgrade_url}">
-                    <button type="button" class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
+                    <div class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
                         ${Text(_('Upgrade ({course_price})')).format(course_price=HTML(course_price))}
-                    </button>
+                    </div>
                 </a>
             </div>
         </div>