Changeset 30002

Timestamp:

10/24/2014 01:20:42 AM (12 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;
 }