RE: Proper Implementation for a Filter Control

https://a11ysupport.io/tech/html/datalist_element

From what I saw in the MDN example you'd need to build in keyboard support as well.

Chris O'Brien



OLG Internal
From: ashraf aleem <ashraf.aleem@gmail.com>
Sent: Thursday, January 28, 2021 7:48 AM
To: Batusic, Mario <mario.batusic@fabasoft.com>
Cc: W3C WAI ig <w3c-wai-ig@w3.org>
Subject: Re: Proper Implementation for a Filter Control

This email originated outside of OLG. Do not open attachments or click links unless you recognize the sender and know the content is safe.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist<https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement%2Fdatalist&data=04%7C01%7Cchrobrien%40olg.ca%7C74c672bd0e7545c7594308d8c38bcff9%7Cf271d9b4e54c46e182bd25d50afa3779%7C0%7C0%7C637474352597169601%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=m12fNn7eKX2ZMSaoyRX3%2BmikNwSNXsrpKzzO%2BvmzbBs%3D&reserved=0>

Hi,
    Please also check if <datalist> would meet your requirement.

Thank you,
Ashraf


On Thu, Jan 28, 2021 at 1:07 AM Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>> wrote:
Hello All,

Can somebody help me by pointing to an example for the proper implementation for a filter widget or by an exact explanation how to do it? Thanks in advance.

Widget features:
Over a list of object classes to choose from during creating a new object instance (MS Word, Calendar, Contact and meny more) there is an input field where you can filter the list. This input - widget has two features:
1. When empty it is possible to click in or to press Down Arrow or Alt + Down Arrow to open a list of standard suggestions.
2. During typing in the input field the list of object classes is automatically filtered. To this time is the suggestion list not available.

Questions:
1. Which role for the input will be the correct one: textbox or combobox (or something else)?
2. How to visualize that there are suggestions available for people who use keyboard only? According to the position of the filtering input widget directly above the list of object classes to choose from and because the focus is initially set into this field, the suggestion list is not shown automatically. This would overlap a big part of the list.

Thanks again in advance for your help.

Ciao     Mario