search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 345 forks source link

Small visual bug: Dialog Datapicker Calendar button in incorrect place #1531

Open spectranaut opened 4 years ago

spectranaut commented 4 years ago

It looks like the calendar button on the dialog datapicker example is in the incorrect place. It is over the text below the input box which explains the expected format of the date. I'm not handy enough with css to know how to debug/fix it!

carmacleod commented 3 years ago

the calendar ~button~ on the dialog datapicker example is in the incorrect place

@spectranaut Just confirming that you meant "calendar" and not "calendar button"?

a11ydoer commented 3 years ago

@spectranaut Could you kindy confirm that mislocation of caledar button is still a problem so that we can evaluate Daniel's pull request will fix the issue? (Above link is pointing local host and we can not see the problem.) Thanks for any screen capture or the url.

mcking65 commented 3 years ago

@spectranaut We have a fix in #1584 provided by @danieldafoe, assuming that you meant this issue to be about dialog placement, not button placement. In last week's meeting, TF consensus was that it is OK for the help text to be covered when the dialog is open because the format is not necessary when choosing from the calendar.

If #1584 resolves this issue, please provide an approving review.

spectranaut commented 3 years ago

It looks like #1584 solves a different issue -- it does move the dialog placement to a slightly better location. The problem remains that the calendar button is in the wrong location, it constantly covers the mm/dd/yyyy hint text. I update the link and here it is again: https://w3c.github.io/aria-practices/examples/dialog-modal/datepicker-dialog.html

calendar-button-covers-text

mcking65 commented 3 years ago

@spectranaut we discussed in today's meeting. We're wondering if this might be related to being on Linux? No one can reproduce it on Mac or Windows. Then, of course, the question would be if it is a browser bug or a bug in the example.

@smhigley is going to help investigate.

spectranaut commented 3 years ago

@mcking65 wow! It is a linux bug. I just tried opening the example in my microsoft virtual machine, and it's true, the calendar button is in the correct location to the right of the input box, instead of covering the hint text below the input box.

smhigley commented 3 years ago

@spectranaut we discussed switching it over to use flex anyway, because a) who doesn't like flex, and b) then no more position: absolute date format text :D.

I'll add you to the review for that to check how it renders on linux 😁