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.

Sign up for GitHub

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

fix(modal): Use React portals for accessibility fixes #419

Merged
merged 10 commits into from
Mar 17, 2020
Merged

fix(modal): Use React portals for accessibility fixes #419

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7ebf3f0
fix(modal): Hide background content from assistive technology
NicholasBoll Jan 23, 2020
6ec8881
test: Add more comprehensive background elements
NicholasBoll Jan 23, 2020
bafb042
Merge branch 'master' into fix/modal-accessibility-touch
NicholasBoll Feb 6, 2020
6e4f137
fix: Default to use portal always for modals
mannycarrera4 Mar 12, 2020
b31e7ff
Merge branch 'prerelease/v4' into fix/modal-accessibility-touch
mannycarrera4 Mar 12, 2020
033515c
test(modal): Update test to use getByRole
mannycarrera4 Mar 16, 2020
0b5ce67
fix(modal): Revert change to return statement
mannycarrera4 Mar 16, 2020
57b8d65
fix(modal): Add documentation for container prop
mannycarrera4 Mar 16, 2020
ff3144b
fix(modal): Update desc for container and add accessible story
mannycarrera4 Mar 17, 2020
10c16e2
fix(modal): Update where container gets passed
mannycarrera4 Mar 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 1 addition & 44 deletions modules/modal/react/stories/stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,50 +24,7 @@ const DefaultModalExample = () => {
<>
<DeleteButton buttonRef={buttonRef} onClick={openModal}>
Delete Item
</Button>
<p>
<a href="#">Link</a>
Copy link
Member Author

Choose a reason for hiding this comment

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

Ooo. Removed in a merge commit. Sneaky

</p>

<button type="button">Button</button>
<p tabIndex={0}>Focusable div</p>

<div>
<label htmlFor="text">Text input</label>
<input type="text" id="text" />
</div>

<div>
<label htmlFor="radio">Radio</label> <input type="radio" id="radio" />
</div>

<div>
<label htmlFor="check">Checkbox</label>
<input type="checkbox" />
</div>

<div>
<label htmlFor="textarea">Text area</label>
<textarea id="textarea"></textarea>
</div>

<div>
<label htmlFor="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">Please choose an option</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
</div>

<div>
<iframe title="iframe test" src="https://workday.com/" width="300" height="300"></iframe>
</div>

</DeleteButton>
<Modal data-testid="TestModal" heading="Delete Item" open={open} handleClose={closeModal}>
<p>Are you sure you'd like to delete the item titled 'My Item'?</p>
<DeleteButton style={{marginRight: '16px'}} onClick={closeModal}>
Expand Down
You are viewing a condensed version of this merge commit. You can view the full changes here.