feat ariatemplates#1528 Add the role attribute for the modal dialog a…

…nd the error tooltip CR 08528144
divdavem · Sep 10, 2015 · 99d24aa · 99d24aa
1 parent da838e1
commit 99d24aa
Show file tree

Hide file tree

Showing 15 changed files with 567 additions and 5 deletions.
diff --git a/src/aria/popups/Beans.js b/src/aria/popups/Beans.js
@@ -138,6 +138,14 @@ module.exports = Aria.beanDefinitions({
                 "popupContainer" : {
                     $type : "json:ObjectRef",
                     $description : "[Optional] Object implementing the IPopupContainer interface, which defines in which container the popup will be added. By default, the aria.popups.container.Viewport singleton is used and the popup is a direct child of document.body."
+                },
+                "role" : {
+                    $type : "json:String",
+                    $description : "The role attribute to add to the container, if wai is activated"
+                },
+                "waiAria" : {
+                    $type : "json:Boolean",
+                    $description : "If true, accessibility-related DOM attributes are enabled on this container, adding the role attribute if defined."
                 }
             }
         },

diff --git a/src/aria/popups/Popup.js b/src/aria/popups/Popup.js
@@ -25,6 +25,7 @@ var ariaCoreBrowser = require("../core/Browser");
 var ariaCoreTimer = require("../core/Timer");
 var ariaCoreJsonValidator = require("../core/JsonValidator");
 var ViewportPopupContainer = require("./container/Viewport");
+var environment = require("../core/environment/Environment");
 
 /**
  * Popup instance
@@ -237,6 +238,10 @@ module.exports = Aria.classDefinition({
 
             this.conf = conf;
 
+            if (conf.waiAria == null) {
+                conf.waiAria = environment.isWaiAria();
+            }
+
             ariaCoreJsonValidator.normalize({
                 json : conf,
                 beanName : "aria.popups.Beans.PopupConf"
@@ -305,11 +310,22 @@ module.exports = Aria.classDefinition({
          */
         _createDomElement : function () {
             var document = this._document;
+            var cfg = this.conf;
             var div = document.createElement("div");
             div.style.cssText = "position:absolute;top:-15000px;left:-15000px;";
             document.body.appendChild(div);
-            div.innerHTML = "<div " + ariaUtilsDelegate.getMarkup(this._delegateId)
-                    + " style='position:absolute;top:-15000px;left:-15000px;visibility:hidden;display:block;'></div>";
+            var html = [
+                 "<div ",
+                 ariaUtilsDelegate.getMarkup(this._delegateId),
+                 ' style="position:absolute;top:-15000px;left:-15000px;visibility:hidden;display:block;"'
+            ];
+            var role = cfg.role;
+            if (cfg.waiAria && role) {
+                html.push(' role="' + role + '"');
+            }
+            html.push("></div>");
+            div.innerHTML = html.join('');
+
             var domElement = div.firstChild;
             document.body.removeChild(div);
             return this.popupContainer.getContainerElt().appendChild(domElement);

diff --git a/src/aria/widgets/container/Dialog.js b/src/aria/widgets/container/Dialog.js
@@ -561,6 +561,7 @@ module.exports = Aria.classDefinition({
                     scope : this
                 });
             }
+            var isModal = cfg.modal;
             popup.open({
                 section : section,
                 keepSection : true,
@@ -571,12 +572,14 @@ module.exports = Aria.classDefinition({
                 center : cfg.center,
                 maximized : cfg.maximized,
                 offset : cfg.maximized ? this._shadows : this._shadowsZero,
-                modal : cfg.modal,
+                modal : isModal,
                 maskCssClass : "xDialogMask",
                 popupContainer : popupContainer,
                 closeOnMouseClick : cfg.closeOnMouseClick,
                 closeOnMouseScroll : false,
-                parentDialog : this
+                parentDialog : this,
+                role: isModal ? "dialog" : null,
+                waiAria: cfg.waiAria
             });
 
             // must be registered before we check for _cfg.maximized, to fire the event correctly after overflow change

diff --git a/src/aria/widgets/form/InputValidationHandler.js b/src/aria/widgets/form/InputValidationHandler.js
@@ -152,7 +152,9 @@ module.exports = Aria.classDefinition({
                 domReference : this._field,
                 preferredPositions : this._getPreferredPositions(),
                 closeOnMouseClick : true,
-                closeOnMouseScroll : false
+                closeOnMouseScroll : false,
+                role: "alert",
+                waiAria: this._WidgetCfg.waiAria
             });
         },
 

diff --git a/test/aria/widgets/wai/WaiTestSuite.js b/test/aria/widgets/wai/WaiTestSuite.js
@@ -22,5 +22,6 @@ Aria.classDefinition({
         this.addTests("test.aria.widgets.wai.autoComplete.WaiAutoCompleteTestSuite");
         this.addTests("test.aria.widgets.wai.textInputBased.WaiTextInputBasedTestSuite");
         this.addTests("test.aria.widgets.wai.input.WaiInputTestSuite");
+        this.addTests("test.aria.widgets.wai.popup.WaiPopupTestSuite");
     }
 });
diff --git a/test/aria/widgets/wai/popup/WaiPopupTestSuite.js b/test/aria/widgets/wai/popup/WaiPopupTestSuite.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2015 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Aria.classDefinition({
+    $classpath : "test.aria.widgets.wai.popup.WaiPopupTestSuite",
+    $extends : "aria.jsunit.TestSuite",
+    $constructor : function () {
+        this.$TestSuite.constructor.call(this);
+        this.addTests("test.aria.widgets.wai.popup.dialog.DialogTestCase");
+        this.addTests("test.aria.widgets.wai.popup.dialog.WaiDialogTestCase");
+        this.addTests("test.aria.widgets.wai.popup.errortooltip.ErrorTooltipTestCase");
+        this.addTests("test.aria.widgets.wai.popup.errortooltip.WaiErrorTooltipTestCase");
+    }
+});
diff --git a/test/aria/widgets/wai/popup/dialog/DialogTestCase.js b/test/aria/widgets/wai/popup/dialog/DialogTestCase.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var Aria = require("ariatemplates/Aria");
+
+module.exports = Aria.classDefinition({
+    $classpath : "test.aria.widgets.wai.popup.dialog.DialogTestCase",
+    $extends : require("ariatemplates/jsunit/TemplateTestCase"),
+    $prototype : {
+        runTemplateTest : function () {
+            // get widgets to be tested
+            this.dialog1 = this.getWidgetInstance("dlg1");
+            this.dialog2 = this.getWidgetInstance("dlg2");
+
+            // Check the first dialog (non modal)
+            var dom = this.dialog1._domElt;
+            this.assertNull(dom.getAttribute('role'), "The role attribute shouldn't be set for a non modal dialog.");
+
+            // Check the first dialog (modal)
+            var dom = this.dialog2._domElt;
+            this.assertNull(dom.getAttribute('role'), "The role attribute shouldn't be set to dialog for a modal dialog, as waiAria is set to false.");
+
+            this.end();
+
+        }
+
+    }
+});
diff --git a/test/aria/widgets/wai/popup/dialog/DialogTestCaseTpl.tpl b/test/aria/widgets/wai/popup/dialog/DialogTestCaseTpl.tpl
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2015 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+{Template {
+    $classpath : "test.aria.widgets.wai.popup.dialog.DialogTestCaseTpl",
+    $hasScript : false
+}}
+
+    {macro main()}
+        {call dialogs(false)/}
+    {/macro}
+    {macro dialogs(waiAria)}
+         {@aria:Dialog {
+            id: "dlg1",
+            title : "Non modal dialog",
+            xpos: 50,
+            ypos: 100,
+            width: 400,
+            height : 400,
+            visible : true,
+            macro: "macro1",
+            center: false,
+            waiAria : waiAria
+        }/}
+        {@aria:Dialog {
+            id: "dlg2",
+            title : "Modal dialog",
+            xpos: 500,
+            ypos: 100,
+            width: 150,
+            height : 150,
+            visible : true,
+            macro: "macro2",
+            modal: true,
+            center: false,
+            waiAria : waiAria
+        }/}
+    {/macro}
+
+    {macro macro1()}
+        Macro 1 Content
+    {/macro}
+
+    {macro macro2()}
+        Macro 2 Content
+    {/macro}
+
+{/Template}
diff --git a/test/aria/widgets/wai/popup/dialog/WaiDialogTestCase.js b/test/aria/widgets/wai/popup/dialog/WaiDialogTestCase.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var Aria = require("ariatemplates/Aria");
+
+module.exports = Aria.classDefinition({
+    $classpath : "test.aria.widgets.wai.popup.dialog.WaiDialogTestCase",
+    $extends : require("ariatemplates/jsunit/TemplateTestCase"),
+    $prototype : {
+        runTemplateTest : function () {
+            // get widgets to be tested
+            this.dialog1 = this.getWidgetInstance("dlg1");
+            this.dialog2 = this.getWidgetInstance("dlg2");
+
+            // Check the first dialog (non modal)
+            var dom = this.dialog1._domElt;
+            this.assertNull(dom.getAttribute('role'), "The role attribute shouldn't be set for a non modal dialog.");
+
+            // Check the first dialog (modal)
+            var dom = this.dialog2._domElt;
+            this.assertEquals(dom.getAttribute('role'), "dialog", "The role attribute should be set to dialog for a modal dialog.");
+
+            this.end();
+
+        }
+
+    }
+});
diff --git a/test/aria/widgets/wai/popup/dialog/WaiDialogTestCaseTpl.tpl b/test/aria/widgets/wai/popup/dialog/WaiDialogTestCaseTpl.tpl
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2015 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+{Template {
+    $classpath : "test.aria.widgets.wai.popup.dialog.WaiDialogTestCaseTpl",
+    $extends: "test.aria.widgets.wai.popup.dialog.DialogTestCaseTpl"
+}}
+
+    {macro main()}
+        {call dialogs(true)/}
+    {/macro}
+
+{/Template}
diff --git a/test/aria/widgets/wai/popup/errortooltip/ErrorTooltipTestCase.js b/test/aria/widgets/wai/popup/errortooltip/ErrorTooltipTestCase.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var Aria = require("ariatemplates/Aria");
+
+module.exports = Aria.classDefinition({
+    $classpath : "test.aria.widgets.wai.popup.errortooltip.ErrorTooltipTestCase",
+    $extends : require("ariatemplates/jsunit/TemplateTestCase"),
+    $prototype : {
+        runTemplateTest : function () {
+            this.checkAttributes(false);
+        },
+        checkAttributes : function (waiAria) {
+
+            var fieldIds = ["tf","ta","nf","df","time","dp","ac","ms","sb","mac"];
+            var index = 0;
+            var currentId = null;
+
+            var clickOnField = function() {
+                this.synEvent.click(this.getInputField(currentId), {
+                    fn : checkDom,
+                    scope : this
+                });
+            };
+
+            var checkDom = function() {
+
+                var widgetInstance = this.getWidgetInstance(currentId);
+                this.waitFor({
+                   condition : function() {
+                       return widgetInstance._onValidatePopup;
+                   },
+                   callback : function() {
+                        var div = widgetInstance._onValidatePopup._div._domElt.parentNode;
+                        if (waiAria) {
+                            this.assertEquals(div.getAttribute("role"), "alert", "The role of the error tooltip should be set to %2 instead of %1");
+                        } else {
+                            this.assertNull(div.getAttribute("role"), "The role of the error tooltip shouldn't be set");
+                        }
+
+                        next.call(this);
+                   }
+                });
+
+            };
+
+            var next = function() {
+                var id = fieldIds[index];
+                if (id) {
+                    currentId = id;
+                    index++;
+                    clickOnField.call(this);
+
+                } else {
+                    this.end();
+                }
+            };
+
+            next.call(this);
+
+        }
+
+    }
+});