css - HTML Popover Attribute Accessibility Issues for Date Input (Wonky Tabbing) - Stack Overflow

admin管理员组

文章数量:1122832

I'm busy taking a look at the HTML popover Attribute as a way to implement popovers without Javascript but it seems to have Accessibility Issues when the popovertarget contains a date input.

When trying to interact with the C: Not OK button and then tab through the date inputs, it doesn't work as expected and on Chrome it will skip the second date input completely.

I was wondering if I'm doing something wrong or if there is anything that can be done to get the date input tabbing working correctly (tab through each date field and the show calendar picker button)

<button popovertarget="popoverChild">Show me Wonky Tabbing</button>

<div id="popoverChild" popover>
  <p>Try to Tab through these Inputs</p>
  <div><input type="date" /></div>
  <div><input type="date" /></div>
</div>

I'm busy taking a look at the HTML popover Attribute as a way to implement popovers without Javascript but it seems to have Accessibility Issues when the popovertarget contains a date input.

When trying to interact with the C: Not OK button and then tab through the date inputs, it doesn't work as expected and on Chrome it will skip the second date input completely.

I was wondering if I'm doing something wrong or if there is anything that can be done to get the date input tabbing working correctly (tab through each date field and the show calendar picker button)

<button popovertarget="popoverChild">Show me Wonky Tabbing</button>

<div id="popoverChild" popover>
  <p>Try to Tab through these Inputs</p>
  <div><input type="date" /></div>
  <div><input type="date" /></div>
</div>

JSFiddle

• html
• css
• accessibility
• popover
• keyboard-navigation

Share Improve this question Follow edited Nov 21, 2024 at 13:46 C3roe 96k1515 gold badges9797 silver badges164164 bronze badges asked Nov 21, 2024 at 13:38 TheLovelySausageTheLovelySausage 4,0841717 gold badges6565 silver badges113113 bronze badges 7

• 1 It seems to work fine for me (Chrome OS) – Mippy Commented Nov 21, 2024 at 13:51
• 1 That's unexpected, I have the issue on Windows with Chrome, Edge and Firefox – TheLovelySausage Commented Nov 21, 2024 at 14:21
• 1 I tested it on my laptop with Fedora Linux and Firefox, I had the issue – Mippy Commented Nov 21, 2024 at 14:33
• 1 At least I know I'm not crazy now! – TheLovelySausage Commented Nov 21, 2024 at 14:35
• 1 And my PC with Windows and Edge/Firefox Dev edition didn't work either – Mippy Commented Nov 21, 2024 at 14:39

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

This isn't really much of an answer but after extensive testing with the HTML popover, it seems there are other issues across different browsers (aside from the unexpected tab functionality with date inputs). I encountered issues such as not closing on focus out and triggering window scrolls, I don't think it's ready for use in production just yet (even with polyfills)

本文标签： cssHTML Popover Attribute Accessibility Issues for Date Input (Wonky Tabbing)Stack Overflow