Visitar URL original
USWDS - Modal: Create modal component by jaredcunha · Pull Request #3981 · uswds/uswds · GitHub
Skip to content

USWDS - Modal: Create modal component - #3981

Merged
thisisdano merged 95 commits into
uswds-2.11.0from
accelerator-3936/modal
Mar 11, 2021
Merged

thisisdano merged 95 commits into
uswds-2.11.0from
accelerator-3936/modal

Conversation

@jaredcunha

@jaredcunha jaredcunha commented Feb 8, 2021 •

Copy link
Copy Markdown
Contributor

Description

This will add an accessible modal window to the design system
Issue: #3936

Screenshots

Default size
Screen Shot 2021-02-11 at 10 32 08 AM

Large size
Screen Shot 2021-02-11 at 11 05 10 AM

Additional features

  • Adds utility to capture scrollbar width
    • This utility is added to navigation.js to fix content shifting when mobile navigation is opened.
  • Adds feature to focus-trap.js to trap focus if focus is set to a window, instead of content within the window

Accessibility features:

  • Focus set to modal window when opened
  • Focus returned to opening element (includes support for multiple openers)
  • Traps focus to open modal
  • Hides all other content when modal is open
  • Reads title of modal when opened
  • Press escape key to close, unless disabled with force-action data attribute

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

Other to-do's:

  • Write unit tests
  • Build size variants
  • Incorporate theme settings
  • Remove test modal from the documentation page (test for collisions with focus trapping on mobile nav)

Testing conducted:

  • IE11
  • Safari
  • Mobile Safari
  • Chrome
  • Chrome for iOS
  • VoiceOver
  • VoiceOver on iOS
  • Edge
  • Firefox
  • NVDA

Comment thread src/stylesheets/components/_modal.scss Outdated
padding: units(1) units(4) units(4);
}

.usa-modal__header {

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.

Is the intention that usa-modal__heading live inside here or is this separate?

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.

The way we usually use this is that a header is a section and a heading is an h-level element. We currently have a heading, but it looks like the header is not yet implemented. I'm going to remove this code

Comment thread src/components/test/kitchen-sink.njk Outdated

{% block body %}

{% render '@modal' %}

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.

Let's remove this once we finalize this component.

@thisisdano thisisdano Mar 11, 2021 •

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.

I didn't remove it, rather just moved it to a more conventional location. It'll be useful to keep it there I think.

@thisisdano
thisisdano self-requested a review March 10, 2021 22:32
@thisisdano
thisisdano requested a review from mejiaj March 11, 2021 04:34
@thisisdano
thisisdano changed the base branch from develop to uswds-2.11.0 March 11, 2021 04:35
@thisisdano
thisisdano merged commit f5166d0 into uswds-2.11.0 Mar 11, 2021
@thisisdano
thisisdano deleted the accelerator-3936/modal branch March 11, 2021 04:36
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.

Add modal component

5 participants