Make non-interactive overflow:auto panes keyboard-scrollable

Resolves #7236

CHANGELOG.md

@@ -10,6 +10,7 @@
 - The Username, First Name, Last Name, Email, and New Password fields on Edit User pages now prevent LastPass from autofilling them. ([#7177](https://github.com/craftcms/cms/issues/7177))
 - Field layout elements’ settings HUDs now automatically set the focus on the first text input when opened. ([#7175](https://github.com/craftcms/cms/issues/7175))
 - Field instructions within the details pane are now replaced with info icons. ([#7180](https://github.com/craftcms/cms/issues/7180))
+- Panes with `overflow: auto` and no focusable content within them now have `tabindex="0"` attributes, so their content can be keyboard-scrollable on Chromium and WebKit-based browsers. ([#7236](https://github.com/craftcms/cms/issues/7236))
 - `users/set-password` requests now include a `status` key in JSON responses, set to the user’s status. ([#7239](https://github.com/craftcms/cms/issues/7239))
 
 ### Fixed

src/templates/_components/utilities/ProjectConfig.html

@@ -11,7 +11,7 @@ <h2>{{ 'Apply YAML Changes'|t('app') }}</h2>
         {% endif %}
         {{ csrfInput() }}
         {% if areChangesPending %}
-            <div id="diff" class="pane loading"></div>
+            <div id="diff" class="pane loading" tabindex="0"></div>
             <div class="readable">
                 <blockquote class="note $noteClass">
                     <p>
@@ -139,7 +139,7 @@ <h2>{{ 'Rebuild the Config'|t('app') }}</h2>
 <hr>
 
 <h2>{{ 'Loaded Project Config Data'|t('app') }}</h2>
-<div class="pane">
+<div class="pane" tabindex="0">
     <pre><code>{{ entireConfig }}</code></pre>
 </div>
 <div class="buttons">

src/web/assets/deprecationerrors/src/deprecator.js

@@ -29,7 +29,7 @@
             viewLogTraces: function(ev) {
                 if (!this.tracesModal) {
                     var $container = $('<div id="traces" class="modal loading"/>').appendTo(Garnish.$bod);
-                    this.$tracesModalBody = $('<div class="body"/>').appendTo($container);
+                    this.$tracesModalBody = $('<div class="body" tabindex="0"/>').appendTo($container);
 
                     this.tracesModal = new Garnish.Modal($container, {
                         resizable: true