diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-11-08 22:33:48 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-11-08 22:33:48 +0000 |
commit | b77969ea39cc6425dcdab35d4239346ce9940279 (patch) | |
tree | 6cd53378f0495bcb3a1ff9d1d62501f67af781da | |
parent | a0d5bb0bb84d15efaedb78025bd480758b2a4246 (diff) | |
parent | 5f2d9ba9ea9d86c409d74004ccf5811bc52a0828 (diff) | |
download | gitlab-ce-b77969ea39cc6425dcdab35d4239346ce9940279.tar.gz |
Merge branch '24146-add-focus-state' into 'master'
24146 Add focus state to buttons and dropdowns
## What does this MR do?
Adds focus state to buttons and dropdowns
## Are there points in the code the reviewer needs to double check?
All focus states of buttons and dropdowns :)
## Why was this MR needed?
Improve accessibility
## Screenshots (if relevant)
Before:
![Screen_Shot_2016-11-07_at_4.30.31_PM](/uploads/8db2ac5e225c78495797180faf7bdb28/Screen_Shot_2016-11-07_at_4.30.31_PM.png)
After:
![Screen_Shot_2016-11-07_at_4.30.16_PM](/uploads/4a81810cafe3063eef02b7bc87f8ce69/Screen_Shot_2016-11-07_at_4.30.16_PM.png)
## Does this MR meet the acceptance criteria?
- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
- [ ] Added for this feature/bug
- [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)
## What are the relevant issue numbers?
Closes #24146
See merge request !7347
-rw-r--r-- | app/assets/javascripts/application.js | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/merge_conflicts.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/search.scss | 2 | ||||
-rw-r--r-- | app/views/layouts/_search.html.haml | 2 |
9 files changed, 5 insertions, 19 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e6b55c9b6ae..33c1708e1a9 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -193,9 +193,6 @@ e.preventDefault(); return new ConfirmDangerModal(form, text); }); - $document.on('click', 'button', function () { - return $(this).blur(); - }); $('input[type="search"]').each(function () { var $this = $(this); $this.attr('value', $this.val()); diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index ed21ad83a1c..e7aff2d0cec 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -6,7 +6,6 @@ &:focus, &:active { - outline: none; background-color: $btn-active-gray; box-shadow: $gl-btn-active-background; } @@ -267,10 +266,6 @@ outline: none; } - &:focus { - outline: none; - } - &:active { outline: none; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 3e34ec98427..583c17e4a83 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -38,7 +38,6 @@ text-align: left; border: 1px solid $border-color; border-radius: $border-radius-base; - outline: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -55,6 +54,10 @@ } } + &.no-outline { + outline: 0; + } + &:hover, { border-color: $dropdown-toggle-hover-border-color; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 4993ca7572a..5a34132112a 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -100,10 +100,6 @@ header { &:hover { background-color: $btn-gray-hover; } - - &:focus { - outline: none; - } } } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index fcaf5e18633..ce864c2de5e 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -58,7 +58,6 @@ &:active, &:focus { text-decoration: none; - outline: none; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index d74c14ee2a4..44c445c0543 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -83,7 +83,6 @@ display: block; text-decoration: none; font-weight: normal; - outline: none; &:hover, &:active, diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss index 032feae8854..19ab198c2e7 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/pages/merge_conflicts.scss @@ -228,7 +228,6 @@ $colors: ( position: absolute; right: 10px; padding: 0; - outline: none; color: #fff; width: 75px; // static width to make 2 buttons have same width height: 19px; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index bf688af50e2..b4761df3f23 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -31,7 +31,6 @@ padding-right: 20px; border: none; font-size: 14px; - outline: none; padding: 0; margin-left: 5px; line-height: 25px; @@ -229,6 +228,5 @@ &:hover, &:focus { color: $gl-link-color; - outline: none; } } diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index d7386105b7d..8e65bd12c56 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -13,7 +13,7 @@ .location-badge= label .search-input-wrap .dropdown{ data: { url: search_autocomplete_path } } - = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url } + = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url } .dropdown-menu.dropdown-select = dropdown_content do %ul |