search

indiana-university / rivet-source

Indiana University’s design system for web application development
https://rivet.iu.edu
BSD 3-Clause "New" or "Revised" License
54 stars 5 forks source link

Broken data-rvt-dialog-disable-page-interaction attribute #714

Closed LittleWhiteLoti closed 11 months ago

LittleWhiteLoti commented 11 months ago

Describe the bug

The data-rvt-dialog-disable-page-interaction attribute doesn't appear to work.

Expected behavior

I shouldn't be able to interact with the page when the modal is open as described in the documentation

Relevant context (required)

HTML image

Image image

This happens in Firefox and Chrome so there is a good change is also happens in all other browser.

Steps to reproduce

Add steps to reproduce the bug.

  1. Create a modal dialog with the data-rvt-dialog-disable-page-interaction
  2. Open the modal.
  3. Click on the open modal again and it should close it.
levimcg commented 11 months ago

The disable page functionality is does not control the opening or closing of the dialog. It adds the inert and aria-hidden attributes to any siblings of the dialog element in the DOM. The inert attribute makes it so that the content underneath/behind the dialog is not reachable by keyboard navigation (using the Tab/Shift + Tab key), or assistive technology like screen readers. We also add the aria-hidden attribute as a fallback for browsers/screen reader combos that might not yet support the inert attribute.

In the steps you describe to reproduce the bug:

  1. Click on the open modal again and it should close it.

Clicking on the dialog to close it is not related to the data-rvt-dialog-disable-page-interaction. As described in the documentation this attribute only disables interaction while the dialog is open (highlighted in screenshot)

dialog javascript attribute documentation described previously

If you have an actual use case or implementation that you could provide a link for and describe what you are trying to accomplish, that would be helpful. We can take a look at it and confirm whether the data-rvt-dialog-disable-page-interaction functionality is working as designed in your implementation. We have confirmed that the examples on the documentation site are working as expected.

LittleWhiteLoti commented 11 months ago

I think I misunderstood the documentation than. I thought it disabled all page interaction including the dialog open button. Your first sentence explains what is actually going on.

LittleWhiteLoti commented 11 months ago

Thanks for the clarification.