From ae0629d2844abb4a11bef6b857dbb74734d0f22b Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Thu, 3 May 2018 11:54:26 +0200
Subject: [PATCH] MDL-62171 Theme boost: modal accessibility focus

---
 lib/amd/build/modal.min.js                | Bin 7294 -> 7294 bytes
 lib/amd/src/modal.js                      |   2 +-
 lib/templates/modal.mustache              |   4 ++--
 theme/boost/templates/core/modal.mustache |   4 ++--
 theme/bootstrapbase/less/moodle/undo.less |   5 +++++
 theme/bootstrapbase/style/moodle.css      |   3 +++
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/lib/amd/build/modal.min.js b/lib/amd/build/modal.min.js
index d3e25e6cfecc5c4e14542c7ca67ba7f673e28189..bef19182d5f01981bdcf8acd8d8bc2cc629ace83 100644
GIT binary patch
delta 18
Zcmexo@y}vIwg{_leoA7_<^mBu4ggKt2HOAt

delta 18
Zcmexo@y}vIwg_uTW=T%!<^mBu4ggM$2Jip?

diff --git a/lib/amd/src/modal.js b/lib/amd/src/modal.js
index 4b39d35300c..8b6e1ece3a7 100644
--- a/lib/amd/src/modal.js
+++ b/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));
diff --git a/lib/templates/modal.mustache b/lib/templates/modal.mustache
index a860c758447..ab5c8122a6a 100644
--- a/lib/templates/modal.mustache
+++ b/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}}
diff --git a/theme/boost/templates/core/modal.mustache b/theme/boost/templates/core/modal.mustache
index a909118a42a..1e8586b1ada 100644
--- a/theme/boost/templates/core/modal.mustache
+++ b/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>
diff --git a/theme/bootstrapbase/less/moodle/undo.less b/theme/bootstrapbase/less/moodle/undo.less
index 35fd45da4f1..50a4d1a6401 100644
--- a/theme/bootstrapbase/less/moodle/undo.less
+++ b/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
  *
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 109ca2f51fb..00150f8d151 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/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
  *
-- 
2.36.1