I think the change in the JavaScript to support both <a> and <button> is fine but semantically I think the default markup should stay as a <button> and if you need to use an <a> element you should override the layout.

Same problem we will have with BS4 in J4, so why not makes the changes now?

Maybe someone better with accessibility (or frontend in general) can chime in here but it's not a good practice to misuse a <a> element when you aim to represent a button on the page. So semantically the current markup structure is correct and I'd personally argue the frameworks should address the bugs in their code. Or, I could be totally wrong here and the change doesn't matter. But at first glance this doesn't seem like a correct change in terms of proper markup structure.

You are right, the change between <button> and <a> makes a difference for accessibility.
Can we still adopt the customizations in the JS and CSS?

The CSS and JS changes look fine to me at a quick glance without actually testing them (since the JS changes are just adding support for looking for an <a> element as well as <button>).

so why not makes the changes now?

Well the calendar, as the rest of the fields in J4, will be custom elements #19427. So all I wanted to say is this code is going to be majorly deprecated in J4 (might stay as is in the legacy folder, although I really like to see this thing die)

Is #15928 a duplicate issue?

It looks quite like this. However, in my tests it was enough for .calendar-container table tbody td.today to set the width from 100% to auto.
In that case, I can close this PR.
Thanks to all.

@degobbis Please consider reopening this PR and make your change to calendar-rtl.css too. I will close the other PR since it is pending a change for awhile now. Also, please provide steps to reproduce the issue. Thanks.

The other PR actually pretty much describes the problem. I had the same flawed output as shown in the pictures, with the UIkit framework from Yootheme.

Testing Instructions

• Download and install Yootheme Master2 (direct link) Edit: (Download-Site) to use Uikit as CSS-Framework
• Make theme as default and configure it to disable Bootstrap (You find this option under the tab
  Options -> Settings in the theme style settings
• Download, install and enable my plugin to create forms JTF (do not be scared, it's almost all in German, because it is mainly used in our agency in Germany)
• Create a new menuitem with new content and insert the plugin call
  {jtf theme=calendar|framework=uikit}
• Now go to frontend an test the field

Expected result

• Calendar looks like normal

Actual result

• screenshot_calendar_broken_design

Quite a lot of effort for customizing two CSS lines without a B/C break

I have tested this item ✅ successfully on 7df2ac0

Works good screenshots are following now.

Uikit before patch

Uikit after patch

I followed the test instructions in #19944 (comment). And my test was successful.

Before applying the patch the calendar in yootheme master2 uikit

After applying the patch the calendar in yootheme master2 uikit

After applying the patch the calendar in protostar

I have tested this item ✅ successfully on 7df2ac0

Ready to Commit after two successful tests.