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.

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

Material Box improvement: When zooming in we should add a closing button so users know how to exit zoomed in view clearly #246

Open
Tracked by #543
nh916 opened this issue Jan 16, 2022 · 3 comments

Comments

@nh916
Copy link

nh916 commented Jan 16, 2022

When the user clicks on the image the image zooms in without telling the user an obvious way of how to zoom out. I think it would be very helpful if our framework added a white X button on the right corner that would clearly tell the user how to exit out of the zoomed picture, or something that would indicate that clearly.

We probably also need some aria labels for vision impaired users to have the assistive technologies tell them that they have zoomed in on an image and the X button should then be easily tabbed into to close the image. This way any user that has accessibility needs doesn't get stuck on the zoomed image and have a hard time tabbing out.

image

image

it could look something like this
image

It would be all the better if the X could somehow match the color of the image or be a mute color as to not distract away from the image that the user wants to see

@godalming123
Copy link

godalming123 commented Feb 2, 2022

You could also add the image alt tag underneath

@LoganTann
Copy link

I think it would be very helpful if our framework added a white X button on the right corner that would clearly tell the user how to exit out of the zoomed picture, or something that would indicate that clearly.

When the material box is open, the cursor changes to tell the user he just have to click on the image to hide it. We could add a X button (eg: for accessibility), but in fact, clicking anywhere would close the material box

You could also ad the image alt tag underneath

There's already the data-caption attribute

image

@gselderslaghs
Copy link
Member

Enhancements towards accessibility have been implemented in v2.2.1
Regarding the close button, it's something more custom to implement, you'd have to add a wrapper and add materialbox class to the wrapper instead of the image, next add a close button dynamically in the onOpenStart callback function, adding functionality that calls the materialbox close method, then remove the close button within onCloseStart custom callback
Hope this clarifies your issue, propose to close this for now

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

No branches or pull requests

4 participants