Investigate usages of `outline: 0;` for accessibility violations

When we style an element that is clickable with outline: 0; when :active (or !gl-outline-none which effectively does the same), it is a problem for accessibility as it is not possible to see which element is currently active on a page.

Here is a good explanation of the problem: !168198 (comment 2145702027)

Here are all the references to !gl-outline-none:

  • app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
  • app/assets/javascripts/ide/components/new_dropdown/button.vue
  • app/assets/javascripts/ide/components/shared/tokened_input.vue
  • app/assets/javascripts/vue_shared/components/dismissible_container.vue
  • app/assets/javascripts/vue_shared/components/expand_button.vue
  • app/views/help/index.html.haml

The following SCSS files also contain a reference to outline: 0;:

  • app/assets/stylesheets/framework/awards.scss
  • app/assets/stylesheets/framework/buttons.scss
  • app/assets/stylesheets/framework/diffs.scss
  • app/assets/stylesheets/framework/dropdowns.scss
  • app/assets/stylesheets/page_bundles/ide.scss
  • app/assets/stylesheets/page_bundles/users.scss
  • app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
  • app/assets/stylesheets/page_bundles/notes/_image_comments.scss
  • app/assets/stylesheets/pages/note_form.scss