1

I have a button that is accessible and you can focus on it using keyboard. However after I removed the border and background of the button, when you navigate to it using keyboard the focus doesn't show even though it is on the button. This issue only happens in Firefox. Chrome and IE are fine.

This is my HTML:

             <div class="collapse-state-toggle">
                <button class="collapse-state-button" 
                    @click="collapseStateToggle"
                    :aria-expanded="isCollapsed ? 'false' : 'true'" 
                    aria-controls="collapsed-content">
                ...

And this is my CSS:

    .collapse-state-toggle {
      cursor: pointer;
      float: right;
      user-select: none;

      .collapse-state-button {
        border: none;
        background: none;

        .toggle-text {
mha
  • 551
  • 2
  • 11
  • 22
  • 2
    So add a focus rule – epascarello Feb 10 '20 at 17:59
  • 1
    Does this answer your question? [WCAG: Firefox and Edge don't show outline on focussed input elements when styles are applied](https://stackoverflow.com/questions/51674380/wcag-firefox-and-edge-dont-show-outline-on-focussed-input-elements-when-styles) – Bryce Howitson Feb 10 '20 at 18:39

1 Answers1

0

Added these to my code and now it works:

<div class="collapse-state-toggle" v-if="items.length > 0">
            <button class="collapse-state-button focus-only" 
                    @click="collapseStateToggle"
                    :aria-expanded="isCollapsed ? 'false' : 'true'" 
                    aria-controls="collapsed-content">
             ...

    .focus-only:focus {
      outline: 2px solid #1195ff;
    }

    .collapse-state-toggle {
      cursor: pointer;
      float: right;
      user-select: none;
mha
  • 551
  • 2
  • 11
  • 22