CCM NG: PageModelEditor

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5614 8810af33-2d31-482b-a856-94f89814c4df

ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx

@@ -978,11 +978,12 @@ abstract class AbstractComponentModelEditor<
             <dialog aria-labelledby={this.props.component.key
                         + "_editDialogHeading"}
                     className={this.state.dialogExpanded}
-                    onKeyDown={(event) => this.closeOnEsc}
-                    open={this.state.dialogOpened}>
+                    onKeyPress={(event) => this.closeOnEsc(event)}
+                    open={this.state.dialogOpened}
+                    tabIndex={0}>
                 <button className="closeButton"
-                        onClick={(event) => this.toggleEditorDialog}>
-                    <span className="accessibility hidden">Close</span>
+                        onClick={(event) => this.closeOnButton(event)}>
+                    <span className="screenreader">Close</span>
                     <span className="fa fa-times-circle"></span>
                 </button>
                 <h1 id={this.props.component.key + "_editDialogHeading"}>
@@ -1013,7 +1014,9 @@ abstract class AbstractComponentModelEditor<
 
     private closeOnEsc(event: React.KeyboardEvent<HTMLElement>): void {
 
-        if (event.keyCode === 27) {
+        console.log(`Key press detected: ${event.key}`);
+
+        if (event.key === "27") {
             this.toggleEditorDialog();
         }
     }

ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css

@@ -108,6 +108,14 @@
 }
 /* Schriften Ende */
 
+.screenreader {
+    position: absolute;
+    top: -99em;
+    left: -99em;
+    width: 1px;
+    height: 1px;
+}
+
 /* Colors */
 h1, h2, h3 {
     margin: 0;
@@ -2091,7 +2099,7 @@ li.componentModelEditor dialog.dialogExpanded {
 
 li.componentModelEditor dialog.dialogExpanded button.closeButton {
 
-    background-color: none;
+    background-color: transparent;
 
     border: none;