From 26c90604d33cd4ccb5600d484c5b70cb62d2ddb1 Mon Sep 17 00:00:00 2001
From: Phil Banks <phil@helpfultechnology.com>
Date: Sun, 12 Jun 2016 10:23:39 +0100
Subject: [PATCH] Tag cloud accessibility changes
---
wp-includes/category-template.php | 68 +++++++++++++++++++++--
wp-includes/widgets/class-wp-widget-tag-cloud.php | 10 +++-
2 files changed, 70 insertions(+), 8 deletions(-)
diff --git a/wp-includes/category-template.php b/wp-includes/category-template.php
index 8bba6b4..9b71f78 100644
a
|
b
|
function wp_generate_tag_cloud( $tags, $args = '' ) { |
836 | 836 | } elseif ( ! empty( $args['topic_count_text_callback'] ) ) { |
837 | 837 | // Look for the alternative callback style. Ignore the previous default. |
838 | 838 | if ( $args['topic_count_text_callback'] === 'default_topic_count_text' ) { |
839 | | $translate_nooped_plural = _n_noop( '%s topic', '%s topics' ); |
| 839 | $translate_nooped_plural = _n_noop( '%s item', '%s items' ); |
840 | 840 | } else { |
841 | 841 | $translate_nooped_plural = false; |
842 | 842 | } |
… |
… |
function wp_generate_tag_cloud( $tags, $args = '' ) { |
845 | 845 | $translate_nooped_plural = _n_noop( $args['single_text'], $args['multiple_text'] ); |
846 | 846 | } else { |
847 | 847 | // This is the default for when no callback, plural, or argument is passed in. |
848 | | $translate_nooped_plural = _n_noop( '%s topic', '%s topics' ); |
| 848 | $translate_nooped_plural = _n_noop( '%s item', '%s items' ); |
849 | 849 | } |
850 | 850 | |
851 | 851 | /** |
… |
… |
function wp_generate_tag_cloud( $tags, $args = '' ) { |
921 | 921 | 'title' => $title, |
922 | 922 | 'slug' => $tag->slug, |
923 | 923 | 'real_count' => $real_count, |
924 | | 'class' => 'tag-link-' . $tag_id, |
| 924 | 'class' => 'tag-cloud-link tag-link-' . $tag_id, |
925 | 925 | 'font_size' => $args['smallest'] + ( $count - $min_count ) * $font_step, |
926 | 926 | ); |
927 | 927 | } |
… |
… |
function wp_generate_tag_cloud( $tags, $args = '' ) { |
937 | 937 | |
938 | 938 | $a = array(); |
939 | 939 | |
940 | | // generate the output links array |
941 | | foreach ( $tags_data as $key => $tag_data ) { |
| 940 | // Generate the output links array. |
| 941 | if ( 0 == $args['largest'] - $args['smallest'] ) { |
| 942 | // No visual sizing or screen reader count needed. |
| 943 | foreach ( $tags_data as $key => $tag_data ) { |
942 | 944 | $class = $tag_data['class'] . ' tag-link-position-' . ( $key + 1 ); |
943 | | $a[] = "<a href='" . esc_url( $tag_data['url'] ) . "' class='" . esc_attr( $class ) . "' title='" . esc_attr( $tag_data['title'] ) . "' style='font-size: " . esc_attr( str_replace( ',', '.', $tag_data['font_size'] ) . $args['unit'] ) . ";'>" . esc_html( $tag_data['name'] ) . "</a>"; |
| 945 | $a[] = "<a href='" . esc_url( $tag_data['url'] ) . "' class='" . esc_attr( $class ) . "'>" . esc_html( $tag_data['name'] ) . "</a>"; |
| 946 | } |
| 947 | } else { |
| 948 | foreach ( $tags_data as $key => $tag_data ) { |
| 949 | $class = $tag_data['class'] . ' tag-link-position-' . ( $key + 1 ); |
| 950 | $a[] = "<a href='" . esc_url( $tag_data['url'] ) . "' class='" . esc_attr( $class ) . "'><span style='font-size: " . esc_attr( str_replace( ',', '.', $tag_data['font_size'] ) . $args['unit'] ) . ";'>" . esc_html( $tag_data['name'] ) . "</span>\n<span class='screen-reader-text'>" . esc_attr( $tag_data['title'] ) . "</span></a>"; |
| 951 | } |
944 | 952 | } |
945 | 953 | |
| 954 | |
| 955 | |
946 | 956 | switch ( $args['format'] ) { |
947 | 957 | case 'array' : |
948 | 958 | $return =& $a; |
… |
… |
function wp_generate_tag_cloud( $tags, $args = '' ) { |
957 | 967 | break; |
958 | 968 | } |
959 | 969 | |
| 970 | $accessibility_styles = '<style> |
| 971 | ul.wp-tag-cloud { |
| 972 | list-style: none; |
| 973 | margin: 0; |
| 974 | padding: 0; |
| 975 | } |
| 976 | ul.wp-tag-cloud li { |
| 977 | display: inline-block; |
| 978 | position: relative; |
| 979 | } |
| 980 | .tag-cloud-link { |
| 981 | position:relative; |
| 982 | } |
| 983 | .tag-cloud-link .screen-reader-text { |
| 984 | clip: rect( 1px, 1px, 1px, 1px ); |
| 985 | position: absolute !important; |
| 986 | height: 1px; |
| 987 | width: 1px; |
| 988 | overflow: hidden; |
| 989 | font-size: 0.8em; |
| 990 | background: #eee; |
| 991 | color: black; |
| 992 | border-radius: 3px; |
| 993 | border: 1px solid #ddd; |
| 994 | padding: 0.3em; |
| 995 | line-height: 1; |
| 996 | z-index: 99; |
| 997 | opacity: 0; |
| 998 | transition: 0.5s ease-in-out opacity; |
| 999 | } |
| 1000 | a:focus.tag-cloud-link .screen-reader-text, |
| 1001 | a:hover.tag-cloud-link .screen-reader-text { |
| 1002 | clip: auto !important; |
| 1003 | display: block; |
| 1004 | height: auto; |
| 1005 | left: 0; |
| 1006 | top: 100%; |
| 1007 | width: auto; |
| 1008 | white-space: nowrap; |
| 1009 | left: 50%; |
| 1010 | transform: translateX( -50% ); |
| 1011 | opacity: 1; |
| 1012 | } |
| 1013 | </style>'; |
| 1014 | $return = $accessibility_styles . $return; |
| 1015 | |
960 | 1016 | if ( $args['filter'] ) { |
961 | 1017 | /** |
962 | 1018 | * Filters the generated output of a tag cloud. |
diff --git a/wp-includes/widgets/class-wp-widget-tag-cloud.php b/wp-includes/widgets/class-wp-widget-tag-cloud.php
index ae0832a..21579b0 100644
a
|
b
|
class WP_Widget_Tag_Cloud extends WP_Widget { |
53 | 53 | } |
54 | 54 | } |
55 | 55 | |
| 56 | $ariaLabel = $title . ' ' . __('list'); |
| 57 | |
56 | 58 | /** |
57 | 59 | * Filters the taxonomy used in the Tag Cloud widget. |
58 | 60 | * |
… |
… |
class WP_Widget_Tag_Cloud extends WP_Widget { |
65 | 67 | */ |
66 | 68 | $tag_cloud = wp_tag_cloud( apply_filters( 'widget_tag_cloud_args', array( |
67 | 69 | 'taxonomy' => $current_taxonomy, |
68 | | 'echo' => false |
| 70 | 'echo' => false, |
| 71 | 'smallest' => 1, |
| 72 | 'largest' => 3, |
| 73 | 'unit' => 'em', |
| 74 | 'format' => 'list', |
69 | 75 | ) ) ); |
70 | 76 | |
71 | 77 | if ( empty( $tag_cloud ) ) { |
… |
… |
class WP_Widget_Tag_Cloud extends WP_Widget { |
80 | 86 | echo $args['before_title'] . $title . $args['after_title']; |
81 | 87 | } |
82 | 88 | |
83 | | echo '<div class="tagcloud">'; |
| 89 | echo '<div class="tagcloud" aria-label="' . $ariaLabel . '">'; |
84 | 90 | |
85 | 91 | echo $tag_cloud; |
86 | 92 | |