WordPress.org

Make WordPress Core


Ignore:
Timestamp:
08/21/2012 10:46:30 PM (8 years ago)
Author:
azaozz
Message:

Improve the layout and accessibility of the admin menu: simplify the HTML structure, move the submenus off the viewport (still visible for screen readers) instead of hiding them with display: none, make it possible to unfold the menu on small/narrow screens, see #21349

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/menu-header.php

    r21311 r21574  
    8888            if ( ! empty( $menu_hook ) || ( ('index.php' != $submenu_items[0][2]) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) ) ) {
    8989                $admin_is_parent = true;
    90                 echo "<div class='wp-menu-image'><a href='admin.php?page={$submenu_items[0][2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$title</a>";
     90                echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
    9191            } else {
    92                 echo "\n\t<div class='wp-menu-image'><a href='{$submenu_items[0][2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='{$submenu_items[0][2]}'$class $aria_attributes>$title</a>";
     92                echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
    9393            }
    9494        } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
     
    9999            if ( ! empty( $menu_hook ) || ( ('index.php' != $item[2]) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) ) ) {
    100100                $admin_is_parent = true;
    101                 echo "\n\t<div class='wp-menu-image'><a href='admin.php?page={$item[2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='admin.php?page={$item[2]}'$class $aria_attributes>{$item[0]}</a>";
     101                echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
    102102            } else {
    103                 echo "\n\t<div class='wp-menu-image'><a href='{$item[2]}' tabindex='-1' aria-label='$aria_label'>$img</a></div>$arrow<a href='{$item[2]}'$class $aria_attributes>{$item[0]}</a>";
     103                echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
    104104            }
    105105        }
    106106
    107107        if ( ! empty( $submenu_items ) ) {
    108             echo "\n\t<div class='wp-submenu'><div class='wp-submenu-wrap'>";
    109             echo "<div class='wp-submenu-head'>{$item[0]}</div><ul>";
     108            echo "\n\t<ul class='wp-submenu wp-submenu-wrap'>";
     109            echo "<li class='wp-submenu-head'>{$item[0]}</li>";
     110   
    110111            $first = true;
    111112            foreach ( $submenu_items as $sub_key => $sub_item ) {
     
    161162                }
    162163            }
    163             echo "</ul></div></div>";
     164            echo "</ul>";
    164165        }
    165166        echo "</li>";
Note: See TracChangeset for help on using the changeset viewer.