Bug 373996 - Attachment panel in message reader is not focusable / accessible with the keyboard (needs [TAB] stop); r=bwinton, ui-r=clarkbw, a=Standard8
authorJim Porter <squibblyflabbetydoo@gmail.com>
Thu, 18 Aug 2011 19:40:42 -0500
changeset 8863 61e68359839bfa19501ba0ef827cfc6dccf4106a
parent 8862 b8bad8be49ca280f7e09f483ef4214628519752e
child 8864 69f72be98a484f60dfccd34720e99ee0b72945d1
push idunknown
push userunknown
push dateunknown
reviewersbwinton, clarkbw, Standard8
bugs373996
Bug 373996 - Attachment panel in message reader is not focusable / accessible with the keyboard (needs [TAB] stop); r=bwinton, ui-r=clarkbw, a=Standard8
mail/base/content/msgHdrViewOverlay.js
mail/base/content/msgHdrViewOverlay.xul
mail/test/mozmill/attachment/test-attachment.js
mail/test/mozmill/shared-modules/test-folder-display-helpers.js
mail/themes/gnomestripe/mail/messageHeader.css
mail/themes/pinstripe/mail/messageHeader.css
mail/themes/qute/mail/messageHeader-aero.css
mail/themes/qute/mail/messageHeader.css
--- a/mail/base/content/msgHdrViewOverlay.js
+++ b/mail/base/content/msgHdrViewOverlay.js
@@ -2085,18 +2085,22 @@ function updateSaveAllAttachmentsButton(
 }
 
 /**
  * Expand/collapse the attachment list. When expanding it, automatically resize
  * it to an appropriate height (1/4 the message pane or smaller).
  *
  * @param expanded True if the attachment list should be expanded, false
  *                 otherwise. If |expanded| is not specified, toggle the state.
+ * @param updateFocus (optional) True if the focus should be updated, focusing
+ *                    on the attachmentList when expanding, or the messagepane
+ *                    when collapsing (but only when the attachmentList was
+ *                    originally focused).
  */
-function toggleAttachmentList(expanded)
+function toggleAttachmentList(expanded, updateFocus)
 {
   var attachmentToggle    = document.getElementById("attachmentToggle");
   var attachmentView      = document.getElementById("attachmentView");
   var attachmentList      = document.getElementById("attachmentList");
   var attachmentSplitter  = document.getElementById("attachment-splitter");
 
   if (expanded === undefined)
     expanded = !attachmentToggle.checked;
@@ -2111,22 +2115,28 @@ function toggleAttachmentList(expanded)
 
     // If the attachments box takes up too much of the message pane, downsize:
     var maxAttachmentHeight = document.getElementById("messagepanebox")
                                       .boxObject.height / 4;
 
     attachmentView.setAttribute("height", Math.min(attachmentHeight,
                                                    maxAttachmentHeight));
     attachmentView.setAttribute("maxheight", attachmentHeight);
+
+    if (updateFocus)
+      attachmentList.focus();
   }
   else {
     attachmentList.collapsed = true;
     attachmentSplitter.collapsed = true;
     attachmentView.removeAttribute("height");
     attachmentView.removeAttribute("maxheight");
+
+    if (updateFocus && document.activeElement == attachmentList)
+      SetFocusMessagePane();
   }
 }
 
 /**
  * Pick out a nice icon for the attachment.
  * @param attachment the nsIMsgAttachment object to show icon for
  */
 function getIconForAttachment(attachment)
--- a/mail/base/content/msgHdrViewOverlay.xul
+++ b/mail/base/content/msgHdrViewOverlay.xul
@@ -506,19 +506,20 @@
           oncommand="MsgComposeDraftMessage()"/>
 </hbox>
 
 <!-- the message pane consists of 4 'boxes'. Box #4 is the attachment box which
      can be toggled into a slim or an expanded view -->
 <vbox id="attachmentView" collapsed="true">
   <hbox align="center" id="attachmentBar"
         context="attachment-toolbar-context-menu"
-        onclick="if (event.button == 0 &amp;&amp; event.originalTarget.id == 'attachmentBar') toggleAttachmentList();">
+        onclick="if (event.button == 0 &amp;&amp; event.originalTarget.id == 'attachmentBar') toggleAttachmentList(undefined, true);">
     <button type="checkbox" id="attachmentToggle"
-            oncommand="toggleAttachmentList(this.checked);"/>
+            onmousedown="event.preventDefault();"
+            oncommand="toggleAttachmentList(this.checked, true);"/>
     <image id="attachmentIcon"/>
     <label id="attachmentCount"/>
     <label id="attachmentName" crop="center" flex="1"
            context="attachmentItemContext"
            onclick="if (event.button == 0) { TryHandleAllAttachments('open'); RestoreFocusAfterHdrButton(); }"
            ondraggesture="nsDragAndDrop.startDrag(event,attachmentNameDNDObserver);"/>
     <label id="attachmentSize"/>
     <!-- Use a very large flex value here so that attachmentCount doesn't take
--- a/mail/test/mozmill/attachment/test-attachment.js
+++ b/mail/test/mozmill/attachment/test-attachment.js
@@ -206,28 +206,32 @@ function test_attachment_list_expansion(
   let attachmentBar = mc.eid("attachmentBar");
 
   assert_true(attachmentList.collapsed, "Attachment list should start out " +
               "collapsed!");
 
   mc.click(attachmentToggle);
   assert_true(!attachmentList.collapsed, "Attachment list should be expanded " +
               "after clicking twisty!");
+  assert_attachment_list_focused();
 
   mc.click(attachmentToggle);
   assert_true(attachmentList.collapsed, "Attachment list should be collapsed " +
               "after clicking twisty again!");
+  assert_message_pane_focused();
 
   mc.click(attachmentBar);
   assert_true(!attachmentList.collapsed, "Attachment list should be expanded " +
               "after clicking bar!");
+  assert_attachment_list_focused();
 
   mc.click(attachmentBar);
   assert_true(attachmentList.collapsed, "Attachment list should be collapsed " +
               "after clicking bar again!");
+  assert_message_pane_focused();
 }
 
 function test_selected_attachments_are_cleared() {
   be_in_folder(folder);
 
   // First, select the message with two attachments.
   select_click_row(3);
 
--- a/mail/test/mozmill/shared-modules/test-folder-display-helpers.js
+++ b/mail/test/mozmill/shared-modules/test-folder-display-helpers.js
@@ -2204,17 +2204,17 @@ function remove_from_toolbar(aToolbarEle
   let currentSet = aToolbarElement.currentSet.split(",");
   if (currentSet.indexOf(aElementId) != -1) {
     currentSet.splice(currentSet.indexOf(aElementId), 1);
     aToolbarElement.currentSet = currentSet.join(",");
   }
 }
 
 var RECOGNIZED_WINDOWS = ["messagepane", "multimessage"];
-var RECOGNIZED_ELEMENTS = ["folderTree", "threadTree"];
+var RECOGNIZED_ELEMENTS = ["folderTree", "threadTree", "attachmentList"];
 
 /**
  * Focus an element.
  */
 function _focus_element(aElement) {
   mark_action("fdh", "_focus_element", [aElement]);
   // We're assuming that all elements we'd like to focus are in the main window
   mc.window.focus();
@@ -2316,16 +2316,23 @@ function assert_message_pane_focused() {
 
 /**
  * Assert that the multimessage pane is focused.
  */
 function assert_multimessage_pane_focused() {
   _assert_thing_focused("multimessage");
 }
 
+/**
+ * Assert that the attachment list is focused.
+ */
+function assert_attachment_list_focused() {
+  _assert_thing_focused("attachmentList");
+}
+
 
 function _normalize_folder_view_index(aViewIndex, aController) {
   if (aController == null)
     aController = mc;
   if (aViewIndex < 0)
     return aController.folderTreeView.QueryInterface(Ci.nsITreeView).rowCount +
       aViewIndex;
   return aViewIndex;
--- a/mail/themes/gnomestripe/mail/messageHeader.css
+++ b/mail/themes/gnomestripe/mail/messageHeader.css
@@ -121,22 +121,27 @@
 #attachmentList {
   margin: 0;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
 #attachmentToggle {
   -moz-appearance: treetwisty;
+  -moz-user-focus: normal;
 }
 
 #attachmentToggle[checked="true"] {
   -moz-appearance: treetwistyopen;
 }
 
+#attachmentToggle:focus {
+  outline: 1px dotted Highlight;
+}
+
 #attachmentIcon {
   list-style-image: url("chrome://messenger/skin/icons/filterbar.png");
   -moz-image-region: rect(0px, 80px, 16px, 64px);
   -moz-margin-start: 5px;
 }
 
 #attachmentCount {
   margin: 0;
--- a/mail/themes/pinstripe/mail/messageHeader.css
+++ b/mail/themes/pinstripe/mail/messageHeader.css
@@ -154,22 +154,27 @@
 #attachmentList {
   margin: 0px;
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
 #attachmentToggle {
   -moz-appearance: treetwisty;
+  -moz-user-focus: normal;
 }
 
 #attachmentToggle[checked="true"] {
   -moz-appearance: treetwistyopen;
 }
 
+#attachmentToggle:focus {
+  outline: 1px dotted Highlight;
+}
+
 #attachmentIcon {
   list-style-image: url("chrome://messenger/skin/icons/attachment.png");
   -moz-margin-start: 5px;
 }
 
 #attachmentCount {
   margin: 0;
   padding: 2px 0;
--- a/mail/themes/qute/mail/messageHeader-aero.css
+++ b/mail/themes/qute/mail/messageHeader-aero.css
@@ -126,16 +126,17 @@
 
 #attachmentToggle {
   /* Override button appearance */
   -moz-appearance: none;
   min-width: 0;
   margin: 0;
   border: 0;
   background-color: transparent;
+  -moz-user-focus: normal;
 
   list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
 }
 
 #attachmentToggle[checked="true"] {
   list-style-image: url("chrome://global/skin/tree/twisty-open.png");
 }
 
@@ -158,21 +159,16 @@
 #attachmentToggle:hover:-moz-locale-dir(rtl) {
   list-style-image: url("chrome://global/skin/tree/twisty-clsd-hover-rtl.png");
 }
 
 #attachmentToggle[checked="true"]:hover:-moz-locale-dir(rtl) {
   list-style-image: url("chrome://global/skin/tree/twisty-open-hover-rtl.png");
 }
 
-#attachmentToggle > .button-box {
-  /* Make sure the focus ring is hidden */
-  border: none;
-}
-
 #attachmentIcon {
   list-style-image: url("chrome://messenger/skin/icons/attachment-col.png");
   -moz-margin-start: 5px;
 }
 
 #attachmentCount {
   margin: 0;
   padding: 2px 0;
--- a/mail/themes/qute/mail/messageHeader.css
+++ b/mail/themes/qute/mail/messageHeader.css
@@ -127,29 +127,25 @@
 
 #attachmentToggle {
   /* Override button appearance */
   -moz-appearance: none;
   min-width: 0;
   margin: 0;
   border: 0;
   background-color: transparent;
+  -moz-user-focus: normal;
 
   list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
 }
 
 #attachmentToggle[checked="true"] {
   list-style-image: url("chrome://global/skin/tree/twisty-open.png");
 }
 
-#attachmentToggle > .button-box {
-  /* Make sure the focus ring is hidden */
-  border: none;
-}
-
 #attachmentIcon {
   list-style-image: url("chrome://messenger/skin/icons/attachment-col.png");
   -moz-margin-start: 5px;
 }
 
 #attachmentCount {
   margin: 0;
   padding: 2px 0;