ARIA improvements for event elements, tabindex

New solution proposed by @arshaw on 8/30/2021:

Event elements are not always tabbable nor do they always trigger something when the SPACE/ENTER keys are pressed when focused. The solution entails:

1. Detecting whether the event is “interactable”. It is interactable if one of the following is true:

• it has an event.url property
• an eventClick handler is defined calendar-wide or for the current view
• a new event.interactable property is set to true. This will be useful for users that attach interactions with eventDidMount hook. it must NOT be set to false.

1. Is the event interactable?

• If it IS interactable, we need to ensure it is in the tab order:
  • if it has a event.url, no further work is required. An <a href=""> will be produced, which ensures it is in the tab order
  • otherwise, an <a> tag without an href will be produced, which will NOT be in the tab order. Unfortunately, we must keep element as an <a>, otherwise it would be a breaking change. Let’s put a tabindex="0" in tandem with detecting click, ENTER press, and SPACE press.
• If it IS NOT interactable, we need to put role="presentation" on the <a> tag to avoid confusing screen readers. In future version of FullCalendar we will move this markup to a different tag (<span> ?)

---

Original request by @tyrylu:

Hello. Would it be possible to announce to accessibility technologies that the days and event records may be clicked? It is not obvious, at least in the usage scenario of Owncloud/Nextcloud. I am not sure what could be done than adding a button role to the elements, you may have some better ideas.

[gbonker]

@christianortega123 the following eventDidMount block made events tabbable and clickable for my team:

var calendar = new FullCalendar.Calendar(calendarEl, {
        eventDidMount: function(info) {
          info.el.href="javascript:void(0);";
        },
});

[mynamesleon]

As this is still an open issue, it’s worth mentioning that, while this isn’t currently catered for by fullCalendar, you can use the available callbacks to correct most of it yourself - it’s not an elegant solution, but it works for the time being if this is a requirement for you. e.g.

$('#your-element').fullCalendar({
    // other options
    viewRender: function (view, $el) {
        $el.find('a[data-goto]').filter(function () {
            return !$(this).attr('href');
        }).attr('href', '#');
    },
    eventRender: function (event, $el) {
        // if you're doing something when the event is clicked...
        ($el[0].nodeName === 'A' ? $el : $el.find('a')).attr('href', '#');
    }
});

You might run into some page jump issues though - might also be worth binding a click function after adding the href to prevent the default browser action.