MDL-62171 Theme boost: modal accessibility focus
authorBas Brands <bas@moodle.com>
Thu, 3 May 2018 09:54:26 +0000 (11:54 +0200)
committerBas Brands <bas@moodle.com>
Thu, 3 May 2018 09:54:26 +0000 (11:54 +0200)
lib/amd/build/modal.min.js
lib/amd/src/modal.js
lib/templates/modal.mustache
theme/boost/templates/core/modal.mustache
theme/bootstrapbase/less/moodle/undo.less
theme/bootstrapbase/style/moodle.css

index d3e25e6..bef1918 100644 (file)
Binary files a/lib/amd/build/modal.min.js and b/lib/amd/build/modal.min.js differ
index 4b39d35..8b6e1ec 100644 (file)
@@ -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));
index a860c75..ab5c812 100644 (file)
     <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}}
index a909118..1e8586b 100644 (file)
 }}
 
 <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>
index 35fd45d..50a4d1a 100644 (file)
@@ -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
  *
index 109ca2f..00150f8 100644 (file)
@@ -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
  *