open-indy / Koa11y

Easily check for website accessibility issues
https://open-indy.github.io/Koa11y
MIT License
436 stars 26 forks source link

Add support for Pa11y Actions #27

Open TheJaredWilcurt opened 7 years ago

TheJaredWilcurt commented 7 years ago
pa11y({
    actions: [
        'click element #tab-1',
        'wait for element #tab-1-content to be visible',
        'set field #fullname to John Doe',
        'check field #terms-and-conditions',
        'uncheck field #subscribe-to-marketing',
        'wait for fragment to be #page-2',
        'wait for path to not be /login',
        'wait for url to be https://example.com/'
    ]
});

We could add in a UI for this feature. We should draw some mockups of how this could be implemented.

Actions support was added into Pa11y in version 4.4.0. Updating to this version may break Koa11y, so we'll need to proceed carefully when exploring adding this feature.

Koa11y 3.0.0 ships with Node 5.12.0 built in. So we need to ensure that the version of Pa11y we are using does not require a version of Node newer than that, or we will need to drop support for a lot of legacy OS's.

TheJaredWilcurt commented 7 years ago

This feature is requested in https://github.com/open-indy/Koa11y/issues/9

Johnsoct commented 7 years ago

Working on UI mockups

Johnsoct commented 6 years ago

Mockups will be presented at Thursday's meeting, 20170921.

Johnsoct commented 6 years ago

step four step three

Johnsoct commented 6 years ago

Notes from 20170928

  1. Action "scripts" could be up to as many as 80 actions long.
  2. Individual actions should be duplicatable and draggable to reduce clicks and time to enter a redundant/common action, such as "wait for"
  3. Way to document your script as you go for organization + communication (to other users)
    1. [IDEA] Ways to group actions into smaller actions of a whole
      1. Method/action to group actions should be demonstrated with a GIF in the example section
      2. [IDEA] input at the end of the action input to merge up or down with above or below actions
  4. A way to add comments for further explaining what an action may do, such as "we are now within a modal".
  5. Inputs need a grabber.
  6. Grabber should not be on the same side, or a tab away, from the element used to group actions. If a user accidentally tabs too far and hits enter, they could break a group or move actions unintentionally --> poor usability.