Skip to content

Restrict tab focus to within modal dialogues when open (fixes #1070 and #1072)#1163

Merged
demiankatz merged 2 commits into
UniversalViewer:devfrom
thattonBL:dev
Oct 23, 2024
Merged

Restrict tab focus to within modal dialogues when open (fixes #1070 and #1072)#1163
demiankatz merged 2 commits into
UniversalViewer:devfrom
thattonBL:dev

Conversation

@thattonBL

@thattonBL thattonBL commented Oct 23, 2024

Copy link
Copy Markdown
Contributor

Restrict tab focus to within modal dialogues when open. fix issues #1070 and #1072

  • So the Dialogue.ts which is the Base for the majority of Dialogues now traps the focus when it is opened using a key listener on the TAB and TAB + SHIFT keys
  • The Dialogue anomaly is the DownloadDialogue.tsx within the uv-openseadragon extension which is a React component. I have implemented the same here and made some changes following a previous pull request so that we now dynamically get the first focusable element.

@attonbomb
Issues #1070 and #1072 Restrict tab focus to within modal dialogue el…
3ad9156 
…ements when model-dialogue is open

- Add key listener override on Dialogue.ts which is the base class for most Dialogues
- Added code to do the same thing for the React Dowload Dialogue
@attonbomb
Amendments to Issues #1070 and #1072 Restrict tab focus to within mod…
968ec8a 
…al dialogue elements when model-dialogue is open

- Changed the way in which the DownloadDialogue.tsx establishes the first element to give focus to on load
- Extracted the focusable elements logic to use for the above
- Removed added whitespace from Dialogue.ts
@vercel

vercel Bot commented Oct 23, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
universalviewer ✅ Ready (Inspect) Visit Preview Oct 23, 2024 9:09am

@demiankatz demiankatz mentioned this pull request Oct 23, 2024
Closed
@demiankatz demiankatz changed the title Dev Restrict tab focus to within modal dialogues when open (fixes #1070 and #1072) Oct 23, 2024
demiankatz
demiankatz approved these changes Oct 23, 2024
View reviewed changes

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @thattonBL, this more generic solution looks solid to me!

@jamesmisson jamesmisson self-requested a review October 23, 2024 13:16
jamesmisson
jamesmisson approved these changes Oct 23, 2024
View reviewed changes

@jamesmisson jamesmisson left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code and preview both look good to me.

@demiankatz

demiankatz commented Oct 23, 2024

Copy link
Copy Markdown
Contributor

Thanks, everyone! Merging now....

@demiankatz demiankatz merged commit b024fbf into UniversalViewer:dev Oct 23, 2024
@demiankatz demiankatz mentioned this pull request Oct 24, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@demiankatz demiankatz demiankatz approved these changes
@jamesmisson jamesmisson jamesmisson approved these changes

Assignees

No one assigned

Labels

None yet

Projects

Universal Viewer Community Board
Status: Community Sprint COMPLETED

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@thattonBL @demiankatz @jamesmisson @attonbomb