WCAG A Level Accessibility Issue

Hi there. When a calendar doesn’t have any events found on a day, it has a message of “No events found on this day.” This <p> is wrapped in a parent <ul>. But because it doesn’t have any calendar items that would be a <li>, there the parent <ul> is essentially empty, which flags a level A accessibility issue.

This is the rendered code:
<ul class="lw_cal_event_list"><p class="h3">No events found on this day. </p></ul>

The conditional really should be,
IF events
<ul><li>....</li></ul>
ELSE
<p>No events found on this day</p>

not
<ul>
IF events <li>...</li>
ELSE <p>...</p>
</ul>

Here is an example.
https://events.ualr.edu/cstem/day/date/20260726

Thanks as always!
Adam

Hi Adam,

Thanks, we’ll flag this to check out and address in our core theming components.

In the meantime, if you’d like to get this closed out sooner for your calendar, you can theme and edit the lw_cal_day.html and/or lw_cal_no_results.html calendar components to update that markup and remove the <p> and/or introduce the <li> as desired. For instance, the kind of IF/ELSE logic you mention might work in lw_cal_day component by checking for the existence of <li in the obj.events variable.

Karl

Thanks for the quick reply, Karl! - Adam

Just confirming for anyone else that runs into this: the core livewhale components don’t use ul>li for events list (nested divs instead), so this issue and fix would be confined to _ingredients/.

That is, if you want to use another markup style, feel free, but just note that you’ll want to consider lw_cal_list, lw_cal_event, and lw_cal_no_results in your theming work.

Hey Karl. Was this the answer or are you and your team still looking into it? You said that the core files don’t use ul > li but the _ingredients files do. Is this changing? Can it change? Everything is currently built around the ul > li theming so is this possible without breaking several other things? Thanks!

Hi Adam,

Gotcha, happy to explain – anything inside of _ingredients (where most theme and customization files live) is considered “client-specific code” in our SLA, so you’re more than welcome to change it, but it’s not something that will update automatically in a new release, the way we do for core files.

It definitely can change – you can rework the theme to avoid ul>li altogether, or could try simply updating the no-results case to use a matching li. That can be done using SFTP or the built-in Ingredients editing tool in LiveWhale 3+. More about theming is here, as a reminder. Theming LiveWhale Calendar - LiveWhale Support

If you wanted our help making any hands-on changes to your theming, you can reach out using the Request Help Form, otherwise hopefully it’s just a few minutes of work for someone comfortable editing HTML. And as always, we suggest trialing theming changes on your dev server before making those changes on production. Hope this helps! Thanks,

Karl