[A11y] add <time> to timezone JavaScript

[wiffbi]

Describe the bug Currently when the user is in a different timezone than the event, JavaScript adds text to note the time in the users timezone, without corretly marking it as a <time> element.

Expected behavior Time should be marked up correctly. Ideally add a .sr-only text as an alternative for the icon or use role="img" with an aria-label on the icons <span> element.

[raphaelm]

Or maybe the other way around, maybe the original HTML should use <time> instead of our custom data-datetime attribute and the JS snippet should look for that? Or are there special cases in which this would be annoying?

[wiffbi]

You mean encoding the timezone-info in the datetime-attribute of <time> and let Javascript pick up the values from there? Should be possible – although that means AFAIK to include a full date with time and timezone. I will test how screen-readers will read this as always repeating the date when all dates are on the same day might become tedious pretty quickly.

[wiffbi]

At least Safari with VoiceOver on macOS only reads the textContent of so it should be possible to replace the custom <span data-time data-timezone> with <time datetime="isoformat"> – although we would still need the custom data-timezone attribute as the human readable timezone is output as a tooltip.