0

我有以下聚合物元素，它继承了“纸张行为/纸张按钮行为”，但在用户单击按钮时不提供任何类型的听觉反馈。它只是读取按钮的文本，但没有关于它是否被按下的信息。我已经测试了它的 Talkback for Android 和 Narrator for Windows。我无法更改 HTML，我需要让它以一种直接和简单的方式工作，我对聚合物 2 很陌生，这让我陷入了一个悲伤的境地。有关如何使此按钮可访问且符合 ay11 的任何提示？

我尝试将按钮替换为复选框，效果很好，但由于向后兼容性风险而未被公司批准。

<option-button class="optionsButton" role="button" aria-labelledby="button-0" tabindex="0" selected="" aria-pressed="true">
<div class="amount">Button text</div>
</option-button>


 <script>
    class option-button extends Polymer.mixinBehaviors([Polymer.PaperButtonBehavior], Polymer.Element) {
      static get is() { return 'option-button; }
      static get properties() {
        return {
          message : {
            type: String,
            notify: true
          }
        }
      }

    }

    customElements.define(option-button.is, option-button);
  </script>
4

1 回答 1

0

请注意，这不是对该问题的完整答案，这是对我发表的评论的补充，因为很难在评论中解释。

如果您按以下方式设置功能，它会起作用吗？我意识到它似乎总是将 设置为 true 的事实可能有些奇怪aria-pressed？

_handleClick(event) {
    this.dispatchEvent(new CustomEvent(OptionButton.is + '.button-active', {
      bubbles: false,
      composed: true,
      detail: event
    }));
    const previousPressed = this.shadowRoot.querySelector('.OptionButton[aria-pressed="true"]');
    if (previousPressed) {
       previousPressed.setAttribute('aria-pressed', 'false');
       event.target.setAttribute('aria-pressed', 'false');
    }else{
        previousPressed.setAttribute('aria-pressed', 'true');
        event.target.setAttribute('aria-pressed', 'true');
    }
  }

还将您的组件更改为

<option-button class="optionsButton" role="button" tabindex="0" selected="" aria-pressed="true"> <!-- removed 'aria-labelledby' for testing -->
<div class="amount">Button text</div>
</option-button>
于 2020-01-03T20:28:49.903 回答