fix: accessibility issue modal #2076

shrilakshmishastry · 2024-04-14T07:54:25Z

Description

Accessibility issue in Modal

Ally pattern of modal:
Modal is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog is inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

Contribution Checklist:

The pull request only addresses one issue or adds one feature.
[] The pull request does not introduce any breaking changes
I have added screenshots or gifs to help explain the change if applicable.
I have read the contribution guidelines.
Create an issue and link to the pull request.

PushpenderSaini0 · 2024-04-14T12:43:03Z

Can you remove the package-lock.json changes from this PR !

Its-treason · 2024-04-14T12:47:34Z

packages/bruno-app/src/components/Modal/index.js

@@ -97,6 +97,11 @@ const Modal = ({
 if (hideFooter) {
 classes += ' modal-footer-none';
 }
+
+ useEffect(() => {
+ document.getElementsByTagName('dialog')[0].showModal();


I think useRef should be used here instead of accessing the DOM directly.

PushpenderSaini0 · 2024-04-14T12:48:36Z

packages/bruno-app/src/components/Modal/index.js

@@ -97,6 +97,11 @@ const Modal = ({
 if (hideFooter) {
 classes += ' modal-footer-none';
 }
+
+ useEffect(() => {
+ document.getElementsByTagName('dialog')[0].showModal();


Avoid document.getElementsByTagName it's generally not a good practice to access dom directly in react.

done here d467d83

shrilakshmishastry · 2024-04-14T14:58:26Z

Can you remove the package-lock.json changes from this PR !

I tried here but it didn't get updated 😬

…Modal

PushpenderSaini0 · 2024-04-14T15:21:01Z

Can you remove the package-lock.json changes from this PR !

I tried here but it didn't get updated 😬

The file is changed in 2 commits this one will be a bit tricky !

1 ) Checkout the file from the main branch
2) Commit the file (this version is from main branch)
3) (Optional) Squash the changes to make the history clean !

git checkout main -- package-lock.json
git commit -a -m "revert package-lock.json"
git rebase -i HEAD~4

ad1992

Hi @shrilakshmishastry as far as understand the issue (from description and screen recordings) is that focus is going out of the active modal/dialog when navigating through the keyboard and hence you are trying to make sure that the focus stays in active dialog. Please let me know if my understanding is correct.

However the solution of triggering showModal when mounted isn't clear to me and how is it fixing this issue ?
We should instead have a keydown handler for modal component which makes sure that on keyboard navigation the focus always keeps looping (in order) inside the active dialog unless esc is pressed ?
A small suggestion regarding the screen recording - you can directly upload the .mov files so reviewers don't have to download the files to view the screen-recordings :)

For reference - I came across this PR in https://twitter.com/shrilakshmihg/status/1779420061721035153

shrilakshmishastry · 2024-04-15T06:34:50Z

Hi @shrilakshmishastry as far as understand the issue (from description and screen recordings) is that focus is going out of the active modal/dialog when navigating through the keyboard and hence you are trying to make sure that the focus stays in active dialog. Please let me know if my understanding is correct.

However the solution of triggering showModal when mounted isn't clear to me and how is it fixing this issue ? We should instead have a keydown handler for modal component which makes sure that on keyboard navigation the focus always keeps looping (in order) inside the active dialog unless esc is pressed ? A small suggestion regarding the screen recording - you can directly upload the .mov files so reviewers don't have to download the files to view the screen-recordings :)

For reference - I came across this PR in https://twitter.com/shrilakshmihg/status/1779420061721035153

Hey @ad1992 thanks for the suggestion!!

yes, the focus is going out of the modal, hence the fix.

calling showModal in useEffect is to set dialog open. It's a way around not using JS to handle focus the one you mentioned throw key-down event.

The intention of using the dialog tag is its ability to handle focus traps in an HTML declarative way not by JS.

you can read more about it here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

The doc says you need to call showModal method in the caller component. Since we are handling showing Modal via js (mounting it to DOM) on button click there is no straight way we can access dialog. Hence calling showModal in useEffect so dialog provides the expected behavior when it's in open state and act as Modal.

ad1992

suggested a minor change otherwise looks good @shrilakshmishastry

I am not sure if there is a way to test the changes directly in the browser so I haven't tested it however the code looks good!

Additionally, I think you probably might be targeting the rest of the clean-up in separate PR (eg closing the modal via dialog close and removing ESC handler etc)

ad1992 · 2024-04-15T10:13:30Z

packages/bruno-app/src/components/Modal/index.js

 import React, { useEffect, useState } from 'react';
 import StyledWrapper from './StyledWrapper';
+import { useRef } from 'react';


Suggested change

import React, { useEffect, useState } from 'react';

import StyledWrapper from './StyledWrapper';

import { useRef } from 'react';

import React, { useEffect, useState, useRef } from 'react';

import StyledWrapper from './StyledWrapper';

Since there are react imports already so better to club with it

shrilakshmishastry · 2024-04-16T05:34:47Z

suggested a minor change otherwise looks good @shrilakshmishastry

I am not sure if there is a way to test the changes directly in the browser so I haven't tested it however the code looks good!

Additionally, I think you probably might be targeting the rest of the clean-up in separate PR (eg closing the modal via dialog close and removing ESC handler etc)

closing modal is taken care in closeModal() method and esc handling is already present in the existing code

ad1992 · 2024-04-16T05:48:58Z

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

@shrilakshmishastry as per the docs, I think you can remove the ESC handling as it shouldn't be needed anymore and taken care of by the dialog itself.

shrilakshmishastry · 2024-04-16T11:11:04Z

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

@shrilakshmishastry as per the docs, I think you can remove the ESC handling as it shouldn't be needed anymore and taken care of by the dialog itself.

We need it, as there are cases where we needn't close the modal on the click of esc key. There is one prop the modal accepts and based on that action on the esc key-down is taken care

https://github.com/usebruno/bruno/blob/d490b1b5fc2cea0d8c0aa60d4ab07210f4d647cc/packages/bruno-app/src/components/Modal/index.js#L67C2-L67C20

Its-treason · 2024-04-16T19:57:20Z

packages/bruno-app/src/components/Modal/StyledWrapper.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';

-const Wrapper = styled.div`
+const Wrapper = styled.dialog`
 color: ${(props) => props.theme.text};


Could you also add:

max-height: unset; max-width: unset;

To remove the weird gap around the backdrop?

could you please elaborate more

Dialogs now have a "weird" gap between the window border and the backdrop:

This is because the dialog Element has some weird default CSS. From the chrome source:

dialog:-internal-dialog-in-top-layer { /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */ position: fixed; overflow: auto; inset-block-start: 0; inset-block-end: 0; max-width: calc(100% - 6px - 2em); max-height: calc(100% - 6px - 2em); /* https://github.com/w3c/csswg-drafts/issues/6939#issuecomment-1016679588 */ user-select: text; visibility: visible; }

Unsetting the default max-width and max-height will remove the gap.

Suggested change

color: ${(props) => props.theme.text};

color: ${(props) => props.theme.text};

max-height: unset;

max-width: unset;

thanks !!

fixed it now

@Its-treason can you check now

…og tag

Its-treason

I found that the "toasts" are now in the background, behind the dialog/backdrop instead of the foreground. This is probably due to how the dialog element works: https://stackoverflow.com/a/41816764

shrilakshmishastry · 2024-04-27T02:05:12Z

I found that the "toasts" are now in the background, behind the dialog/backdrop instead of the foreground. This is probably due to how the dialog element works: https://stackoverflow.com/a/41816764

Seems intersting, I will look into this. Thanks

shrilakshmishastry · 2024-04-27T02:56:13Z

I found that the "toasts" are now in the background, behind the dialog/backdrop instead of the foreground. This is probably due to how the dialog element works: https://stackoverflow.com/a/41816764

Seems intersting, I will look into this. Thanks

The toast needs to be attached to or decendent of top layer element when triggered from them. I have rised the issue in react-hot-toast. Not sure whether it should be fixed from them or here. I will look into this furthur
timolins/react-hot-toast#355

helloanoop · 2024-09-03T14:57:26Z

@anusreesubash Please review this?

shrilakshmishastry added 2 commits April 14, 2024 13:06

fix: accessibility issue modal

8fedd3d

chore: revert back package-lock.json changes

defbd9b

Its-treason suggested changes Apr 14, 2024

View reviewed changes

PushpenderSaini0 reviewed Apr 14, 2024

View reviewed changes

refactor: use ref instead directly accessing dialog via DOM api's in …

d467d83

…Modal

shrilakshmishastry force-pushed the fix/accessibility-issue-in-modal branch from e951e78 to d467d83 Compare April 14, 2024 14:59

shrilakshmishastry requested review from PushpenderSaini0 and Its-treason April 14, 2024 15:00

revert package-lock.json

710fb2a

PushpenderSaini0 approved these changes Apr 14, 2024

View reviewed changes

ad1992 reviewed Apr 15, 2024

View reviewed changes

shrilakshmishastry requested a review from ad1992 April 15, 2024 06:35

ad1992 approved these changes Apr 15, 2024

View reviewed changes

feat: call close method in closeModal()

d490b1b

Its-treason reviewed Apr 16, 2024

View reviewed changes

fix: modal width and height issue due to width and height set by dial…

7d9cd14

…og tag

Its-treason approved these changes Apr 18, 2024

View reviewed changes

Its-treason suggested changes Apr 25, 2024

View reviewed changes

Pragadesh-45 mentioned this pull request Sep 18, 2024

feature/useFocusTrap: Support focusable tab cycles in Modal (Update of PR #3075) #3133

Merged

4 tasks

helloanoop closed this in #3133 Sep 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: accessibility issue modal #2076

fix: accessibility issue modal #2076

shrilakshmishastry commented Apr 14, 2024 •

edited

Loading

PushpenderSaini0 commented Apr 14, 2024

Its-treason Apr 14, 2024

shrilakshmishastry Apr 14, 2024

PushpenderSaini0 Apr 14, 2024

shrilakshmishastry Apr 14, 2024

shrilakshmishastry Apr 14, 2024

shrilakshmishastry commented Apr 14, 2024

PushpenderSaini0 commented Apr 14, 2024

ad1992 left a comment

shrilakshmishastry commented Apr 15, 2024

ad1992 left a comment

ad1992 Apr 15, 2024

shrilakshmishastry commented Apr 16, 2024

ad1992 commented Apr 16, 2024

shrilakshmishastry commented Apr 16, 2024

Its-treason Apr 16, 2024

shrilakshmishastry Apr 17, 2024

Its-treason Apr 17, 2024

shrilakshmishastry Apr 18, 2024

shrilakshmishastry Apr 18, 2024

Its-treason left a comment

shrilakshmishastry commented Apr 27, 2024

shrilakshmishastry commented Apr 27, 2024

helloanoop commented Sep 3, 2024

fix: accessibility issue modal #2076

fix: accessibility issue modal #2076

Conversation

shrilakshmishastry commented Apr 14, 2024 • edited Loading

Description

Accessibility issue in Modal

Contribution Checklist:

PushpenderSaini0 commented Apr 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shrilakshmishastry commented Apr 14, 2024

PushpenderSaini0 commented Apr 14, 2024

ad1992 left a comment

Choose a reason for hiding this comment

shrilakshmishastry commented Apr 15, 2024

ad1992 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shrilakshmishastry commented Apr 16, 2024

ad1992 commented Apr 16, 2024

shrilakshmishastry commented Apr 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Its-treason left a comment

Choose a reason for hiding this comment

shrilakshmishastry commented Apr 27, 2024

shrilakshmishastry commented Apr 27, 2024

helloanoop commented Sep 3, 2024

shrilakshmishastry commented Apr 14, 2024 •

edited

Loading