This is an automated email from the ASF dual-hosted git repository.
ryanahamilton pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/master by this push:
new ba76eb4 Make nav fully accessible y keyboard, fix mobile nav menus
(#12351)
ba76eb4 is described below
commit ba76eb4961b6f2349d38dc2af237f0134d5e46d6
Author: Ryan Hamilton <[email protected]>
AuthorDate: Fri Nov 13 18:50:42 2020 -0500
Make nav fully accessible y keyboard, fix mobile nav menus (#12351)
---
airflow/www/static/css/bootstrap-theme.css | 23 ++++++++++++++--------
airflow/www/static/css/main.css | 16 ++++++++++++---
airflow/www/static/js/base.js | 8 --------
airflow/www/templates/appbuilder/navbar_menu.html | 4 ++--
airflow/www/templates/appbuilder/navbar_right.html | 10 +++++-----
5 files changed, 35 insertions(+), 26 deletions(-)
diff --git a/airflow/www/static/css/bootstrap-theme.css
b/airflow/www/static/css/bootstrap-theme.css
index 9e9bf63..62562d9 100644
--- a/airflow/www/static/css/bootstrap-theme.css
+++ b/airflow/www/static/css/bootstrap-theme.css
@@ -3193,6 +3193,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
padding: 10px 15px;
}
.nav > li > a:hover,
+.nav > li:focus-within > a,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
@@ -3409,7 +3410,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
- overflow-y: auto;
+ overflow-y: visible;
}
@media (min-width: 768px) {
@@ -3437,7 +3438,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
- max-height: 340px;
+ max-height: none;
}
@media (max-device-width: 480px) and (orientation: landscape) {
@@ -3549,7 +3550,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
}
@media (max-width: 767px) {
- .navbar-nav .open .dropdown-menu {
+ .navbar-nav .dropdown:hover > .dropdown-menu,
+ .navbar-nav .dropdown:focus-within > .dropdown-menu {
position: static;
float: none;
width: auto;
@@ -3558,15 +3560,20 @@ select[multiple].input-group-sm > .input-group-btn >
.btn {
border: 0;
box-shadow: none;
}
- .navbar-nav .open .dropdown-menu > li > a,
- .navbar-nav .open .dropdown-menu .dropdown-header {
+ .navbar-nav .dropdown:hover > .dropdown-menu > li > a,
+ .navbar-nav .dropdown:hover > .dropdown-menu .dropdown-header,
+ .navbar-nav .dropdown:focus-within > .dropdown-menu > li > a,
+ .navbar-nav .dropdown:focus-within > .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
- .navbar-nav .open .dropdown-menu > li > a {
+ .navbar-nav .dropdown:hover > .dropdown-menu > li > a,
+ .navbar-nav .dropdown:focus-within > .dropdown-menu > li > a {
line-height: 20px;
}
- .navbar-nav .open .dropdown-menu > li > a:hover,
- .navbar-nav .open .dropdown-menu > li > a:focus {
+ .navbar-nav .dropdown:hover > .dropdown-menu > li > a:hover,
+ .navbar-nav .dropdown:hover > .dropdown-menu > li > a:focus,
+ .navbar-nav .dropdown:focus-within > .dropdown-menu > li > a:hover,
+ .navbar-nav .dropdown:focus-within > .dropdown-menu > li > a:focus {
background-image: none;
}
}
diff --git a/airflow/www/static/css/main.css b/airflow/www/static/css/main.css
index 6942217..5178a3e 100644
--- a/airflow/www/static/css/main.css
+++ b/airflow/www/static/css/main.css
@@ -60,12 +60,22 @@ div.container {
color: #e2d2e2;
}
-.navbar-nav li.dropdown:hover > .dropdown-menu {
+.navbar-nav li.dropdown:hover > .dropdown-menu,
+.navbar-nav li.dropdown:focus-within > .dropdown-menu {
display: block;
}
+/* If a menu remains open due to focus, a menu
+ opened via hover will always be displayed on top */
+.navbar-nav li.dropdown:hover > .dropdown-menu {
+ z-index: 1001;
+}
+
.navbar-brand {
- padding: 10px 15px;
+ padding: 0 15px;
+ height: 60px;
+ display: inline-flex;
+ align-items: center;
}
.brand-logo {
@@ -84,7 +94,7 @@ div.container {
}
}
-.brand-logo:hover .brand-logo-pinwheel {
+.navbar-brand:hover .brand-logo-pinwheel {
transform-origin: 17.66px 17.66px;
animation: pinSpin 1.5s linear infinite;
}
diff --git a/airflow/www/static/js/base.js b/airflow/www/static/js/base.js
index af7a889..0019039 100644
--- a/airflow/www/static/js/base.js
+++ b/airflow/www/static/js/base.js
@@ -162,13 +162,6 @@ function initializeUITimezone() {
changDisplayedTimezone($(evt.target).data('timezone'));
});
- $('#timezone-dropdown').on('hide.bs.dropdown', (evt) => {
- if (document.activeElement.id === 'timezone-other') {
- // Don't let the dropdown close if the input is active
- evt.preventDefault();
- }
- });
-
$('#timezone-other').typeahead({
source: $(moment.tz.names().map((tzName) => {
const category = tzName.split('/', 1)[0];
@@ -192,7 +185,6 @@ function initializeUITimezone() {
// Bug in typeahed, it thinks it's still shown!
this.shown = false;
this.focused = false;
- $('#timezone-menu').dropdown('toggle');
}, 1);
},
});
diff --git a/airflow/www/templates/appbuilder/navbar_menu.html
b/airflow/www/templates/appbuilder/navbar_menu.html
index 9e24d02..a81ad98 100644
--- a/airflow/www/templates/appbuilder/navbar_menu.html
+++ b/airflow/www/templates/appbuilder/navbar_menu.html
@@ -18,7 +18,7 @@
#}
{% macro menu_item(item) %}
- <a tabindex="-1" href="{{item.get_url()}}">{{_(item.label)}}</a>
+ <a href="{{item.get_url()}}">{{_(item.label)}}</a>
{% endmacro %}
<li class="dropdown"><a href="{{ url_for('Airflow.index') }}">DAGs</a></li>
@@ -26,7 +26,7 @@
{% if item1 | is_menu_visible %}
{% if item1.childs %}
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown"
href="javascript:void(0)">
+ <a class="dropdown-toggle" href="javascript:void(0)">
{{_(item1.label)}}<b class="caret"></b></a>
<ul class="dropdown-menu">
{% for item2 in item1.childs %}
diff --git a/airflow/www/templates/appbuilder/navbar_right.html
b/airflow/www/templates/appbuilder/navbar_right.html
index d3abc96..8e606c6 100644
--- a/airflow/www/templates/appbuilder/navbar_right.html
+++ b/airflow/www/templates/appbuilder/navbar_right.html
@@ -23,7 +23,7 @@
{% set locale = 'en' %}
{% endif %}
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown"
href="javascript:void(0)">
+ <a class="dropdown-toggle" href="javascript:void(0)">
<div class="f16"><i class="flag
{{languages[locale].get('flag')}}"></i><b class="caret"></b></div>
</a>
{% if languages.keys()|length > 1 %}
@@ -31,7 +31,7 @@
<li class="dropdown">
{% for lang in languages %}
{% if lang != locale %}
- <a tabindex="-1" href="{{appbuilder.get_url_for_locale(lang)}}">
+ <a href="{{appbuilder.get_url_for_locale(lang)}}">
<div class="f16"><i class="flag
{{languages[lang].get('flag')}}"></i> - {{languages[lang].get('name')}}
</div></a>
{% endif %}
@@ -44,7 +44,7 @@
{# clock and timezone menu #}
<li class="dropdown" id="timezone-dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" style="display:none"
href="#">
+ <a class="dropdown-toggle" style="display:none" href="#">
<time id="clock" class="js-tooltip"></time>
<b class="caret"></b>
</a>
@@ -57,7 +57,7 @@
<li>
<form>
<label for="timezone-other">Other</label>
- <input id="timezone-other" placeholder="Select Timezone name"
autocomplete="off">
+ <input id="timezone-other" placeholder="Select Timezone name"
autocomplete="off" tabindex="-1">
</form>
</li>
</ul>
@@ -65,7 +65,7 @@
{% if not current_user.is_anonymous %}
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+ <a class="dropdown-toggle" href="#">
<span class="navbar-user-icon" title="{{g.user.get_full_name()}}">
{% if current_user.first_name and current_user.last_name %}
<span>{{ (current_user.first_name[0] +
current_user.last_name[0]).upper() }}</span>
