Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
@firestar300
firestar300 committed Jan 3, 2024
2 parents ff57e07 + fe648fe commit 46cbfb7
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 87 deletions.
6 changes: 1 addition & 5 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"es6": true
},
"parserOptions": {
"ecmaVersion": 6,
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
Expand All @@ -28,9 +28,5 @@
"semi": false
}
]
},
"globals": {
"jQuery": true,
"wp": true
}
}
28 changes: 17 additions & 11 deletions examples/accessible-modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window.

* [See accessible specificies](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html)
* [Demo](https://codepen.io/beapi/full/mdwOVBm)
* [Demo — Default](https://codepen.io/beapi/full/mdwOVBm)
* [Demo — Close on focus outside](https://codepen.io/beapi/full/oNVbxOy)
* [Demo — Only for < 1024px devices](https://codepen.io/beapi/full/oNVbxVy)
* [Demo — Animated](https://codepen.io/beapi/full/oNVbxVy)

## Getting started

Expand Down Expand Up @@ -32,7 +35,7 @@ Copy the following markup on your HTML file :
```html
<button type="button" aria-controls="dialog-1">Open modal dialog</button>

<div id="dialog-1" class="modal" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
<div id="dialog-1" class="modal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
<div class="modal__inner">
<!-- Your content here -->

Expand Down Expand Up @@ -103,12 +106,15 @@ Modal.initFromPreset();
### Options

| name | type | default | description |
|---------------------|-----------------|-----------------|-----------------------------------------------------------------------------|
| closeButtonSelector | boolean\|string | `.modal__close` | The selector of the modal close button. |
| descriptionSelector | boolean\|string | `false` | The selector of the modal label (for the attribute ` aria-describedby ` ). |
| labelSelector | boolean\|string | `false` | The selector of the modal label (for the attribute ` aria-labelledby ` ). |
| mediaQuery | object | `null` | Apply modal to a window match. |
| onOpen | function | `null` | Callback when modal is opened. |
| onClose | function | `null` | Callback when modal is closed. |
| triggerSelector | boolean\|string | `false` | The selector of the modal trigger button. |
| name | type | default | description |
|---------------------|-----------------|------------------|-----------------------------------------------------------------------------|
| closeButtonSelector | boolean\|string | `.modal__close` | The selector of the modal close button. |
| closedClassName | string | `modal--hidden` | The class name when the modal is hidden. |
| closeOnFocusOutside | boolean\|string | `false` | Specify the selector in which the modal should close on click. If false, the modal does not close on outside click. If true, the modal closes on outside click of the element. |
| descriptionSelector | boolean\|string | `false` | The selector of the modal label (for the attribute ` aria-describedby ` ). |
| labelSelector | boolean\|string | `false` | The selector of the modal label (for the attribute ` aria-labelledby ` ). |
| mediaQuery | object | `null` | Apply modal to a window match. |
| openedClassName | string | `modal--visible` | The class name when the modal is visible. |
| onOpen | function | `null` | Callback when modal is opened. |
| onClose | function | `null` | Callback when modal is closed. |
| triggerSelector | boolean\|string | `false` | The selector of the modal trigger button. |
61 changes: 55 additions & 6 deletions examples/accessible-modal/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3>Default</h3>
<button class="modal-btn" type="button" aria-controls="demo-1">Add delivery address</button>
<button class="modal-btn modal-btn--demo-1" type="button">Another button for delivery address</button>

<div id="demo-1" class="modal" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
<div id="demo-1" class="modal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
<div class="modal__inner">
<h2 class="modal__title">Add delivery address</h2>

Expand Down Expand Up @@ -66,11 +66,60 @@ <h2 class="modal__title">Add delivery address</h2>
</div>
</div>

<h3>Close modal on outside click</h3>

<button class="modal-btn modal-btn--demo-2" type="button" aria-controls="demo-2">Add billing address</button>

<div id="demo-2" class="modal modal--demo-2" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
<div class="modal__inner">
<h2 class="modal__title">Add billing address</h2>

<div>
<div class="mb-4">
<label for="street">
<span>Street:</span>
<input id="street" type="text">
</label>
</div>
<div class="mb-4">
<label for="city">
<span>City:</span>
<input id="city" type="text">
</label>
</div>
<div class="mb-4">
<label for="state">
<span>State:</span>
<input id="state" type="text">
</label>
</div>
<div class="mb-4">
<label for="zip">
<span>Zip:</span>
<input id="zip" type="text">
</label>
</div>

<div>
<label for="special_instructions">
<span>Special instructions:</span>
</label>
<input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="mb-2">
<div id="special_instructions_desc">For example, gate code or other information to help the driver find you</div>
</div>
</div>

<button id="demo-2-close" type="button" class="modal__close">
<span class="sr-only">Close</span>
</button>
</div>
</div>

<h3>Modal button but only for &lt; 1024px devices</h3>

<button class="modal-btn--demo-2" type="button">Add billing address</button>
<button class="modal-btn--demo-3" type="button">Add billing address</button>

<div class="modal modal--mobile modal--demo-2" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
<div class="modal modal--mobile modal--demo-3" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
<div class="modal__inner">
<h2 class="modal__title">Add billing address</h2>

Expand Down Expand Up @@ -140,13 +189,13 @@ <h2>Code</h2>
labelSelector: '.modal__title',
closeButtonSelector: '.modal__close',
mediaQuery: window.matchMedia('(max-width: 1024px)'),
triggerSelector: '.modal-btn--demo-2'
triggerSelector: '.modal-btn--demo-3'
},
'#demo-2': {
labelSelector: '.modal__title',
closeButtonSelector: '.modal__close',
mediaQuery: window.matchMedia('(max-width: 1024px)'),
}
closeOnFocusOutside: '.modal__inner',
},
}

Modal.initFromPreset()
Expand Down
4 changes: 4 additions & 0 deletions examples/accessible-modal/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
background-color: var(--modal-bg-color);
}

.modal[aria-hidden="true"] {
display: none;
}

.modal__inner {
position: absolute;
top: 50%;
Expand Down
2 changes: 1 addition & 1 deletion playwright.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ const config: PlaywrightTestConfig = {
},
}

module.exports = config
export default config
Loading

0 comments on commit 46cbfb7

Please sign in to comment.