Closed eddr closed 6 months ago
Is it on purpose?
What answer do you expect to hear by asking this question? :smile:
If you have suggestions for improving the calendar, I'm open to consider them, just write them in a constructive way, please.
Hi Vladimir
It was not my intention at all and I apologize. I was just trying to write what I see as lacking a short list so it will be readable.. Communicating in text can be tricky sometimes
And I was also wondering if I'm missing anything, like a roadmap to accessibility or simple JS hooks and customization that allow me to add text
Not an expert, but for the events I would probably consider using HTML tags like article with a p inside perhaps
and add aria-label attributes to all buttons
Thanks
I agree, there are a11y issues. Thanks for the suggestions, I'll try to implement them in the next updates.
Version 1.5.1 fixed some issues with a11y:
aria-label
attribute with the appropriate textShow more
and Close
buttons are now keyboard accessible<div>
with <article>
+<p>
for now because I haven't seen anyone use this approach in other calendars (if you have examples, please let me know). Also using <article>
generates A11y: Non-interactive element <article> should not be assigned mouse or keyboard event listeners.
warning in Svelte.That's amazing (: Thank you
About 3 - I agree that it was perhaps too specific, but since the event title and content are texts elements with semantic meaning, it is better to use a different element if possible. I'm not sure why others don't take it into account Wrote more in the list below
List:
Using "nav" HTML element for containers of navigation buttons
All the "ec-time"/"ec-day" class elements : I think can also be a "time" element
Same for date ranges - if possible - with two "time" elements for the start and end date-time values. In addition, perhaps user "aria-label" for the container. Something like that:
From: To:
About the event title/content/container:
"The Events Calendar" plugin uses specific elements - article, h, p: https://demo.theeventscalendar.com/events/month/
The Guardian uses fullcalendar as well ( apparently ), and the inner elements HTML are p and h for title and content
https://www.theguardian.com/sport/series/the-calendar
What do you think?
Thanks for the examples. Indeed someone is using <article>
for events. I will try to improve a11y in future releases.
Amazing, thanks
@eddr Sorry, this took a while. I released version 2.5.0 which contains:
<article>
and <h4>
tagsaria-label
(added dayHeaderAriaLabelFormat option)<nav>
tagPlease test it and tell me what you think.
Amazing work
Great. A small clarification - events are accessible from the keyboard only when the eventClick
hook is defined for events.
Let me close this ticket and ask that a new issue be opened for future improvements.
Thanks.
Thanks a lot! But I still do not get aria-label for the ec-prev and ec-next buttons. Do I need to enable them somewhere?
Thanks a lot! But I still do not get aria-label for the ec-prev and ec-next buttons. Do I need to enable them somewhere?
No, it should work out of the box. Are you accidentally overriding the buttonText option?
Thanks a lot! But I still do not get aria-label for the ec-prev and ec-next buttons. Do I need to enable them somewhere?
No, it should work out of the box. Are you accidentally overriding the buttonText option?
Oh Yes, I am overriding the 'today' button because I want it to display in a different language. I am not overriding the next/prev buttons. Is there any way I can keep the aria-labels for the navigation buttons while displaying custom text for the today button? Thanks a lot!
FYI, I have this: buttonText: { today: 'my custom text' },
I have this: buttonText: { today: 'my custom text' },
The current strategy for merging options for each view is as follows:
viewOptions
= defaultCommonOptions
< defaultViewOptions
< userCommonOptions
< userViewOptions
where xxxCommonOptions
are those options that are intended for all views, and xxxViewOptions
are respectively intended for a specific view and are passed inside the views
property. <
means that the options on the right overwrite the options on the left.
As you can see, by passing the buttonText
as an object, you are essentially setting the same object (with empty prev
and next
properties) for all views.
When the buttonText
is given as a function, instead of overwriting, this function will be called and the object from the previous merge step will be passed to it. Therefore, in your case, the option with the function should work.
So try
buttonText: function (text) {
text.today = 'my custom text';
return text;
}
It works! Thanks a lot! But I have another question. Is there any way to set custom aria-labels too? It's because sometimes I may need those labels in another language as well. Thank you!
Sure. There are prev
and next
fields for that. See buttonText.
buttonText: function (text) {
text.today = 'my custom text';
text.prev = 'my custom text';
text.next = 'my custom text';
return text;
}
Thanks a lot!
Hi
Checking the demo site, it seems that the content is not accessible even on the basic level:
Is it on purpose?
Thanks