react-flipcard icon indicating copy to clipboard operation
react-flipcard copied to clipboard

Add option to not focus after flip

Open burtyish opened this issue 9 years ago • 6 comments

Hi, I was glad to find this component, it's pretty sweet - thanks! I'd like to add the option to avoid focusing after flipping. I will gladly work on a PR for this if this is something you may be interested in merging.

P.S. Here's my use case: I'm using the flip card show a placeholder image until all my data is ready. When the data is ready, I flip the card to reveal the final image. So focusing on the image is not a desired effect here.

burtyish avatar Oct 14 '15 15:10 burtyish

@mzabriskie how about it? Would you consider a PR for this issue?

burtyish avatar Oct 18 '15 13:10 burtyish

The focus is done for the sake of accessibility. I am reluctant to break the use case for screen readers. I understand your PR would be done as an optional prop, but I wonder in your use case where the focus should be, and how it affects a11y.

mzabriskie avatar Oct 18 '15 15:10 mzabriskie

I see your point about a11y now. If I understand correctly, one example could be: A vision-impaired user requires the flip-back to be focused to hear (via screen reader) the content of the flipped card once it's been flipped, right? This makes sense when the user has triggered the flip. In the use case I described though, the flip card is controlled (disabled={true}) and triggered by an async action (receiving data and fetching a photo) which happens while the user is reading other content on the page. Focusing on the flipped photo would grab focus from whatever is being read to the flip card - in effect maybe even hurting a11y, no? I'm new to a11y, so I may be wrong here.

burtyish avatar Oct 19 '15 07:10 burtyish

I guess I don't fully understand your use case. It sounds like you are showing a loading image while your data loads, to indicate that something is happening. Why wouldn't this same message need to be conveyed to someone with an impairment? Also if the data is still loading, what are they reading?

mzabriskie avatar Oct 22 '15 06:10 mzabriskie

First, I'll mention that this is not deal breaker for me. I see the value in your points and wouldn't want to hurt a11y. And now to answer your questions... It's a dashboard of sort and the image is akin to a profile photo. Before the image is loaded, we show a branded placeholder image. While the image is loading, the person could be reading other data on the page, which is acquired from various sources. AFAIK the vision-impaired version of the image would be the alt text, something like "Joe's profile photo".

burtyish avatar Oct 22 '15 07:10 burtyish

Are you still interested in having an option to disable focus on flip? I can open a PR for that. I know it has been a while, but it would still be cool to have it !

ValBerthe avatar May 23 '17 15:05 ValBerthe