Skip to content

Update aria-only class to have absolute positioning#1243

Merged
gwyneplaine merged 1 commit intoJedWatson:masterfrom
JHilker:better-aria-hidden
Oct 27, 2017
Merged

Update aria-only class to have absolute positioning#1243
gwyneplaine merged 1 commit intoJedWatson:masterfrom
JHilker:better-aria-hidden

Conversation

@JHilker
Copy link

@JHilker JHilker commented Sep 22, 2016

When the component is restyled using flex, the width of the aria-only box causes the width of the Select-multi-value-wrapper to fluctuate when clicking into the input, and starting to type. Making this position: absolute removes it from the flow of flex, and thus solves this issue.

This seems to be a standard way to do this, while keeping it accessible. See:
http://a11yproject.com/posts/how-to-hide-content/
http://itstiredinhere.com/accessibility/

Error case:
image

When the component is restyled using flex, the width of the aria-only box causes
the width of the `Select-multi-value-wrapper` to fluctuate when clicking into
the input, and starting to type. Making this `position: absolute` removes it from
the flow of flex, and thus solves this issue.

This seems to be a standard way to do this, while keeping it accessible. See:
http://a11yproject.com/posts/how-to-hide-content/
http://itstiredinhere.com/accessibility/
@coveralls
Copy link

Coverage Status

Coverage remained the same at 93.014% when pulling 6b3a763 on JHilker:better-aria-hidden into 2b14448 on JedWatson:master.

@gwyneplaine
Copy link
Collaborator

gwyneplaine commented Oct 27, 2017

Thanks @JHilker this has been merged into master

@gwyneplaine gwyneplaine merged commit 099a826 into JedWatson:master Oct 27, 2017
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.

3 participants