WordPress.org

Making WordPress.org

Changeset 5394


Ignore:
Timestamp:
04/20/2017 03:44:38 PM (4 years ago)
Author:
ocean90
Message:

Plugin Directory: Provide more context for "Read more" and "Show less" buttons to improve accessibility.

Props SergeyBiryukov, joedolson.
Fixes #2292.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/developers/index.jsx

    r5024 r5394  
    1616    <div>
    1717        <div id="developers" className="section read-more plugin-developers">
    18             <h2>{ translate( 'Contributors & Developers' ) }</h2>
     18            <h2 id="developers-header">{ translate( 'Contributors & Developers' ) }</h2>
    1919            <p>
    2020                { translate( 'This is open source software. The following people have contributed to this plugin.' ) }
     
    3737            </p>
    3838        </div>
    39         <button type="button" className="button-link section-toggle" aria-controls="developers" aria-expanded="false">
     39        <button
     40            type="button"
     41            className="button-link section-toggle"
     42            aria-controls="developers"
     43            aria-describedby="developers-header"
     44            aria-expanded="false"
     45        >
    4046            { translate( 'Read more' ) }
    4147        </button>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/index.jsx

    r5024 r5394  
    99    <div>
    1010        <div id={ slug } className={ `section read-more plugin-${ slug }` }>
    11             <h2>{ title }</h2>
     11            <h2 id={ `${ slug }-header` }>{ title }</h2>
    1212            <div dangerouslySetInnerHTML={ { __html: content } } />
    1313        </div>
     
    1616            className="button-link section-toggle"
    1717            aria-controls={ slug }
     18            aria-describedby={ `${ slug }-header` }
    1819            aria-expanded="false"
    1920            data-show-less={ translate( 'Show less' ) }
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php

    r5026 r5394  
    1616    class="plugin-<?php echo esc_attr( $section_slug ); ?> section <?php if ( $section_read_more ) { echo 'read-more'; } ?>"
    1717>
    18     <h2><?php echo $section['title']; ?></h2>
     18    <h2 id="<?php echo esc_attr( $section_slug . '-header' ); ?>"><?php echo $section['title']; ?></h2>
    1919    <?php echo $section_content; ?>
    2020</div>
     
    2424    class="button-link section-toggle"
    2525    aria-controls="<?php echo esc_attr( $section_slug ); ?>"
     26    aria-describedby="<?php echo esc_attr( $section_slug . '-header' ); ?>"
    2627    aria-expanded="false"
    2728    data-show-less="<?php esc_attr_e( 'Show less', 'wporg-plugins' ); ?>"
Note: See TracChangeset for help on using the changeset viewer.