Invalid combination of role and aria-placeholder on date range picker

Hi,


After running an accessibility check on a page using the SfDateRangePicker, I noticed that it produces an invalid combination for ARIA.

If you add a Placeholder to the SfDateRangePicker, it will automatically add the aria-placeholder attribute. But since the input created also has the role "combobox", the aria-placeholder attribute is considered invalid as it only supports the "textbox" or "searchbox" roles.

See this page for reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder


So my question, is there a way to change the SfDateRangePicker role to be a textbox to ensure it using the aria-placeholder attribute in a valid way?

Thanks!

Bruno


3 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team September 26, 2022 04:48 PM UTC

Hi Bruno,


We have validated the reported query on our end. Unfortunately, we couldn’t find the aria-placeholder attribute in the component while adding the placeholder to the component. We also shared a sample for reference. Also, we request you to provide additional details about the issue as mentioned below, This will help us validate the issue further and provide you with a better solution.


  1. Issue reproducing sample (or modify the shared sample as per your scenario).
  2. Issue replication steps.
  3. Video illustration of the issue.


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DRP-885102959


Regards,

Udhaya Kumar D


Marked as answer

BB Bruno Barrette September 28, 2022 04:07 PM UTC

Hi,


Thanks for the reply. Same as another issue I had written about, I noticed that I tried it with an older version (19.x), but after upgrading to the latest there was no aria-placeholder attribute.


Thanks again!

Bruno



UD UdhayaKumar Duraisamy Syncfusion Team replied to Bruno Barrette September 29, 2022 01:43 PM UTC

Hi Bruno,


The DateRangePicker component renders the calendar as a popup element. So we used the role as combobox in the component. We suggest you refer to the below public blog for the above query.


https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Udhaya Kumar D



Loader.
Up arrow icon