Use pointer cursor for interactive elements

[alexdln]

General

We have two main positions regarding the cursor:

• the historical context of the W3C (use pointer cursor for links only) and the system cursor on devices;
• the established user experience and the standard supported by most sites (including Google and Wikipedia).

Last time we gave the default cursor a chance, and at the moment it is written as the rule in our contributing guide.

Standards

To begin with, what we consistently agree on is that we need a clear and understandable standard and unification of rules. Also it must comply with a11y standards.

Regarding the a11y standards, we were unable to find clear wording for all standards, and in fact, this is clearly stated only in the W3C (spec) in its original version*

In terms of usage, there is also no absolute standard - most sites prefer pointer, OS almost always use default, some libraries use default

* W3C recently updated their standard and specified that pointer can be used for interactive elements (Video, working group discussion), but apparently as a result of wrong changes this line was removed (commit)

Internal talks

Even though we want to follow the standard (and given that the working group has decided that using pointer is acceptable) - we also take the established user experience as a key focus. And it almost unequivocally indicates that we're more accustomed to buttons on a website with a pointer.

This is supported by our personal experience as users and as the target group of our website. In terms of accessibility, we must also take into account existing practices, as changing them could make daily experience worse for some users.

Result

Based on all this, we're returning the pointer cursor for all interactive elements (without any distinction or definition of what a link is and what a button is). This needs to be updated in the contributing guide and updated throughout our site.

[graphieros]

Note on how to enable cursor pointer on chart components (TrendsChart.vue & VersionDistribution.vue):

Add useCursorPointer attr in @chartConfig computed

const chartConfig = computed<VueUiXyConfig>(() => {
  return {
    //...
    chart: {
      //...
      userOptions: {
        //...
        useCursorPointer: true
      }
    }
  }
})