reactstrap/reactstrap

Accessibility Docs

Open

#1013 opened on May 9, 2018

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (10,557 stars) (1,347 forks)batch import
BS compatibilitya11ydocshelp wanted

Description

We need accessibility docs which help explain how the end user of this library (the develop) can "close the gap" between what this library can and does provide in terms of accessibility and what is left up to the developer to implement in their specific usage. For example, with things like Tooltip and Popover the "target" is outside of those components and thus cannot be affected by them, the developer will need to add aria-describedby/aria-labeledby and aria-haspopup="true" to the target element themselves. Similar, connecting Label and Input via the for prop on the Label and the id prop on the Input. Bootstrap has something similar, but a little more generic: http://getbootstrap.com/docs/4.1/getting-started/accessibility/

Contributor guide

Tech stack
reactjavascripthtmlcss
Domain
documentation
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsARIA attributesUnderstanding of reactstrap components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Create a new documentation page explaining accessibility features and gaps in reactstrap. Follow the pattern of Bootstrap's accessibility page (http://getbootstrap.com/docs/4.1/getting started/accessibility/). For components like Tooltip and Popover, document that developers need to add aria describedby or aria labelledby and aria haspopup on the target element. For Label and Input, document the use of `for` and `id` props. Provide code examples for each case. The page should be added to the existing documentation structure.