retrap focus for seat unenroll survey a11y

learner-4715

lms/djangoapps/support/static/support/jsx/entitlements/data/constants/formTypes.js

 export const formTypes = {
   REISSUE: 'reissue',
   CREATE: 'create',
-};
\ No newline at end of file
+};

lms/static/js/learner_dashboard/views/unenroll_view.js

@@ -11,6 +11,10 @@ class UnenrollView extends Backbone.View {
     super(Object.assign({}, defaults, options));
   }
 
+  handleTrigger(triggerElement) {
+    this.$previouslyFocusedElement = triggerElement;
+  }
+
   switchToSlideOne() {
     // Randomize survey option order
     const survey = document.querySelector('.options');
@@ -20,6 +24,16 @@ class UnenrollView extends Backbone.View {
     this.$('.inner-wrapper header').hide();
     this.$('#unenroll_form').hide();
     this.$('.slide1').removeClass('hidden');
+
+    if (window.trapFocusForAccessibleModal) {
+      window.trapFocusForAccessibleModal(
+        this.$previouslyFocusedElement,
+        window.focusableElementsString,
+        this.closeButtonSelector,
+        this.modalId,
+        this.mainPageSelector,
+      );
+    }
   }
 
   switchToSlideTwo() {
@@ -39,6 +53,16 @@ class UnenrollView extends Backbone.View {
     this.$('.slide2').removeClass('hidden');
     this.$('.reasons_survey .return_to_dashboard').attr('href', this.urls.dashboard);
     this.$('.reasons_survey .browse_courses').attr('href', this.urls.browseCourses);
+
+    if (window.trapFocusForAccessibleModal) {
+      window.trapFocusForAccessibleModal(
+        this.$previouslyFocusedElement,
+        window.focusableElementsString,
+        this.closeButtonSelector,
+        this.modalId,
+        this.mainPageSelector,
+      );
+    }
   }
 
   unenrollComplete(event, xhr) {
@@ -61,10 +85,27 @@ class UnenrollView extends Backbone.View {
     }
   }
 
+  startSubmit() {
+    this.$('.submit').prop('disabled', true);
+  }
+
   initialize(options) {
+    const view = this;
+
     this.urls = options.urls;
     this.isEdx = options.isEdx;
 
+    this.closeButtonSelector = '.unenroll-modal .close-modal';
+    this.$closeButton = $(this.closeButtonSelector);
+    this.modalId = `#${this.$el.attr('id')}`;
+    this.mainPageSelector = '#dashboard-main';
+
+    this.triggerSelector = '.action-unenroll';
+    $(this.triggerSelector).each(function attachTriggerHandler(index, element) {
+      $(element).on('click', view.handleTrigger.bind($(element)));
+    });
+
+    this.$('.submit .submit-button').on('click', this.startSubmit.bind(this));
     $('#unenroll_form').on('ajax:complete', this.unenrollComplete.bind(this));
   }
 }

lms/templates/dashboard.html

@@ -308,7 +308,7 @@ from student.models import CourseEnrollment
 </div>
 
 <div id="unenroll-modal" class="modal unenroll-modal" aria-hidden="true">
-  <div class="inner-wrapper" role="dialog" aria-labelledby="unenrollment-modal-title">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="unenrollment-modal-title" aria-live="polite">
     <button class="close-modal">
       <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
@@ -333,7 +333,7 @@ from student.models import CourseEnrollment
       <input name="course_id" id="unenroll_course_id" type="hidden" />
       <input name="enrollment_action" type="hidden" value="unenroll" />
       <div class="submit">
-        <input name="submit" type="submit" value="${_("Unenroll")}" />
+        <input class="submit-button" name="submit" type="submit" value="${_("Unenroll")}" />
       </div>
     </form>
   </div>

lms/templates/dashboard/_dashboard_entitlement_unenrollment_modal.html

@@ -5,7 +5,7 @@ from django.utils.translation import ugettext as _
 %>
 
 <div id="entitlement-unenrollment-modal" class="entitlement-unenrollment-modal js-entitlement-unenrollment-modal js-modal" aria-hidden="true">
-  <div class="entitlement-unenrollment-modal-inner-wrapper" role="dialog" aria-modal="true" aria-labelledby="entitlement-unenrollment-modal-title">
+  <div class="entitlement-unenrollment-modal-inner-wrapper" role="dialog" aria-modal="true" aria-labelledby="entitlement-unenrollment-modal-title" aria-live="polite">
     <button class="entitlement-unenrollment-modal-close-btn js-entitlement-unenrollment-modal-close-btn">
       <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">

lms/templates/dashboard/_reason_survey.html

@@ -24,10 +24,10 @@ from django.utils.translation import ugettext as _
     ${_('You are unenrolled from')} <span class="survey_course_name"></span>.
 
     <div>
-      <a class="button survey_button return_to_dashboard">
+      <a class="btn button survey_button return_to_dashboard">
         ${_('Return To Dashboard')}
       </a>
-      <a class="button survey_button browse_courses">
+      <a class="btn button survey_button browse_courses">
         ${_('Browse Courses')}
       </a>
     </div>

themes/edx.org/lms/templates/dashboard.html

@@ -337,7 +337,7 @@ from student.models import CourseEnrollment
 </section>
 
 <section id="unenroll-modal" class="modal unenroll-modal" aria-hidden="true">
-  <div class="inner-wrapper" role="dialog" aria-labelledby="unenrollment-modal-title">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="unenrollment-modal-title" aria-live="polite">
     <button class="close-modal">
       <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
@@ -362,7 +362,7 @@ from student.models import CourseEnrollment
       <input name="course_id" id="unenroll_course_id" type="hidden" />
       <input name="enrollment_action" type="hidden" value="unenroll" />
       <div class="submit">
-        <input name="submit" type="submit" value="${_("Unenroll")}" />
+        <input class="submit-button" name="submit" type="submit" value="${_("Unenroll")}" />
       </div>
     </form>
     <%include file='dashboard/_reason_survey.html' />