Vaadin网格辅助功能 - 聚合物
问题描述:
有没有什么方法可以让我的屏幕阅读器用户可以访问我的Vaadin-Grid
?我在想,只有每行需要被选中而不是每行的每个单元格。我在每一行也有一个复选框,所以这也需要考虑。Vaadin网格辅助功能 - 聚合物
任何帮助将不胜感激,并请记裸这仍然是一项正在进行的工作,所以我将努力为我去添加ARIA
标签和事情。
Here is a JSBin with the actual code
我vaadin-grid
HTML
<vaadin-grid aria-label="Server properties list" id="material" items="[[uksproperties]]">
<vaadin-grid-selection-column width="66px" flex="0" select-all="{{selectAll}}">
<template class="header">
<paper-checkbox checked="{{selectAll}}"></paper-checkbox>
</template>
<template>
<paper-checkbox checked="{{selected}}"></paper-checkbox>
</template>
</vaadin-grid-selection-column>
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout cell">
<label for="keyFilter" class="keyText cell flex">Key</label>
<vaadin-grid-filter class="cell" id="keyFilterVaadin" path="key" value="[[_filterKey]]">
<paper-input aria-describedby="keyDescription" no-float-label class="keyFilter" id="keyFilter" slot="filter" placeholder="Filter search" value="{{_filterKey::input}}" focus-target on-input="clearAppear" >
<iron-icon suffix icon="clear" class="clearIcon" on-click="clearField" clear-item-id="keyFilter"></iron-icon>
</paper-input>
<span id="keyDescription" style="display:none" class="description">Input text to filter to properties list by "Key" search</span>
</vaadin-grid-filter>
</div>
</template>
<template class="cell"><div class="blue">[[item.key]]</div></template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">
<div class="cell">
value
<div>
</template>
<template class="cell">[[item.value]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout">
<div class="cell last flex ">
Server
</div>
<paper-button slot="filter" class="export" on-click="empty">
<iron-icon icon="launch"></iron-icon>
Export
</paper-button>
</div>
</template>
<template class="cell last">[[item.server]]</template>
</vaadin-grid-column>
</vaadin-grid>
答
什么具体的问题,你与屏幕阅读器有?
vaadin-grid应该大部分是开箱即用的。键盘导航受支持,您可以使用箭头键导航行。只需单击一行/单元格并开始使用箭头键即可获得焦点轮廓。您还可以使用Tab键来关注网格 - 页眉,正文和页脚可分别聚焦,而不是每行。
如果您将可聚焦元素放置在单元格内(输入,按钮,复选框等),则需要按Enter键访问这些元素,如WAI-ARIA数据网格最佳实践中所述。
可以做小提琴吗? – Ofisora
当然@Ofisora。看到我编辑的问题为我的JSBin版本。 – physicsboy