Changeset 11257 for trunk/src/bp-templates/bp-legacy/css/buddypress.css

Timestamp:

11/29/2016 01:05:54 AM (7 years ago)

Author:

mercime

Message:

Update bp-screen-reader-text class.

This commit updates our bp-screen-reader-text class in line with WordPress'
current a11y practices and adds focus styles.

Fixes #7365.

File:

• trunk/src/bp-templates/bp-legacy/css/buddypress.css (modified) (1 diff)

trunk/src/bp-templates/bp-legacy/css/buddypress.css

@@ -881 +881 @@
 
 .bp-screen-reader-text {
-    position: absolute;
-    margin: -1px;
-    padding: 0;
+    clip: rect(1px, 1px, 1px, 1px);
     height: 1px;
+    overflow: hidden;
+    position: absolute !important;
     width: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    border: 0;
-    word-wrap: normal !important;
+    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}
+
+.bp-screen-reader-text:focus {
+    background-color: #f1f1f1;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    color: #21759b;
+    display: block;
+    font-size: 14px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000; /* Above WP toolbar. */
 }