| <html> |
| <body> |
| <label id="label1">Test label</label> |
| <div aria-label="aria label">Generic container</div> |
| <div aria-labelledby="label1">Generic container with aria-labelledby</div> |
| |
| <div role="textbox" aria-label="aria label">Textbox</div> |
| <div role="textbox" aria-labelledby="label1">Textbox with aria-labelledby</div> |
| |
| <div role="button" aria-label="aria label">Button</div> |
| <div role="button" aria-labelledby="label1">Button with aria-labelledby</div> |
| |
| <input type="text" role="combobox" aria-activedescendant="option1" aria-label="aria label" aria-controls="listbox-for-input-1"> |
| <ul id="listbox-for-input-1" role="listbox"> |
| <li id="option1" role="option">Option 1</li> |
| <li id="option2" role="option">Option 2</li> |
| </ul> |
| <input type="text" role="combobox" aria-activedescendant="option3" aria-labelledby="label1" aria-controls="listbox-for-input-2"> |
| <ul id="listbox-for-input-2" role="listbox"> |
| <li id="option3" role="option">Option 3</li> |
| <li id="option4" role="option">Option 4</li> |
| </ul> |
| |
| <div role="combobox" tabindex="0" aria-controls="listbox2" aria-label="aria label">Combobox</div> |
| <ul id="listbox1" role="listbox"> |
| <li id="option5" role="option">Option 5</li> |
| <li id="option6" role="option">Option 6</li> |
| </ul> |
| |
| <div role="combobox" tabindex="0" aria-controls="listbox2" aria-labelledby="label1">Combobox with aria-labelledby</div> |
| <ul id="listbox2" role="listbox"> |
| <li id="option7" role="option">Option 7</li> |
| <li id="option8" role="option">Option 8</li> |
| </ul> |
| |
| <input type="time" value="12:05" aria-label="aria label"> |
| <input type="time" value="12:05" aria-labelledby="label1"> |
| |
| <input type="color" value="#e4e4e4" aria-label="aria label"> |
| <input type="color" value="#e4e4e4" aria-labelledby="label1"> |
| </body> |
| </html> |
