Components: Modal, add story

[ItsJonQ]

Components: Modal, Add story

This update adds a story for the Modal component.
The story showcases an updated and enhanced example from the Modal
README. It also includes a series of knobs to better demonstrate the
Modal props.

[ItsJonQ]

@gziolo Updates pushed! I also updated the README.md for Modal to use useState instead of the previous pre-hook example.

[gziolo]

As noted in my comment, this modal opens by default:

I see one accessibility-related issue. It might be a bug in the current implementation. We should double-check and file an issue if my guess is true.

In general, this work is great. My comments are nits 😍

[ItsJonQ]

@gziolo Refactored the Modal story so that it doesn't open by default. It looks like that resolves the a11y issue as well 💪

[gziolo]

@gziolo Refactored the Modal story so that it doesn't open by default. It looks like that resolves the a11y issue as well 💪

It only hides them as far as I can tell :) The issue exists. I updated axe-core together with puppeteer upgrade and it reports issues with modal in many places. See:
#18205 (comment)

Travis jobs which reports it: https://travis-ci.com/WordPress/gutenberg/jobs/251398499#L1095.

FAIL packages/e2e-tests/specs/editor/various/a11y.test.js (7.621s)
  ● a11y › constrains focus to a modal when tabbing
    expect(received).toPassAxeTests(expected)
    Expected page to pass Axe accessibility tests.
    Violations found:
    Rule: "aria-hidden-focus" (ARIA hidden element must not contain focusable elements)
    Help: https://dequeuniversity.com/rules/axe/3.4/aria-hidden-focus?application=axe-puppeteer
    Affected Nodes:
      #wpwrap
        Fix ALL of the following:
          - Focusable content should be disabled or be removed from the DOM.
          - Focusable content should have tabindex='-1' or be removed from the DOM.
      178 | 	}
      179 | 
    > 180 | 	await expect( page ).toPassAxeTests( {
          | 	                     ^
      181 | 		// Temporary disabled rules to enable initial integration.
      182 | 		// See: https://github.com/WordPress/gutenberg/pull/15018.
      183 | 		disabledRules: [
      at toPassAxeTests (config/setup-test-framework.js:180:23)
          at runMicrotasks (<anonymous>)
      at Object.<anonymous> (config/setup-test-framework.js:218:2)

Anyway, it's not an issue with this PR.

It's also filed in #11631.