search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.16k stars 2.53k forks source link

rbd-lift-instruction not contained by landmark #1568

Closed flacerdk closed 4 years ago

flacerdk commented 4 years ago

react-beautiful-dnd creates a div with id rbd-lift-instruction-0 and places it as a direct child of body. This makes accessibility tools such as react-axe complain about it not being placed inside a landmark:

moderate: All page content must be contained by landmarks https://dequeuniversity.com/rules/axe/3.4/region?application=axeAPI
Element: <html lang="en">
Fix any of the following:
  Some page content is not contained by landmarks
Related nodes
  HTML: <div id="rbd-lift-instruction-0" style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0px none; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);">

Expected behavior

I'd expect it to create the element inside a react-beautiful-dnd context (say inside a Draggable) and not as a child of body.

Steps to reproduce

  1. install react-axe: npm install react-axe
  2. add the following module to stories/:
// @flow
import React from 'react';
import axe from 'react-axe';
import ReactDOM from 'react-dom';
import { storiesOf } from '@storybook/react';
import { DragDropContext } from '../src';

axe(React, ReactDOM, 1000);

class App extends React.Component<*> {
  render() {
    return <DragDropContext />;
  }
}

storiesOf('Landmark issue', module).add('example', () => <App />);
  1. start Storybook: npm run storybook
  2. open Storybook and go to "Landmark issue". You'll see the axe errors in the console

Suggested solution?

There might be a good reason why the div is rendered as a child of body, but I don't see why it can't be a child of, say, the first Draggable that gets rendered inside a DragDropContext. This would ensure that the div is inside a landmark whenever the context itself is.

What version of React are you using?

16.9.0

What version of react-beautiful-dnd are you running?

12.0.0

What browser are you using?

Firefox 70.0

Demo

https://codesandbox.io/s/vertical-list-f4ykm

seancurtis commented 4 years ago

We should probably add aria-hidden to that element. Tested here: https://codepen.io/seancurtis/pen/wvvrqpq

This should prevent aXe auditing it, and we really don't want that description announced if someone decides to read the whole page. It's supplementary information only. I wish we had an aria-description attribute.

seancurtis commented 4 years ago

Raised https://github.com/atlassian/react-beautiful-dnd/pull/1578 to solve it. Ended up just being able to hide it with display: none; instead.

alexreardon commented 4 years ago

Closed by #1578