Changeset 8973 for sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

Timestamp:

06/20/2019 01:16:39 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Trac: Improve accessibility of keywords and focuses on Trac ticket pages.

Props afercia.
Fixes #4495.

File:

• sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css (modified) (8 diffs)

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

@@ -698 +698 @@
     left: auto;
 }
+/* hide focus while clicking the buttons, pending better focus styles */
+button:focus:active,
+input[type=button]:focus:active,
+input[type=submit]:focus:active,
+input[type=reset]:focus:active {
+    outline: none;
+}
 input[type=text], input.textwidget, textarea {
     -webkit-border-radius: 3px;
@@ -1027 +1034 @@
     display: none;
 }
+.core-focuses-legend {
+    display: block !important;
+    color: inherit;
+    margin: 0 0 6px;
+    padding: 0;
+    font-size: inherit;
+    font-weight: normal;
+    transform: translateY(-2px);
+}
+#fieldset-focuses,
 #propertyform[action*="/newticket"] fieldset {
     padding: 0;
@@ -1036 +1053 @@
 }
 #propertyform[action*="/newticket"] #properties table.trac-properties > tbody > tr > td#focuses {
-    padding-left: 0;
+    padding-left: 58px;
 }
 #propertyform > p,
@@ -1452 +1469 @@
     cursor: help;
 }
-#keyword-bin span a {
+#keyword-bin .keyword-button-remove {
     margin: 1px 0 0 -15px;
+    padding: 0;
     cursor: pointer;
     width: 15px;
@@ -1467 +1485 @@
     color: #999;
 }
-#keyword-bin span a:hover {
+#keyword-bin .keyword-button-remove:hover,
+#keyword-bin .keyword-button-remove:focus {
     color: #c00;
 }
 #edit-keywords {
     cursor: pointer;
-    font-size: 8px;
-    color: #999;
-    margin: 6px 6px 0 6px;
+    font-size: 13px;
+    color: inherit;
+    margin: 2px 0;
+    border-radius: 3px;
+    vertical-align: middle;
+    background: #f7f7f7;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 0 #ccc;
+    color: #555;
+    box-shadow: none;
+}
+#edit-keywords:hover,
+#edit-keywords:focus {
+    background: #fafafa;
+    color: #23282d;
+    border-color: #999;
+}
+/* hide focus when moved programmatically, pending better focus styles */
+#edit-keywords.hide-programmatic-focus:focus {
+    outline: none;
 }
 .has-js #field-keywords {
@@ -1484 +1520 @@
 #keyword-label {
     float: left;
-    padding: 5px 6px 5px 0;
+    padding: 2px 0.4em 2px 0.1em; /* emulates table cell padding */
     text-align: right;
+    white-space: nowrap;
+}
+#keyword-add {
+    margin-left: calc( 2px + .3em ); /* emulates table cell padding */
+    margin-right: 6px;
 }
 
@@ -1496 +1537 @@
 }
 #properties table.trac-properties > tbody > tr > td#focuses {
-    padding: .6em 0 .3em 60px;
-    height: 66px;
+    padding: .6em 0 .3em 52px;
 }
 #focuses span {
@@ -1511 +1551 @@
 #focuses li {
     font-size: 12px;
+    float: left;
+    margin: 0 6px 6px 0;
+}
+#focuses .core-focuses-button {
     display: inline-block;
-    float: left;
-    margin: 0 0 6px 6px;
-    -webkit-border-radius: 3px;
+    margin: 0;
+    padding: 4px 7px;
+    color: inherit;
+    border: 1px solid #ccc;
     border-radius: 3px;
     background: #eee;
-    color: #aaa;
-}
-#focuses a {
-    display: inline-block;
-    padding: 4px 7px;
-    color: inherit;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background: inherit;
-    text-decoration: none;
-    border-bottom: none;
-}
-#focuses li:hover,
-#focuses a:focus {
-    color: #000;
     cursor: pointer;
 }
-#focuses li.active,
-#focuses li.active a:focus {
+#focuses .core-focuses-button:hover,
+#focuses .core-focuses-button:focus {
+    background: #fafafa;
+    color: #23282d;
+    border-color: #999;
+}
+#focuses li.active .core-focuses-button,
+#focuses li.active .core-focuses-button:focus {
     background: #666;
     color: #fff;
+    border-color: #666;
 }