Bug 1520781 - Fix date/time picker for screen readers. r=mkmelin
authorGeoff Lankow <geoff@darktrojan.net>
Wed, 19 Jun 2019 18:19:12 +1200
changeset 35895 2dc0ef5baee8732db136ce62d75413bf005b068b
parent 35894 252ff46d7f01b00c53f758130347de18536c3804
child 35896 2611a3ec1882fa63406e6ed176f281c15e186d1e
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1520781
Bug 1520781 - Fix date/time picker for screen readers. r=mkmelin
calendar/resources/content/datetimepickers/datetimepickers.js
mail/base/content/mailWidgets.js
--- a/calendar/resources/content/datetimepickers/datetimepickers.js
+++ b/calendar/resources/content/datetimepickers/datetimepickers.js
@@ -774,16 +774,21 @@
             this._attributeObserver = new MutationObserver(this._handleMutation);
             this._attributeObserver.observe(this, {
                 attributes: true,
                 attributeFilter: ["value"],
             });
 
             this.initializeAttributeInheritance();
 
+            this.addEventListener("keydown", (event) => {
+                if (event.key == "Escape") {
+                    this._popup.hidePopup();
+                }
+            });
             this._menulist.addEventListener("change", (event) => {
                 event.stopPropagation();
 
                 let value = parseDateTime(this._inputBoxValue);
                 if (!value) {
                     this._inputBoxValue = this._minimonthValue;
                     return;
                 }
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -661,17 +661,17 @@ customElements.whenDefined("menulist").t
       }
     }
 
     static get fragment() {
       // Accessibility information of these nodes will be
       // presented on XULComboboxAccessible generated from <menulist>;
       // hide these nodes from the accessibility tree.
       return document.importNode(MozXULElement.parseXULToFragment(`
-        <textbox class="menulist-input" allowevents="true" flex="1" role="none"/>
+        <textbox class="menulist-input" allowevents="true" flex="1"/>
         <hbox class="menulist-label-box" flex="1" role="none">
           <image class="menulist-icon" role="none"/>
           <label class="menulist-label" crop="right" flex="1" role="none"/>
           <label class="menulist-highlightable-label" crop="right" flex="1" role="none"/>
         </hbox>
         <dropmarker class="menulist-dropmarker" type="menu" role="none"/>
       `), true);
     }