Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

rbd-lift-instruction not contained by landmark #1568

Closed
flacerdk opened this issue Oct 29, 2019 · 3 comments
Closed

rbd-lift-instruction not contained by landmark #1568

flacerdk opened this issue Oct 29, 2019 · 3 comments
Assignees
@seancurtis
Labels
accessibility ♿️

Comments

@flacerdk
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

Raised #1578 to solve it. Ended up just being able to hide it with display: none; instead.

@alexreardon
Copy link
Collaborator

Closed by #1578

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@seancurtis seancurtis

Labels
accessibility ♿️
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@seancurtis @flacerdk @alexreardon