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

Support click handler on <b-overlay /> shade. #5243

Closed
viglucci opened this issue Apr 23, 2020 · 5 comments · May be fixed by leonyork/cognito-oauth2-demo#1
Closed

Support click handler on <b-overlay /> shade. #5243

viglucci opened this issue Apr 23, 2020 · 5 comments · May be fixed by leonyork/cognito-oauth2-demo#1

Comments

@viglucci
Copy link

@viglucci viglucci commented Apr 23, 2020

Is your feature request related to a problem? Please describe...

I am looking for a way to be able to trigger a callback when a <b-overlay /> is clicked. This is useful when using the overlay to cover the entire screen to have the user focus on a specific piece of content.

Describe the solution you'd like

I would like to be able to add a click handler to the overlay using @click="...".

<b-overlay
    @click="closeOverlay"
>
    ...
</b-overlay>

Describe alternatives you've considered

I've considered adding a close button to the content shown in the overlay, however it is a common UX pattern to allow a user to close an overlay by clicking on the shaded portion.

Additional context

I'm new to Vue so adding such a click handler may already be supported without changes to the library. Please let me know if this is possible, thanks :).

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 23, 2020

You can do the following (this assumes you are wrapping content):

<template>
  <b-overlay :show="showOverlay" @click.native="onOverlayClick">
    <b-card>
      Some content
      <b-button @click="showOverlay = true">
    </b-card>
  </b-overlay>
</template>

<script>
export default {
  data() {
    return {
      showOverlay: false
    }
  },
  methods: {
    onOverlayClick(evt) {
      // Only respond to the click when the overlay is open
      // as b-overlay is wrapping the inner card
      if (this.showOverlay) {
        this.showOverlay = false
      }
    }
  }
}
</script>

If obscuring say the entire screen, the template would be something like this

<template>
  <div>
    <b-card>
      <p>Some content</p>
      <b-button @click="showOverlay = true">
    </b-card>
    <b-overlay :show="showOverlay" no-wrap fixed @click.native="showOverlay = false">
    </b-overlay>
  </div>
</template>

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 24, 2020

One side note is that even though the overlay is clickable, it is not accessible as a clickable element to screen reader or keyboard-only users.

So it would be highly recommended to also place a close button inside the overlay slot so that users of assistive technologies can close the overlay.

@viglucci
Copy link
Author

@viglucci viglucci commented Apr 24, 2020

That worked great, thanks! In regards to accessibility I've included a close button as well as leveraged https://github.com/posva/focus-trap-vue to allow for easier keyboard navigation.

End result:

image

@viglucci
Copy link
Author

@viglucci viglucci commented Apr 24, 2020

I'm happy with this implementation, however I'll leave it up to the maintainers/contributors of this project to determine if they want to keep this issue open and support click on the component itself. AKA, feel free to close this issue if you also feel this workaround is sufficient for this use-case.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 24, 2020

Overlays were't intended to be modals (originally), and in non-fixed mode the focus constraint wouldn't make sense, but the overlay click event (probably named overlay-click) might be something we can add it easily (with some caveats in the documentation about A11Y and constrained focus)

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

Successfully merging a pull request may close this issue.

2 participants