fix(Modal): remove aria-hidden from siblings when unmounting the component
#9096
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The component adds the aria-hidden attribute to its siblings when open and removes it when closed. However, if the component is mounted as open but then directly unmounted, its siblings will remain hidden from the accessibility API forever. Thus, the logic for removing these attributes is now also triggered when the component is unmounted.
dgdavid
force-pushed
the
modal-aria-hidden-improvements
branch
from
012dfef to
cc08a57
Compare
Contributor
|
Preview: https://patternfly-react-pr-9096.surge.sh A11y report: https://patternfly-react-pr-9096-a11y.surge.sh |
dgdavid
force-pushed
the
modal-aria-hidden-improvements
branch
from
daf880f to
4a86c93
Compare
dgdavid
added a commit
to agama-project/agama
that referenced
this pull request
May 10, 2023
While unmounting the Sidebar is unlikely to happen, it's better to make the component a good citizen by "restoring" its siblings by removing the `inert` and `aria-hidden` attributes. That way, we're minimizing the risk of users being trapped in an issue similar to the one described at patternfly/patternfly-react#9096 Please note that at the time of writing it's not a real restore because the component isn't tracking the status of these attributes BEFORE adding them. However, removing the supposedly added attributes seems enough for now.
This was referenced May 10, 2023
Contributor
|
Hi @dgdavid. Thank you for the contribution. Our repo is code frozen right now and we are working towards a major release of PF. We can take a look at this issue and work on getting your PR in once we open repos again. Q3 is the earliest this would get released. |
dgdavid
added a commit
to agama-project/agama
that referenced
this pull request
May 17, 2023
When a PF4/Modal is unmounted instead of set as `isOpen={false}`, its
siblings remain as `aria-hidden`. To know more read
patternfly/patternfly-react#9096
dgdavid
added a commit
to agama-project/agama
that referenced
this pull request
May 17, 2023
When a PF4/Modal is unmounted instead of set as `isOpen={false}`, its
siblings remain as `aria-hidden`. To know more read
patternfly/patternfly-react#9096
dgdavid
added a commit
to agama-project/agama
that referenced
this pull request
May 17, 2023
When a PF4/Modal is unmounted instead of set as `isOpen={false}`, its
siblings remain as `aria-hidden`. To know more read
patternfly/patternfly-react#9096
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
Contributor
Author
|
Just for the record, this change was already merged in v5 (current |
dgdavid
added a commit
to agama-project/agama
that referenced
this pull request
Oct 19, 2023
It's no longer needed in PatternFly React >= 5.1.1 which merged the patch sent. Read more: * patternfly/patternfly-react#9110 * patternfly/patternfly-react#9096 * https://github.com/patternfly/patternfly-react/releases/tag/v5.1.1
dgdavid
added a commit
to agama-project/agama
that referenced
this pull request
Oct 19, 2023
It's no longer needed in PatternFly React >= 5.1.1 which merged the patch sent. Read more: * patternfly/patternfly-react#9110 * patternfly/patternfly-react#9096 * https://github.com/patternfly/patternfly-react/releases/tag/v5.1.1
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
At Agama project, we've found an issue with the
aria-hiddenattributes added by the PatternFly Modal component: some dialogs do not remove them.As far as I can see, this happens to us with open dialogs that are included dynamically. I.e., dialogs that are mounted as open and then simply unmounted instead of closed.
Of course, we should re-evaluate such a use case and stop doing so if we do not have strong reasons for it. However, it looks straight forward and safe to trigger the logic for removing these attributes when the component is unmounted too. I cannot envision a scenario where this would not be convenient
Additional issues
Prior to digging into the problem, I quickly searched the issue list and found #8925. Based on a quick glance at the linked source code, the problem appears to be the same: the MemberModal is unmounted, not closed, so the aria-hidden attributes remain.
Other notes
Just in case it can be useful for someone else doing a first contribution to patternfly/patternfly-react:
Getting the project working locally was a bit challenging to me because neither GETTING-STARTED.md nor the CONTRIBUTING.md helped me to understand the errors related to missing modules/dependencies I got at the beginning when trying either, to build the project and to run the test suite. The Getting Started as a Contributor guide looks outdated too.
Fortunately, I could get some hints about how to move forward from the Maintainer's Guide and the dist CI partial. Summarizing:
npm installyarn installinstead (you might need to installyarnfirst)yarn build && yarn build:umdyarn testFurthermore, I learned how to run a single test in a project using yarn workspaces. In my case, I have used below command from the root of the project
and also I run the linter with