WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
05/27/2019 04:46:54 AM (5 years ago)
Author:
tellyworth
Message:

Plugin directory theme: Improve responsive design of tabs.

This replaces the pure CSS tabs with a JS implementation that makes changes more manageable, and deals with some accessibility and responsiveness issues.

Props ck3lee
See #2776

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r6475 r8880  
    1212$prefix = in_array( $section_slug, array( 'screenshots', 'faq' ), true ) ? '' : 'tab-';
    1313
    14 $classes = [ 'plugin-' . $section_slug, 'section' ];
     14$classes = [ 'plugin-' . $section_slug, 'section', 'tabcontent' ];
    1515$classes = implode( ' ', $classes );
    1616?>
    1717
    18 <div id="<?php echo esc_attr( $prefix . $section_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
     18<div id="<?php echo esc_attr( $prefix . $section_slug ); ?>" role="tabpanel" aria-labelled-by="<?php echo esc_attr( 'tab-button-' . $section_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    1919    <h2 id="<?php echo esc_attr( $section_slug . '-header' ); ?>"><?php echo esc_html( $section['title'] ); ?></h2>
    2020    <?php echo $section_content; ?>
Note: See TracChangeset for help on using the changeset viewer.