如何将aria组合框角色与网格元素一起使用？

Question

我正在尝试制作一个可访问的日历插件，您可以在其中手动编写输入日期或从表格中选择日期。我正在使用WAI-ARIA，我认为我正确地遵循了说明，但Chrome开发者工具辅助功能审核给了我一个错误，如下所示

说明：

https://www.w3.org/TR/wai-aria-1.1/#combobox

https://www.w3.org/TR/wai-aria-1.1/#grid

例：

https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/grid-combo.html

错误：

https://i.stack.imgur.com/OIX1f.png

我的代码：

<div class="container">
    <label for="comboboxtextbox">the label</label>
    <div role="combobox" aria-expanded="true" aria-owns="comboboxgrid" aria-haspopup="grid">
        <input role="textbox" aria-multiline="false" id="comboboxtextbox" type="text" aria-controls="comboboxgrid">
    </div>
    <table role="grid" id="comboboxgrid">
        <tbody>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
            </tr>
            <tr>
                <td role="gridcell">1</td>
                <td role="gridcell">2</td>
                <td role="gridcell">3</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

错误消息是说具有组合框作用的任何内容都需要子元素，但它无法在标记中找到它们。有some changes to the combobox role所以，如果你从一个较旧的例子开始工作它将会过时。尝试从div和表中删除角色属性，看看是否有帮助。