Changeset 30002

Timestamp:

10/24/2014 01:20:42 AM (10 years ago)

Author:

azaozz

Message:

Editor: use <button> instead of <a> for the Visual/Text buttons, make them focusable. Props afercia, fixes #27553

Location:

trunk/src

Files:

• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/edit-form-advanced.php (modified) (1 diff)
• wp-includes/class-wp-editor.php (modified) (1 diff)
• wp-includes/css/editor.css (modified) (2 diffs)

trunk/src/wp-admin/css/edit.css

@@ -1433 +1433 @@
     }
 
-    a.wp-switch-editor {
+    button.wp-switch-editor {
         font-size: 16px;
         line-height: 1em;
-        margin: 3px 0 0 7px;
-        padding: 12px 15px;
+        margin: 7px 0 0 7px;
+        padding: 8px 12px;
     }
 

trunk/src/wp-admin/edit-form-advanced.php

@@ -505 +505 @@
     'dfw' => true,
     'drag_drop_upload' => true,
-    'tabfocus_elements' => 'insert-media-button,save-post',
+    'tabfocus_elements' => 'content-html,save-post',
     'editor_height' => 300,
     'tinymce' => array(

trunk/src/wp-includes/class-wp-editor.php

@@ -178 +178 @@
             }
 
-            $buttons .= '<a id="' . $editor_id . '-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">' . _x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) . "</a>\n";
-            $buttons .= '<a id="' . $editor_id . '-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">' . __('Visual') . "</a>\n";
+            $buttons .= '<button type="button" id="' . $editor_id . '-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">' . __('Visual') . "</button>\n";
+            $buttons .= '<button type="button" id="' . $editor_id . '-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">' . _x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) . "</button>\n";
         }
 

trunk/src/wp-includes/css/editor.css

@@ -828 +828 @@
 
 .wp-switch-editor {
+    float: left;
+    box-sizing: content-box;
+    position: relative;
+    top: 1px;
     background: #ebebeb;
-    border: 1px solid #dedede;
     color: #777;
     cursor: pointer;
-    float: right;
     font: 13px/19px "Open Sans", sans-serif;
-    height: 19px;
+    height: 20px;
     margin: 5px 0 0 5px;
     padding: 3px 8px 4px;
-    position: relative;
-    top: 1px;
+    border: 1px solid #e5e5e5;
+}
+
+.wp-switch-editor:focus {
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
+    outline: none;
+    color: #222;
+}
+
+.wp-switch-editor:active,
+.html-active .switch-html:focus,
+.tmce-active .switch-tmce:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
 }
 
 .wp-switch-editor:active {
-    background-color: #f1f1f1;
-}
-
-.wp-switch-editor:hover {
-    text-decoration: none !important;
-    background: #fff;
+    background-color: #f5f5f5;
+    -webkit-box-shadow: none;
+    box-shadow: none;
 }
 
@@ -862 +878 @@
     background: #f5f5f5;
     color: #555;
-    height: 20px;
-    border-bottom: none;
+    border-bottom-color: #f5f5f5;
 }