Possible issue with Browser.application?

[michaeljones]

Hi, thanks for maintaining this project! It was a relief to see it being ported to Elm 0.19.

I've been updating our app to Elm 0.19 and we're using Browser.application and that seems to listen to all the a tags in the DOM and act on the click events. Unfortunately I think this might mean that we're getting weird interactions with the left & right arrows in the DatePicker as they use a tags.

Have you seen this at all? I'm currently tracking down different bugs in my app due to this a tag behaviour and I'm not at all sure that I understand it correctly. In this case however, as no page navigation is taking place it seems like it might be reasonable to model them with button tags instead?

[JDemler]

Thanks for reporting this issue.

I see two possible solutions:
Turning the a-tag into a button or a div tag.

With div:

With button:

They both work and pass the tests. Button looks different though and would result in a change of css.
As that would require all users to update their css I am a bit reluctant to do this.

Are there any arguments against using div instead of button?

[michaeljones]

I'm afraid I'm tempted to suggest that the button is more semantically correct, and I think it is more accessible, so that is what a library should provide. The CSS change is less than ideal but the visual inconsistency is minor.

I understand your concern though and respect the decision you make.

[JDemler]

That makes sense.

This will result in a breaking change, but as we already have a breaking change queued, I think it is acceptable. I will release the change made in #10 and this one together.

[michaeljones]

Great, thanks! Yeah, I saw that change. I really like what you've done with providing the extra init* functions that don't produce commands and this looks like another good change!

[JDemler]

Commit 87ca453 fixes this issue and turns the a-tags into button-tags with a seemingly trivial css chage.

Would it be possible for you to test it in your Browser.application use-case?
After that I would release this change together with #10.

[michaeljones]

Hi, I've already copied the code into my project and made the a to button change. It does seem to solve the problem. Hadn't taken the time to address the css to happy to see that :) I'll revert back installing your module once this is released!

[JDemler]

Release in https://package.elm-lang.org/packages/CurrySoftware/elm-datepicker/3.0.0/

[JDemler]

For future reference:
Another alternative, that would not have resulted in a breaking style change, is to use the role attribute on the div:

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

[michaeljones]

Thanks for sharing the knowledge. Definitely something I should learn more about.