mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-26 08:11:17 +02:00
Code Issues Releases Wiki Activity

some a11y improvements. stop saved item pane for tabbing when hidden

Browse Source
This commit is contained in:
Kushagra Gour
2019-03-14 00:44:13 +05:30
parent 5ef727d835
commit 9a2fdfe552
3 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Modal.jsx
View File

@@ -63,6 +63,7 @@ export default class Modal extends Component {
return ( return (
<Portal into="body"> <Portal into="body">
<div <div
role="dialog"
class={`${this.props.extraClasses || ''} modal is-modal-visible ${ class={`${this.props.extraClasses || ''} modal is-modal-visible ${
this.props.small ? 'modal--small' : '' this.props.small ? 'modal--small' : ''
}`} }`}

3
src/components/SavedItemPane.jsx
View File

@@ -150,11 +150,14 @@ export default class SavedItemPane extends Component {
id="js-saved-items-pane" id="js-saved-items-pane"
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`} class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
onKeyDown={this.keyDownHandler.bind(this)} onKeyDown={this.keyDownHandler.bind(this)}
aria-hidden={isOpen}
tabIndex={`${isOpen ? 0 : -1}`}
> >
<button <button
onClick={this.onCloseIntent.bind(this)} onClick={this.onCloseIntent.bind(this)}
class="btn saved-items-pane__close-btn" class="btn saved-items-pane__close-btn"
id="js-saved-items-pane-close-btn" id="js-saved-items-pane-close-btn"
aria-label="Close saved creations pane"
> >
X X
</button> </button>

2
src/style.css
View File

@@ -1043,6 +1043,7 @@ body > #demo-frame {
width: 450px; width: 450px;
padding: 20px 30px; padding: 20px 30px;
z-index: 6; z-index: 6;
visibility: hidden; /* prevents tabbing */
background-color: var(--color-popup); background-color: var(--color-popup);
transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87); transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87);
transition-property: transform; transition-property: transform;
@@ -1051,6 +1052,7 @@ body > #demo-frame {
} }
.saved-items-pane.is-open { .saved-items-pane.is-open {
visibility: visible;
transition-duration: 0.4s; transition-duration: 0.4s;
transform: translateX(0); transform: translateX(0);
} }