WordPress.org
Get WordPress

Make WordPress Core

Changeset 64243


Ignore:
Timestamp:
10/08/2026 02:28:31 PM (7 hours ago)
Author:
afercia
Message:

Themes: Improve semantics and accessibility of the Theme installer disabled controls.

Most of the disabled controls in the Theme installer were rendered as <a> elements without a href attribute. Just a few of them were rendered as buttons when disabled. This change improves semantics, interaction, and accessibility by making all these controls buttons that are still focusable and that use aria-disabled instead of a disabled attribute.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13390

Props sainathpoojary, arkaprabhachowdhury, sanayasir, kthibault, nicoblandel, joedolson, afercia.
Fixes #66038.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/themes.css

    r64242 r64243  
    283283.theme-browser .theme.active .theme-actions .button:not(.button-primary):focus {
    284284        background: #fff;
     285        box-shadow:
     286                0 0 0 var(--wp-admin-border-width-focus, 1.5px) #fff,
     287                inset 0 0 0 1px var(--wp-admin-theme-color, #3858e9);
     288        outline: 1px solid transparent;
     289}
     290
     291/* Active theme card: uses white outer ring against the colored banner. */
     292.theme-browser .theme.active .theme-actions .button.disabled:focus {
     293        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #fff, inset 0 0 0 1px var(--wp-admin-theme-color, #3858e9) !important;
     294        outline: 1px solid transparent;
     295}
     296
     297/* Other theme cards: standard focus ring on the card white background. */
     298.theme-browser .theme:not(.active) .theme-actions .button.disabled:focus {
     299        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9) !important;
     300        outline: 1px solid transparent;
    285301}
    286302

  • trunk/src/wp-admin/theme-install.php

    r64241 r64243  
    417417                                                        <a class="button button-primary button-compact activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    418418                                                <# } else { #>
    419                                                         <button class="button button-primary button-compact disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
     419                                                        <button type="button" class="button button-primary button-compact disabled" aria-disabled="true"><?php _ex( 'Activated', 'theme' ); ?></button>
    420420                                                <# } #>
    421421                                        <# } #>
    … …  
    437437                                        ?>
    438438                                        <# if ( data.activate_url ) { #>
    439                                                 <a class="button button-primary button-compact disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     439                                                <button type="button" class="button button-primary button-compact disabled" aria-label="<?php echo esc_attr( $aria_label ); ?>" aria-disabled="true"><?php _ex( 'Cannot Activate', 'theme' ); ?></button>
    440440                                        <# } #>
    441441                                        <# if ( data.customize_url ) { #>
    442                                                 <a class="button button-compact disabled"><?php _e( 'Live Preview' ); ?></a>
     442                                                <button type="button" class="button button-compact disabled" aria-disabled="true"><?php _e( 'Live Preview' ); ?></button>
    443443                                        <# } else { #>
    444                                                 <button class="button button-compact disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
     444                                                <button type="button" class="button button-compact disabled" aria-disabled="true"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
    445445                                        <# } #>
    446446                                <# } #>
    … …  
    458458                                        $aria_label = sprintf( _x( 'Cannot Install %s', 'theme' ), '{{ data.name }}' );
    459459                                        ?>
    460                                         <a class="button button-primary button-compact disabled" data-name="{{ data.name }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _ex( 'Cannot Install', 'theme' ); ?></a>
    461                                         <button class="button button-compact disabled"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
     460                                        <button type="button" class="button button-primary button-compact disabled" data-name="{{ data.name }}" aria-label="<?php echo esc_attr( $aria_label ); ?>" aria-disabled="true"><?php _ex( 'Cannot Install', 'theme' ); ?></button>
     461                                        <button type="button" class="button button-compact disabled" aria-disabled="true"><?php echo esc_html_x( 'Preview', 'verb' ); ?></button>
    462462                                <# } #>
    463463                        <# } #>
    … …  
    496496                                                <a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
    497497                                        <# } else { #>
    498                                                 <button class="button button-primary disabled"><?php _ex( 'Activated', 'theme' ); ?></button>
     498                                                <button type="button" class="button button-primary disabled" aria-disabled="true"><?php _ex( 'Activated', 'theme' ); ?></button>
    499499                                        <# } #>
    500500                                <# } else { #>
    501                                         <a class="button button-primary disabled" ><?php _ex( 'Cannot Activate', 'theme' ); ?></a>
     501                                        <button type="button" class="button button-primary disabled" aria-disabled="true"><?php _ex( 'Cannot Activate', 'theme' ); ?></button>
    502502                                <# } #>
    503503                        <# } else { #>
    … …  
    505505                                        <a href="{{ data.install_url }}" class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></a>
    506506                                <# } else { #>
    507                                         <a class="button button-primary disabled" ><?php _ex( 'Cannot Install', 'theme' ); ?></a>
     507                                        <button type="button" class="button button-primary disabled" aria-disabled="true"><?php _ex( 'Cannot Install', 'theme' ); ?></button>
    508508                                <# } #>
    509509                        <# } #>
Note: See TracChangeset for help on using the changeset viewer.