Accessibility for Volto

tisto commented 5 years ago

It is important that Volto meets the common accessibility standards such as WCAG 2.0 to match the features of the classic Plone UI.

Here is a good starting point for accessibility in React:

https://reactjs.org/docs/accessibility.html

I think we should do three things:

1) Test accessibility manually, for instance with the Axe Chrome/Firefox extension:

https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd/related

We could report the violations in the issue tracker and fix them one by one. These are great issues for newbies to get started with Volto development.

2) Add accessibility to the development workflow and report violations in the console:

https://github.com/dequelabs/react-axe

3) Test accessibility automatically as part of the CI process:

https://www.npmjs.com/package/cypress-axe

I'd like to look into 3). Any takers for 1) and 2)? cc @polyester

Tools:

Asqatasun: https://github.com/Asqatasun/Asqatasun

Standards:

WCAG: https://www.w3.org/TR/WCAG20/
ATAG: https://www.w3.org/TR/ATAG20/

polyester commented 5 years ago

I'm up for it, although of course time is an issue. I think for the Beethoven Sprint 2019 we should also come up with sort of a "design guideline" doc. Usually, you can mitigate most a11y problems by following some relatively simple rules. The really short version, which needs to be fleshed out, goes something like this:

make sure that widgets and navigation work with keyboard, not just a mouse. This eliminates a large number of gotcha's. It is not easy, though: date-pickers are notoriously difficult. Having the ability to manually type in just a date in a field, in case you can't use the fancy picker, is key. If your widgets are keyboard-navigable, you just have improved a11y by an absolute metric ton. This is also easier to test for developers who don't want to deal with installing a screenreader (which can be hard to use): all devs have a keyboard, and know how to use it.
HTML5 structural elements are always better than Aria. Aria is a crutch which can be necessary but if it can do without it's better; whenever there is a widely supported HMTL5 tag, use that and skip the Aria.
forms need care. It's doable, just be thorough in making sure all fields are labelled correctly.
live changes in the DOM can be disconcerting, for instance notifications. If the notification is not super-duper vital, it should have an Aria role of "polite" so non-sighted users aren't rudely interrupted in their workflow. If the notification is super-duper important, inform the user that their focus has changed, and what they need to do now. Basic rule: don't steal people's focus, unless you have to. And if you have to, explain where they are now.
all modals need a keyboard-accessible and screenreader-readable "close" link. One of the more common errors is having a modal that just darkens or blurs the background, and the only way out is clicking 'outside' of the modal; which means absolutely zero to blind users.

It's all not rocket-science, but could be worked into a nice, readable guide for devs so most problems are caught in the design stage. Looks like a fun project for Beethoven 2019!

We already worked on some more 'philosophy' tickets dealing with Alt-tags for images at Sorrento, some of which has already flown into Victor's work. They are basically equivalent for classical Plone as well as for Volto.

pigeonflight commented 5 years ago

I'm open to this. I often have a few hours on a Tuesday.

tisto commented 5 years ago

FYI: I am currently working on both an eslint check for a11y and a cypress-based accessibility test.

@pigeonflight Awesome! I'd recommend to install the axe firefox/chrome extension and run it on a local volto instance. There are plenty of issues that need to be fixed. Maybe @polyester could review those fixes to make sure they are in line with our best practices.

polyester commented 5 years ago

+1.

The Axe tools are currently the one that strike a reasonable balance: not too many false positives, and good integration into browser developer tools. There are some other tools out there that give way too many warnings. It's important to focus on the 90% that really delivers concrete gains in a11y. Full AAA compliance, for instance, is mostly counter-productive. First make sure we aim for AA level; focusing too much on AAA is really not helping anyone on a daily basis.

tisto commented 5 years ago

@polyester yeah. I will try to come up with a pull request that fails with a reasonable amount of warnings at first. Maybe we can configure axe to not be too strict. Once we have that in place we can improve things bit by bit. Seems I have to struggle a bit with prettier and eslint before I can move to that though...

tisto commented 5 years ago

FYI: Here is the output of the cypress-axe test failures:


1) App Has no detectable a11y violations on load:
     AssertionError: 6 accessibility violations were detected: expected 6 to equal 0
      at Function.fn.(anonymous function) [as equal] (http://localhost:3000/__cypress/runner/cypress_runner.js:51775:34)
      at getRet (http://localhost:3000/__cypress/runner/cypress_runner.js:54380:16)
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:131273:23)
      at Function.Promise.attempt.Promise.try (http://localhost:3000/__cypress/runner/cypress_runner.js:128647:29)
      at Context.thenFn (http://localhost:3000/__cypress/runner/cypress_runner.js:54394:26)
      at Context.then (http://localhost:3000/__cypress/runner/cypress_runner.js:54654:21)
      at Context.<anonymous> (http://localhost:3000/__cypress/runner/cypress_runner.js:61586:21)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:61291:33
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:131273:23)
      at Promise._settlePromiseFromHandler (http://localhost:3000/__cypress/runner/cypress_runner.js:129291:31)
      at Promise._settlePromise (http://localhost:3000/__cypress/runner/cypress_runner.js:129348:18)
      at Promise._settlePromiseCtx (http://localhost:3000/__cypress/runner/cypress_runner.js:129385:10)
      at Async._drainQueue (http://localhost:3000/__cypress/runner/cypress_runner.js:126202:12)
      at Async._drainQueues (http://localhost:3000/__cypress/runner/cypress_runner.js:126207:10)
      at Async.drainQueues (http://localhost:3000/__cypress/runner/cypress_runner.js:126081:14)
      at <anonymous>

https://travis-ci.org/plone/volto/jobs/530814132

That is not very helpful ATM. It will come handy to detect regressions in the future once we fixed things though.

tisto commented 5 years ago

@polyester @pigeonflight I created an eslint config that check accessibility:

https://github.com/plone/volto/pull/731

We have 83 errors (and 144 warnings which are not all a11y related):

yarn run v1.13.0
$ ./node_modules/eslint/bin/eslint.js 'src/**/*.{js,jsx,json}'

/Users/timo/workspace/plone/volto/src/components/manage/Add/Add.jsx
   11:10  warning  'Router' is defined but never used                                                                                                                                                                                                                                                                                                                                       no-unused-vars
  240:19  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  240:19  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  240:19  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  253:21  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  253:21  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  253:21  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  265:19  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  265:19  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  265:19  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
  223:15  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  223:15  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  223:15  error  Elements with the 'link' interactive role must be tabbable                                                                                                                                                                                                                                                                                                               jsx-a11y/interactive-supports-focus

/Users/timo/workspace/plone/volto/src/components/manage/Controlpanels/Controlpanels.jsx
  25:10  warning  'getBaseUrl' is defined but never used  no-unused-vars
  26:10  warning  'debug' is defined but never used       no-unused-vars

/Users/timo/workspace/plone/volto/src/components/manage/Controlpanels/UsersControlpanel.jsx
  20:8  warning  'jwtDecode' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/manage/Diff/Diff.jsx
  20:10  warning  'Router' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/manage/Edit/Edit.jsx
   11:10  warning  'Router' is defined but never used                                                                                                                                                                                                                                                                                                                                       no-unused-vars
  161:7   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  240:19  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  240:19  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  240:19  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  253:21  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  253:21  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  253:21  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  265:19  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  265:19  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  265:19  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Tiles/HeroImageLeft/Edit.jsx
  275:9  error  `tabIndex` should only be declared on interactive elements  jsx-a11y/no-noninteractive-tabindex

/Users/timo/workspace/plone/volto/src/components/manage/Tiles/HTML/Edit.jsx
  129:9  error  `tabIndex` should only be declared on interactive elements  jsx-a11y/no-noninteractive-tabindex

/Users/timo/workspace/plone/volto/src/components/manage/Tiles/Image/Edit.jsx
  231:9   error  `tabIndex` should only be declared on interactive elements                         jsx-a11y/no-noninteractive-tabindex
  308:13  error  Non-interactive elements should not be assigned mouse or keyboard event listeners  jsx-a11y/no-noninteractive-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Tiles/Maps/Edit.jsx
  224:9   error  `tabIndex` should only be declared on interactive elements                         jsx-a11y/no-noninteractive-tabindex
  301:13  error  Non-interactive elements should not be assigned mouse or keyboard event listeners  jsx-a11y/no-noninteractive-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Tiles/Video/Edit.jsx
  176:9   error  `tabIndex` should only be declared on interactive elements                         jsx-a11y/no-noninteractive-tabindex
  236:13  error  Non-interactive elements should not be assigned mouse or keyboard event listeners  jsx-a11y/no-noninteractive-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Toolbar/Toolbar.jsx
  13:8  warning  'cx' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/ArrayWidget.jsx
   8:29  warning  'Dropdown' is defined but never used           no-unused-vars
   9:10  warning  'concat' is defined but never used             no-unused-vars
   9:18  warning  'debounce' is defined but never used           no-unused-vars
   9:43  warning  'uniqBy' is defined but never used             no-unused-vars
  13:8   warning  'Select' is defined but never used             no-unused-vars
  18:3   warning  'getBoolean' is defined but never used         no-unused-vars
  30:7   warning  'messages' is assigned a value but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/CheckboxWidget.jsx
  100:19  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  100:19  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  100:19  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  103:19  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  103:19  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  103:19  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/SchemaWidget.jsx
  566:13  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  566:13  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  566:13  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  590:21  error  A form label must be associated with a control                                                                                                                                                                                                                                                                                                                           jsx-a11y/label-has-associated-control
  593:21  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  593:21  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  593:21  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/SchemaWidgetFieldset.jsx
  30:7  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  30:7  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  39:9  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  39:9  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  39:9  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  47:9  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  47:9  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  47:9  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/SelectWidget.jsx
  146:13  warning  Expected '===' and instead saw '=='                                                                                                                                                                                                                                                                                                                                      eqeqeq
  372:19  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  372:19  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  372:19  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  375:19  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  375:19  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  375:19  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/TextareaWidget.jsx
  112:17  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  112:17  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  112:17  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  115:17  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  115:17  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  115:17  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/TextWidget.jsx
  167:19  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  167:19  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  167:19  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  170:19  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  170:19  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  170:19  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/TokenWidget.jsx
   8:29  warning  'Dropdown' is defined but never used           no-unused-vars
   9:10  warning  'concat' is defined but never used             no-unused-vars
   9:18  warning  'debounce' is defined but never used           no-unused-vars
   9:33  warning  'uniqBy' is defined but never used             no-unused-vars
  28:7   warning  'messages' is assigned a value but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/manage/Widgets/WysiwygWidget.jsx
  283:19  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  283:19  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  283:19  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  286:19  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  286:19  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  286:19  error  Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions

/Users/timo/workspace/plone/volto/src/components/mosaic/Layout/Layout.jsx
    9:10  warning  'Link' is defined but never used                                                                                                                                                                                                                                                                                                                                         no-unused-vars
  245:5   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  279:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  284:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  289:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  298:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  303:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  306:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  347:11  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  446:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  449:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  450:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  453:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  454:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  455:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  458:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  459:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  460:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  461:13  warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  483:7   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  488:7   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  522:5   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  547:7   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  550:5   warning  Do not mutate state directly. Use setState()                                                                                                                                                                                                                                                                                                                             react/no-direct-mutation-state
  639:17  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  639:17  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  639:17  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  647:17  error    Static HTML elements with event handlers require a role                                                                                                                                                                                                                                                                                                                  jsx-a11y/no-static-element-interactions
  647:17  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener                                                                                                                                                                                                                                                                           jsx-a11y/click-events-have-key-events
  647:17  error    The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

/Users/timo/workspace/plone/volto/src/components/mosaic/Tile/Tile.jsx
  15:9  warning  'InlineToolbar' is assigned a value but never used                                              no-unused-vars
  59:7  error    Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events

/Users/timo/workspace/plone/volto/src/components/theme/Footer/Footer.jsx
  7:21  warning  'Divider' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/theme/Header/Header.jsx
  7:21  warning  'Grid' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/theme/Login/Login.jsx
   12:10  warning  'Router' is defined but never used                                                             no-unused-vars
  191:27  error    The autoFocus prop should not be used, as it can reduce usability and accessibility for users  jsx-a11y/no-autofocus
  203:54  error    Avoid positive integer values for tabIndex                                                     jsx-a11y/tabindex-no-positive

/Users/timo/workspace/plone/volto/src/components/theme/Navigation/Navigation.jsx
   6:28  warning  'Fragment' is defined but never used   no-unused-vars
   8:8   warning  'Helmet' is defined but never used     no-unused-vars
  14:16  warning  'Segment' is defined but never used    no-unused-vars
  17:10  warning  'Anontools' is defined but never used  no-unused-vars
  19:10  warning  'BodyClass' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/components/theme/View/DocumentView.jsx
  72:23  warning  Unnecessary escape character: \"  no-useless-escape
  72:39  warning  Unnecessary escape character: \"  no-useless-escape

/Users/timo/workspace/plone/volto/src/config/RichTextEditor/ToHTML.jsx
  49:7  warning  'getSpecialList' is assigned a value but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/config/Widgets.jsx
  8:8  warning  'ReferenceWidget' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/helpers/AuthToken/AuthToken.js
  8:10  warning  'Router' is defined but never used  no-unused-vars

/Users/timo/workspace/plone/volto/src/helpers/BodyClass/BodyClass.jsx
  42:23  warning  Expected to return a value in arrow function  array-callback-return
  58:27  warning  Expected to return a value in arrow function  array-callback-return

✖ 144 problems (83 errors, 61 warnings)

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@pigeonflight if you want to start fixing things this should be a very good starting point (browser extension + Travis job)

terapyon commented 5 years ago

Hi, @polyester and @tisto We have started a project for supporting a11y on Volto with @ma10 (Max Nakane) and @karad in in our company.

We found some problem for a11y in Volto. We will make some issues in this repository in some weeks. And we will need to support form you, We will menthion to you another time.

I want to make a tag of a11y. Can you make it?

tisto commented 5 years ago

@terapyon that's great! We actually plan to work on fixing the eslint issues reported above during the next days at the Beethoven Sprint in Bonn and then move on. If you have fixes already, would you mind pushing them to a branch? Otherwise, we risk fixing the same issues twice.

There is also the option to do a hangout or you sprinting remotely with us in the next days to work on a11y. :)

tisto commented 5 years ago

@jensens would it be possible to add an accessibility tag to the Plone github org? Could you take care of this or give us a pointer on how to do it?

terapyon commented 5 years ago

@tisto We ware only checking walkthrough in login -> Add new -> edit page. We found some issues. But we have one suggestion on toolbar. I made an issue as #775.

We don't hurry to support a11y. Please start modify by eslint tool. We will check a new version next month. (Our plan for the next timing is 4th July, we will have short (2hours) sprint every week or in 2 weeks)

polyester commented 5 years ago

@tisto @jensens I've created a tag: 99 tag: UX Accessibility not the shortest of names, but it's the same name as we use for Products.CMFPlone and I'm always in favor of things that reduce my brain effort ;-)

polyester commented 5 years ago

As of today, the eslint-jsx-a11y checks are down to zero errors, and thus have been merged into 'master' branch. Of course that doesn't mean there are no issues anymore, but the most obvious ones have been taken care of during Beethoven sprint.

Cypress/axe browser tests are still not 100%, but down from dozens of warnings to a handful.

terapyon commented 5 years ago

@polyester I want to re-check an a11y on Volto 3.2.x. Can I use the version for an a11y check?

terapyon commented 5 years ago

@polyester @tisto As we try to improve accessibility of Volto, we are wondering if there is any plan to make use of StoryBook. https://storybook.js.org/ Together with the accessibility plugin of StoryBook, it would be much easier to discover accessibility issues. At the same time, it certainly would help to improve overall quality of UI components, besides accessibility.

terapyon commented 5 years ago

I want to re-check an a11y on Volto 3.2.x. Can I use the version for an a11y check?

I tried to check from master branch. I think better than 3.2.4.

plone / volto

Accessibility for Volto #726