Использование withBackdrop для бумажного диалога предотвращает фокусировку элементов управления с помощью табуляции

У меня есть бумажный диалог, в котором используется свойство with-backdrop. Я заметил, что после щелчка в любом месте бумажного диалога, в котором не используется свойство with-backdrop, я могу нажать клавишу табуляции, и браузер сфокусируется на элементе ввода:

addEventListener('WebComponentsReady', function() {
  Polymer({
    is: 'x-example',
    ready: function() {
      this.$$('paper-dialog').open();
    }
  });
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <paper-dialog>
      <h2 class="header">Hello</h2>
      <paper-input
        label="Focusable input"
        tabindex
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>

Однако, если я установлю свойство with-backdrop, браузер не будет фокусировать элемент ввода:

addEventListener('WebComponentsReady', function() {
  Polymer({
    is: 'x-example',
    ready: function() {
      this.$$('paper-dialog').open();
    }
  });
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <paper-dialog with-backdrop>
      <h2 class="header">Hello</h2>
      <paper-input
        label="Focusable input"
        tabindex
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>

Есть ли способ иметь фон и по-прежнему разрешать навигацию по диалогу с помощью клавиатуры?

Информация об устройстве: у меня возникла эта проблема при запуске Chrome v50 на OSX.


html accessibility polymer polymer-1.0 paper-dialog
person Calvin Belden    schedule 15.06.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Кажется, проблема с версиями, которые вы используете. Я попробовал это на веб-сайте Polymer и на своем локальном, и, похоже, это работает нормально. Ниже приведены версии, которые я использовал:

Бумага-диалог: 1.0.4

Полимер: 1.3.2

Бумажный ввод: 1.0.18

Я также рекомендую вам открыть вопрос на Github для того же

person a1626    schedule 15.06.2016
comment
Спасибо @ a1626; случайно включил свойство tabindex без значения. Спасибо - person Calvin Belden; 15.06.2016

arrow_upward
0
arrow_downward

В демонстрации я включил атрибут tabindex в свой элемент ввода без указания значения. Удаление этого свойства позволило сфокусировать ввод:

addEventListener('WebComponentsReady', function() {
  Polymer({
    is: 'x-example',
    ready: function() {
      this.$$('paper-dialog').open();
    }
  });
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <paper-dialog with-backdrop>
      <h2 class="header">Hello</h2>
      <paper-input
        label="Focusable input"
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>

person Calvin Belden    schedule 15.06.2016