MDL-62171 Theme boost: modal accessibility focus

lib/amd/src/modal.js

@@ -565,7 +565,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
 
             this.root.removeClass('hide').addClass('show');
             this.accessibilityShow();
-            this.getTitle().focus();
+            this.getModal().focus();
             $('body').addClass('modal-open');
             this.root.trigger(ModalEvents.shown, this);
         }.bind(this));

lib/templates/modal.mustache

@@ -44,11 +44,11 @@
     <div class="modal {{$classes}}{{/classes}}"
         data-region="modal"
         aria-labelledby="{{uniqid}}-modal-title"
-        role="document">
+        role="document" tabindex="0">
         <div class="modal-header {{$headerclasses}}{{headerclasses}}{{/headerclasses}}" data-region="header">
             <button type="button" class="close" data-action="hide" title="{{#str}} closebuttontitle {{/str}}"></button>
             {{$header}}
-                <h3 id="{{uniqid}}-modal-title" class="modal-title" data-region="title" tabindex="0">
+                <h3 id="{{uniqid}}-modal-title" class="modal-title" data-region="title">
                     {{$title}}{{title}}{{/title}}
                 </h3>
             {{/header}}

theme/boost/templates/core/modal.mustache

@@ -41,12 +41,12 @@
 }}
 
 <div class="modal moodle-has-zindex" data-region="modal-container" aria-hidden="true" role="dialog">
-    <div class="modal-dialog {{$classes}}{{/classes}}" role="document" data-region="modal" aria-labelledby="{{uniqid}}-modal-title">
+    <div class="modal-dialog {{$classes}}{{/classes}}" role="document" data-region="modal" aria-labelledby="{{uniqid}}-modal-title" tabindex="0">
         <div class="modal-content">
             <div class="modal-header {{$headerclasses}}{{headerclasses}}{{/headerclasses}}" data-region="header">
 
                 {{$header}}
-                    <h5 id="{{uniqid}}-modal-title" class="modal-title" data-region="title" tabindex="0">{{$title}}{{title}}{{/title}}</h5>
+                    <h5 id="{{uniqid}}-modal-title" class="modal-title" data-region="title">{{$title}}{{title}}{{/title}}</h5>
                 {{/header}}
                 <button type="button" class="close" data-action="hide" aria-label={{#quote}}{{#str}}closebuttontitle{{/str}}{{/quote}}>
                   <span aria-hidden="true">&times;</span>

theme/bootstrapbase/less/moodle/undo.less

@@ -30,6 +30,11 @@ li.activity.label,
     font-size: 12px;
 }
 
+// Reset the outline on a focussed modal for accessibility.
+.modal:focus {
+    outline: rgb(94, 158, 215) auto 5px;
+}
+
 /* block.invisible vs .invisible
  * block.hidden vs .invisible
  *

theme/bootstrapbase/style/moodle.css

@@ -15787,6 +15787,9 @@ li.activity.label,
 .choosercontainer #chooseform .option label {
   font-size: 12px;
 }
+.modal:focus {
+  outline: #5e9ed7 auto 5px;
+}
 /* block.invisible vs .invisible
  * block.hidden vs .invisible
  *