Changeset 41703

Timestamp:

10/03/2017 12:16:31 PM (7 years ago)

Author:

SergeyBiryukov

Message:

Twenty Seventeen: Change tag cloud format to a list (<ul>) for better semantics and accessibility.

List markup allows screen reader users to know in advance how many tags are within the list.

Props sami.keijonen.
Fixes #40184.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• functions.php (modified) (1 diff)
• style.css (modified) (3 diffs)

trunk/src/wp-content/themes/twentyseventeen/functions.php

@@ -543 +543 @@
 
 /**
+ * Modify tag cloud widget arguments to display all tags in the same font size
+ * and use list format for better accessibility.
+ *
+ * @since Twenty Seventeen 1.4
+ *
+ * @param array $args Arguments for tag cloud widget.
+ * @return array The filtered arguments for tag cloud widget.
+ */
+function twentyseventeen_widget_tag_cloud_args( $args ) {
+    $args['largest']  = 1;
+    $args['smallest'] = 1;
+    $args['unit']     = 'em';
+    $args['format']   = 'list';
+    return $args;
+}
+add_filter( 'widget_tag_cloud_args', 'twentyseventeen_widget_tag_cloud_args' );
+
+/**
  * Implement the Custom Header feature.
  */

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -2541 +2541 @@
 }
 
-.widget ul li + li {
+.widget:not(.widget_tag_cloud) ul li + li {
     margin-top: -1px;
 }
@@ -2734 +2734 @@
 /* Tag cloud widget */
 
+.tagcloud ul li {
+    float: left;
+    border-top: 0;
+    border-bottom: 0;
+    padding: 0;
+    margin: 4px 4px 0 0;
+}
+
 .tagcloud,
 .widget_tag_cloud,
@@ -2746 +2754 @@
     -webkit-box-shadow: none;
     box-shadow: none;
-    display: inline-block;
-    float: left;
-    font-size: 14px !important; /* !important to overwrite inline styles */
-    font-size: 0.875rem !important;
-    margin: 4px 4px 0 0 !important;
-    padding: 4px 10px 5px !important;
+    display: block;
+    padding: 4px 10px 5px;
     position: relative;
     -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;