2020-06-23

Street Fighter II

Getting to grips with the complexity of interactions and accessibility

ns-calendar

Table

As ns-calendar is built with an html table, the following markup is expected:

<table>
  <caption>Month YYYY</caption>
  <thead>
    <tr>
      <th>Day</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      ...
    </tr>
  </tbody>
</table>

Date

A date is displayed in a cell within the body of the table.

Passive

There are two types of passive states for a date, either disabled or enabled.

We had a discussion that there could be a third state of unavailable which would be selectable, but this has been scrapped.

Both disabled and enabled days could be today.

NOTE: A cell within the table can be empty. This is to retain the integrity of the html table but play no part in its functionality.

• disabled

  • today

• enabled

  • today

• empty - in all cases, this should be no change. Essentially act as if it's not there.

Mouse

Hover

When the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Cursor

All three types of passive dates can be hovered over with the mouse cursor. The expected response of the cursor is:

• disabled - no change in cursor: cursor: default;

  • today - same as above

• enabled - display cursor as if it were a hyperlink: cursor: pointer;

  • today - same as above

Content

Interacting with the passive dates with the mouse:

• disabled - no change

  • today - no change

• enabled - display the content as a hyperlink: text-decoration: underline;

  • today - NOTE: The hover state of enabled today should be distinguishable from the passive representation of today.

Container

The container of the date has no interaction on mouse hover

Click

When the user has placed a pointing device over an element and presses the pointing device primary button (the left mouse button or a single finger touchpad tap).

NOTE: The hover state is present at this point in time as defined in the Hover section above.

Cursor

• disabled - no change

  • today - no change

• enabled - no change

  • today - no change

Content

• disabled - no change

  • today - no change

• enabled - Introduce a significant change in visual appearance. NOTE: that it's currently in a hovered state.

  • today - a significant visual difference or addition between a passive representation of enabled today to represent enabled today click this state is showing "selected today".

Container

• disabled - no change

  • today - no change

• enabled - no change

  • today - no change