После удаления фона и рамки кнопки фокус при отображении с помощью клавиатуры в Firefox не отображается. (Доступность) - PullRequest
1 голос
/ 10 февраля 2020

У меня есть кнопка, которая доступна, и вы можете сосредоточиться на ней с помощью клавиатуры. Однако после того, как я удалил границу и фон кнопки, при переходе к ней с помощью клавиатуры фокус не отображается, даже если он находится на кнопке. Эта проблема возникает только в Firefox. Chrome и IE в порядке.

Это мой HTML:

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

А это мой CSS:

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

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

        .toggle-text {

1 Ответ

0 голосов
/ 10 февраля 2020

Добавил их в мой код и теперь он работает:

<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;
...