Position date picker dialog below help text

[danieldafoe]

Originally intended to address issue #1531. As it turns out, that issue might only be reproduceable on Linux and is slightly different; it is related to the position of the button, not the dialog.

Preview

[github-actions]

Regression test coverage:

Examples without any regression tests:

• dialog-modal/alertdialog.html

Examples missing some regression tests:

• dialog-modal/datepicker-dialog.html:
  • textbox-aria-describedby
• menu-button/menu-button-actions-active-descendant.html:
  • menu-up-arrow
  • menu-down-arrow
  • menu-character
• toolbar/toolbar.html:
  • toolbar-tab
  • toolbar-right-arrow
  • toolbar-left-arrow
  • toolbar-home
  • toolbar-end
  • toolbar-toggle-esc
  • toolbar-toggle-enter-or-space
  • toolbar-radio-enter-or-space
  • toolbar-radio-down-arrow
  • toolbar-radio-up-arrow
  • toolbar-button-enter-or-space
  • toolbar-menubutton-enter-or-space-or-down-or-up
  • toolbar-menu-enter-or-space
  • toolbar-menu-down-arrow
  • toolbar-menu-up-arrow
  • toolbar-menu-escape
  • toolbar-spinbutton-down-arrow
  • toolbar-spinbutton-up-arrow
  • toolbar-spinbutton-page-down
  • toolbar-spinbutton-page-up
  • toolbar-checkbox-space
  • toolbar-link-enter-or-space
  • toolbar-spinbutton-role

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

• dialog-modal/alertdialog.html
  • "Keyboard Support" table(s):
    • Tab
    • Shift + Tab
    • Escape
    • Command + S
    • Control + S
  • "Attributes" table(s):
    • alertdialog
    • aria-labelledby=IDREF
    • aria-describedby=IDREF
    • aria-modal=true
    • alert

SUMMARY:

55 example pages found.
1 example pages have no regression tests.
3 example pages are missing approximately 27 out of approximately 780 tests.

ERROR - missing tests:

Please write missing tests for this report to pass.

[carmacleod]

Thanks, @danieldafoe!
We discussed this and decided that the dialog could go right under the button/text field, i.e. margin-top: 0; (or don't set at all).
This would have the effect of completely obscuring the help text, but when the dialog is open the help text isn't really necessary.
Do you agree?

[danieldafoe]

@carmacleod Ah, that makes sense indeed! I can make that change instead.

[danieldafoe]

@carmacleod I hope you don't mind, but my design eye found that margin-top: 0 was a bit too close to the icon, so I chose a value that gave a bit more breathing room, yet still covers the help text.

Let me know what you think!

[carmacleod]

Looks great!
Thanks @danieldafoe !

[spectranaut]

I'm perfectly fine with this change but it doesn't actually solve the issue of the calendar butotn obscuring the help text, in chrome or firefox, as seen in my comment here: #1531

[a11ydoer]

Screen capture is in the issue 1531

[mcking65]

Per comment from @spectranaut, I'm removing the association between this PR and #1531. Nonetheless, we have consensus that this is an improvement in the dialog positioning. So, going forward with the merge.

Thank you @danieldafoe