Changeset 5394

Timestamp:

04/20/2017 03:44:38 PM (9 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:

• client/components/plugin/sections/developers/index.jsx (modified) (2 diffs)
• client/components/plugin/sections/index.jsx (modified) (2 diffs)
• template-parts/section.php (modified) (2 diffs)

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

@@ -16 +16 @@
         <div>
                 <div id="developers" className="section read-more plugin-developers">
-                        <h2>{ translate( 'Contributors & Developers' ) }</h2>
+                        <h2 id="developers-header">{ translate( 'Contributors & Developers' ) }</h2>
                         <p>
                                 { translate( 'This is open source software. The following people have contributed to this plugin.' ) }
@@ -37 +37 @@
                         </p>
                 </div>
-                <button type="button" className="button-link section-toggle" aria-controls="developers" aria-expanded="false">
+                <button
+                        type="button"
+                        className="button-link section-toggle"
+                        aria-controls="developers"
+                        aria-describedby="developers-header"
+                        aria-expanded="false"
+                >
                         { translate( 'Read more' ) }
                 </button>

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

@@ -9 +9 @@
         <div>
                 <div id={ slug } className={ `section read-more plugin-${ slug }` }>
-                        <h2>{ title }</h2>
+                        <h2 id={ `${ slug }-header` }>{ title }</h2>
                         <div dangerouslySetInnerHTML={ { __html: content } } />
                 </div>
@@ -16 +16 @@
                         className="button-link section-toggle"
                         aria-controls={ slug }
+                        aria-describedby={ `${ slug }-header` }
                         aria-expanded="false"
                         data-show-less={ translate( 'Show less' ) }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php

@@ -16 +16 @@
         class="plugin-<?php echo esc_attr( $section_slug ); ?> section <?php if ( $section_read_more ) { echo 'read-more'; } ?>"
 >
-        <h2><?php echo $section['title']; ?></h2>
+        <h2 id="<?php echo esc_attr( $section_slug . '-header' ); ?>"><?php echo $section['title']; ?></h2>
         <?php echo $section_content; ?>
 </div>
@@ -24 +24 @@
         class="button-link section-toggle"
         aria-controls="<?php echo esc_attr( $section_slug ); ?>"
+        aria-describedby="<?php echo esc_attr( $section_slug . '-header' ); ?>"
         aria-expanded="false"
         data-show-less="<?php esc_attr_e( 'Show less', 'wporg-plugins' ); ?>"