[wp-trac] [WordPress Trac] #38659: Twenty Seventeen: Fixes in SVG markup

[WordPress Trac]

#38659: Twenty Seventeen: Fixes in SVG markup
---------------------------+-----------------------------
 Reporter:  sami.keijonen  |      Owner:
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 I'm really sorry but I forgot that in IE SVG icons don't show up in the
 Customizer. This is two folded (is that a word) issue.

 1. In `inc/icon-functions.php` we use absolute path in the Customizer so
 that icons show up in there.
 1. But in IE absolute path don't work without JS polyfill.

 But this issue is resolved in ticket #30028 which means that we can remove
 absolute path. Also ticket #35824 is related.

 '''Other markup changes'''

 Even if Twenty17 doesn't use title and desc anywhere I want this theme to
 show example how you could do it in accessible way. I'm proposing this:


 {{{
         if ( $args['title'] && $args['desc'] ) {
                 $unique_id       = uniqid();
                 $aria_labelledby = ' aria-labelledby="title-' . $unique_id
 . ' desc-' . $unique_id . '"';
                 $aria_hidden     = '';
         }

         // Begin SVG markup.
         $svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"'
 . $aria_hidden . $aria_labelledby . ' role="img">';

         // If there is title and description, display them.
         if ( $args['title'] && $args['desc'] ) {
                 $svg .= '<title id="title-' . $unique_id . '">' .
 esc_html( $args['title'] ) . '</title>';
                 $svg .= '<desc id="desc-' . $unique_id . '">' . esc_html(
 $args['desc'] ) . '</desc>';
         }
 }}}

 I'm not sure do we need both, title '''and''' desc. Could also be
 '''or'''.

 I'll send patch so that you can what I'm suggesting. It also fixes the
 issue in ticket #38387.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38659>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform