Changeset 5394

Timestamp:

04/20/2017 03:44:38 PM (8 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' ); ?>"