fixup! fix(aria/ngClick): check if element is contenteditable befor…

…e blocking spacebar
angular · Nov 28, 2018 · 35f0308 · 35f0308
1 parent 628bd59
commit 35f0308
Showing 1 changed file with 70 additions and 14 deletions.
diff --git a/test/ngAria/ariaSpec.js b/test/ngAria/ariaSpec.js
@@ -976,34 +976,90 @@ describe('$aria', function() {
 
     it('should not prevent default keyboard action if the target element has editable content',
       function() {
+        // Note:
+        // `contenteditable` is an enumarated (not a boolean) attribute (see
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable).
+        // We need to check the following conditions:
+        //   - No attribute.
+        //   - Value: ""
+        //   - Value: "true"
+        //   - Value: "false"
+
+        function eventFor(keyCode) {
+          return {bubbles: true, cancelable: true, keyCode: keyCode};
+        }
+
         compileElement(
           '<section>' +
-            '<div ng-click="onClick($event)" ng-attr-contenteditable="{{ edit }}"></div>' +
-            '<ul ng-click="onClick($event)"><li ng-attr-contenteditable="{{ edit }}"></li></ul>' +
+            // No attribute.
+            '<div id="no-attribute">' +
+              '<div ng-click="onClick($event)"></div>' +
+              '<ul ng-click="onClick($event)"><li></li></ul>' +
+            '</div>' +
+
+            // Value: ""
+            '<div id="value-empty">' +
+              '<div ng-click="onClick($event)" contenteditable=""></div>' +
+              '<ul ng-click="onClick($event)"><li contenteditable=""></li></ul>' +
+            '</div>' +
+
+            // Value: "true"
+            '<div id="value-true">' +
+              '<div ng-click="onClick($event)" contenteditable="true"></div>' +
+              '<ul ng-click="onClick($event)"><li contenteditable="true"></li></ul>' +
+            '</div>' +
+
+            // Value: "false"
+            '<div id="value-false">' +
+              '<div ng-click="onClick($event)" contenteditable="false"></div>' +
+              '<ul ng-click="onClick($event)"><li contenteditable="false"></li></ul>' +
+            '</div>' +
           '</section>');
 
-        var divElement = element.find('div');
-        var ulElement = element.find('ul');
-        var liElement = element.find('li');
+        // Support: Safari 11-12+
+        // Attach to DOM, because otherwise Safari will not update the `isContentEditable` property
+        // based on the `contenteditable` attribute.
+        document.body.appendChild(element[0]);
+
+        var containers = element.children();
+        var container;
 
         // Using `browserTrigger()`, because it supports event bubbling.
 
-        // Element are not editable yet.
-        browserTrigger(divElement, 'keydown', {bubbles: true, cancelable: true, keyCode: 13});
-        browserTrigger(ulElement, 'keydown', {bubbles: true, cancelable: true, keyCode: 32});
-        browserTrigger(liElement, 'keydown', {bubbles: true, cancelable: true, keyCode: 13});
+        // No attribute | Elements are not editable.
+        container = containers.eq(0);
+        browserTrigger(container.find('div'), 'keydown', eventFor(13));
+        browserTrigger(container.find('ul'), 'keydown', eventFor(32));
+        browserTrigger(container.find('li'), 'keydown', eventFor(13));
 
         expect(clickEvents).toEqual(['div(true)', 'ul(true)', 'li(true)']);
 
+        // Value: "" | Elements are editable.
         clickEvents = [];
-        scope.$apply('edit = true');
+        container = containers.eq(1);
+        browserTrigger(container.find('div'), 'keydown', eventFor(32));
+        browserTrigger(container.find('ul'), 'keydown', eventFor(13));
+        browserTrigger(container.find('li'), 'keydown', eventFor(32));
+
+        expect(clickEvents).toEqual(['div(false)', 'ul(true)', 'li(false)']);
 
-        // Element are now editable.
-        browserTrigger(divElement, 'keydown', {bubbles: true, cancelable: true, keyCode: 32});
-        browserTrigger(ulElement, 'keydown', {bubbles: true, cancelable: true, keyCode: 13});
-        browserTrigger(liElement, 'keydown', {bubbles: true, cancelable: true, keyCode: 32});
+        // Value: "true" | Elements are editable.
+        clickEvents = [];
+        container = containers.eq(2);
+        browserTrigger(container.find('div'), 'keydown', eventFor(13));
+        browserTrigger(container.find('ul'), 'keydown', eventFor(32));
+        browserTrigger(container.find('li'), 'keydown', eventFor(13));
 
         expect(clickEvents).toEqual(['div(false)', 'ul(true)', 'li(false)']);
+
+        // Value: "false" | Elements are not editable.
+        clickEvents = [];
+        container = containers.eq(3);
+        browserTrigger(container.find('div'), 'keydown', eventFor(32));
+        browserTrigger(container.find('ul'), 'keydown', eventFor(13));
+        browserTrigger(container.find('li'), 'keydown', eventFor(32));
+
+        expect(clickEvents).toEqual(['div(true)', 'ul(true)', 'li(true)']);
       }
     );