Skip to content

Added Screenreader-Support with ariaId #97

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.

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

Merged
merged 7 commits into from
Sep 28, 2017

Conversation

dsumer
Copy link
Contributor

@dsumer dsumer commented Aug 30, 2017

Added ariaId prop, which gets attached to the tooltips inner content container and can be used with aria-describedby for better accessibility and Screenreader-Support.

@coveralls
Copy link

Coverage Status

Changes Unknown when pulling 741e1bd on dsumer:master into ** on react-component:master**.

@coveralls
Copy link

Coverage Status

Changes Unknown when pulling 04b560a on dsumer:master into ** on react-component:master**.

@paranoidjk
Copy link
Member

I see you just attached an id attribute to div,how does help for aria?

@dsumer
Copy link
Contributor Author

dsumer commented Aug 31, 2017

For example, if you have an input field with an Tooltip around it you have currently no chance to link them for accessiblity purpose. With this id field you can do it like this:

                <Tooltip
                    ...
                    ariaId={this.props.name}
                    <input className={className}
                           type="text"
                           ...
                           aria-describedby={this.props.name}/>
                </Tooltip>

Now the Screenreader will associate the input field with the tooltip and read its contents when you focus the input.

@paranoidjk
Copy link
Member

So describedby attribute just need a dom element id. Then for tooltip itself, i suggest you named this api to id

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute

@dsumer
Copy link
Contributor Author

dsumer commented Aug 31, 2017

ok fine I will rename it to id .. then I will add an extra accesibility section to the README to describe how to work in harmony with screenreaders

@coveralls
Copy link

Coverage Status

Changes Unknown when pulling b5e7030 on dsumer:master into ** on react-component:master**.

@coveralls
Copy link

Coverage Status

Changes Unknown when pulling b5e7030 on dsumer:master into ** on react-component:master**.

@coveralls
Copy link

Coverage Status

Changes Unknown when pulling b5e7030 on dsumer:master into ** on react-component:master**.

@coveralls
Copy link

Coverage Status

Changes Unknown when pulling b5e7030 on dsumer:master into ** on react-component:master**.

@dsumer
Copy link
Contributor Author

dsumer commented Sep 3, 2017

is this PR ready to be merged?

@benjycui
Copy link
Member

benjycui commented Sep 8, 2017

@dsumer
Copy link
Contributor Author

dsumer commented Sep 28, 2017

me and my team are excited to see this in the next release of rc-tooltip :)
is there a chance that this PR will be merged?

@paranoidjk paranoidjk merged commit 7e75437 into react-component:master Sep 28, 2017
@paranoidjk
Copy link
Member

Sorry for the late, published + [email protected]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants