How to use the aria combobox role with a grid element? - combobox

Question

I'm trying to make an accessible calendar plugin where you can write the date in the input by hand or select it from a table. I'm using WAI-ARIA and I think I'm following the instructions correctly but the Chrome Developer Tools Accessibility audit gives me an error seen below
Instructions:
https://www.w3.org/TR/wai-aria-1.1/#combobox
https://www.w3.org/TR/wai-aria-1.1/#grid
Example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/grid-combo.html
Error:
https://i.stack.imgur.com/OIX1f.png
My code:
<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

The error message is saying that anything with a role of combobox has required child elements but it can’t find them in your markup. There’s been some changes to the combobox role so if you’re working from an older example it’ll be out of date. Try removing the role attributes from both the div and the table, and see if that helps.