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

PROD-1266 Removes overflow styling for embedded modal in Fides.js #4345

Merged
merged 3 commits into from
Oct 26, 2023

Conversation

eastandwestwind
Copy link
Contributor

@eastandwestwind eastandwestwind commented Oct 26, 2023

Closes https://ethyca.atlassian.net/browse/PROD-1266

Description Of Changes

Removes overflow styling for embedded modal in Fides.js

Code Changes

  • Adds conditional to A11y dialog overflow styling

Steps to Confirm

Screenshot 2023-10-26 at 12 25 51 PM

Pre-Merge Checklist

@cypress
Copy link

cypress bot commented Oct 26, 2023

Passing run #4850 ↗︎

0 4 0 0 Flakiness 0
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.

Details:

Merge 12106a6 into c148f54...
Project: fides Commit: dc598619fb ℹ️
Status: Passed Duration: 01:22 💡
Started: Oct 26, 2023 10:52 AM Ended: Oct 26, 2023 10:54 AM

Review all test suite changes for PR #4345 ↗︎

Copy link
Contributor

@NevilleS NevilleS left a comment

Choose a reason for hiding this comment

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

This is a good first step - I'd like to release this as-is but follow-up in a second issue.

@@ -6,21 +6,26 @@
import A11yDialogLib from "a11y-dialog";
import { useCallback, useEffect, useState } from "preact/hooks";

const useA11yDialogInstance = () => {
const useA11yDialogInstance = (addOverlowStyling: Boolean) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm OK with this as a test fix; but it's really narrow and still leaves behind an a11y-dialog instance when we aren't actually showing a dialog.

Can you create a new PROD bug and assign to current sprint like "Fix a11y issues with embedded modal" to follow up further here? Because right now it has some issues:

  • appears to automatically grab focus on open, which can force a jarring page scroll
  • labeled as role="alertdialog" and aria-modal="true" which will likely confuse a screen reader / etc.
  • basically just feels wrong 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@eastandwestwind eastandwestwind merged commit ad44822 into main Oct 26, 2023
9 of 11 checks passed
@eastandwestwind eastandwestwind deleted the PROD-1266 branch October 26, 2023 11:21
NevilleS added a commit that referenced this pull request Oct 29, 2023
@NevilleS NevilleS mentioned this pull request Oct 29, 2023
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants