From: Stephanie Leary Date: Tue, 18 Apr 2023 17:00:24 +0000 (+0000) Subject: LP1828468 keyboard navigation for Angular nav bar X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=06df8dcd8255d7fafad9c12a661ba0117d5f7741;p=Evergreen.git LP1828468 keyboard navigation for Angular nav bar Adds ng-Bootstrap directives for keyboard navigation support in the main navigation bar. Includes visible focus styling for both buttons and links. Signed-off-by: Stephanie Leary Signed-off-by: Michele Morgan Signed-off-by: Galen Charlton --- diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.css b/Open-ILS/src/eg2/src/app/staff/nav.component.css index 2df005a88a..a33d80e611 100644 --- a/Open-ILS/src/eg2/src/app/staff/nav.component.css +++ b/Open-ILS/src/eg2/src/app/staff/nav.component.css @@ -1,11 +1,6 @@ -/* remove dropdown carret for icon-based entries */ +/* remove dropdown caret for icon-based entries */ #staff-navbar .no-caret::after { - display:none; -} - -/* move the caret closer to the dropdown text */ -#staff-navbar { - padding-left: 0px; + display: none; } #staff-navbar { @@ -13,57 +8,110 @@ background-color: #007a54; color: #fff; font-size: 14px; + padding: 0 0.5rem; } #staff-navbar .navbar-nav { - padding: 4px; + padding: 4px 0; + margin: 0 1px; +} + +#staff-navbar .dropdown-toggle, +#staff-navbar .nav-link-home { + color: #fff; +} + +#staff-navbar button.dropdown-toggle { + background: none; + border: none; + border-bottom: 2px solid transparent; } /* align top of dropdown w/ bottom of nav */ #staff-navbar .dropdown-menu { - margin-top: 7px; + background-color: #fff; + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + color: #333; + margin-top: 4px; } + #staff-navbar .material-icons { - padding-right:3px; + padding-right: 3px; } + #staff-navbar .dropdown-item { + color: #333; font-size: 14px; font-weight: 400; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - padding-left: 0.7rem; - padding-right: 0.7rem; + margin: 0; + padding: 1px .5rem; +} + +#staff-navbar .dropdown-item:hover, +#staff-navbar .dropdown-item:focus { + background-color: #f5f5f5; + color: #333; +} + +#staff-navbar .dropdown-divider { + border-top: 1px solid #e5e5e5; } #staff-navbar .dropdown-item .material-icons { - font-size: 18px; + font-size: 18px; } -#staff-navbar .nav-link { - color: #fff; - padding-top:1px; - padding-bottom:1px; +#staff-navbar .dropdown-menu .nav-link { + padding-top: 1px; + padding-bottom: 1px; } -#staff-navbar .nav-link:hover { - color: #ddd; + +#staff-navbar .nav-link-home { + margin-left: .5rem; + padding: .5rem; +} + +#staff-navbar .nav-link:hover, +#staff-navbar .nav-link:focus, +#staff-navbar>.open .nav-link, +#staff-navbar>.open>a, +#staff-navbar>.open>a:focus, +#staff-navbar>.open>a:hover { + background-color: rgba(223, 240, 216, 0.1); + border-bottom: 2px solid rgba(223, 240, 216, 0.4); + border-radius: .3em; cursor: pointer; } -#staff-navbar .navbar-nav > .open > a, -#staff-navbar .navbar-nav > .open > a:focus, -#staff-navbar .navbar-nav > .open > a:hover { - background-color: #7a7a7a; +/* restore outline focus removed by Bootstrap */ +.dropdown-toggle:focus, +.dropdown-item:focus { + /* Firefox */ + outline: 2px auto highlight; + /* Safari/Chromium */ + outline: 2px auto -webkit-focus-ring-color; } + +#staff-navbar>.open .nav-link { + border-bottom: 0; + border-top: 2px solid rgba(223, 240, 216, 0.4); +} + #staff-navbar .navbar-nav>.dropdown>a .caret { border-top-color: #fff; border-bottom-color: #fff; } + #staff-navbar .navbar-nav>.dropdown>a:hover .caret { border-top-color: #ddd; border-bottom-color: #ddd; } /* Align material-icons with sibling text; otherwise they float up */ -#staff-navbar .with-material-icon, #staff-navbar .dropdown-item { +#staff-navbar .with-material-icon, +#staff-navbar .dropdown-item { display: inline-flex; vertical-align: middle; align-items: center; @@ -75,4 +123,4 @@ Based on the hidden-sm class selector in Bootstrap. */ .navbar-user { display: none !important } -} +} \ No newline at end of file diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.html b/Open-ILS/src/eg2/src/app/staff/nav.component.html index d7db8bd391..e5cfdb5e92 100644 --- a/Open-ILS/src/eg2/src/app/staff/nav.component.html +++ b/Open-ILS/src/eg2/src/app/staff/nav.component.html @@ -1,8 +1,8 @@ -