Date for each of the events is listed BEFORE the heading for each of the events

[lukefretwell]

Source

https://airtable.com/appRFUc45sF4yWFut/tbl51inE74gEWlB0x/viwG9G4vAjsjQEh4g/rec5vbF3npGlOwKGM?blocks=hide

Describe the bug

A clear and concise description of what the bug is.

The date for each of the events is listed BEFORE the heading for each of the events. A screen reader user navigating by headings would have to navigate UP/Backwards to know what date the heading for the event and subsequent information refers to. Ideally, the heading is at the top of all information related to the event.

Screenshots

If applicable, add screenshots to help explain your problem.

https://github.com/proudcity/wp-proudcity/assets/1569463/f11808ee-c119-4249-9b0a-d1cd70a42687

https://github.com/proudcity/wp-proudcity/assets/1569463/5d1da6d3-8b41-4b5f-a751-cbf034f16134

[curtismchale]

I think we'd simply move the heading to the top level of the wrapper outside the two wrappers that allow for right/left boxes. That does mean a change to our styles as the heading (technically) would then align to the left side above the date, at least if we took the easy way @lukefretwell .

[lukefretwell]

@curtismchale I think that's fine. I don't love the boxes and the truncated month is not great. Just a number of accessibility and mobility issues.

In a perfect world:

• Get rid of boxes, move date to above the time
• Put date, time, add to calendar in an unstyled ul

[kevindherman]

@lukefretwell getting rid of the box is smart. What if it went to the right instead of between title and time so then the heading text would come first and can still keep some of the "calendar" style of the bigger date in the list view. As a reminder, if they want something with only the title they can do the mini list in the event list widget.

If the right align for the former date box is at all no good for accessibility or mobile, please disregard.

cc @curtismchale