WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/16/2017 05:58:07 PM (3 years ago)
Author:
afercia
Message:

Accessibility: Improve the File Editors interstitial warning.

The warning displayed upon first visit on the File Editors introduced in [41774]
needs to be the only perceivable content in the page for users of assistive
technologies. It looks like a modal but it's not exactly an ARIA dialog, not an
ARIA alert either, and needs some special treatment.

  • constrains tabbing within the modal
  • uses wp.a11y.speak() to make screen readers announce the modal message
  • hides all the other page content from assistive technologies using aria-hidden="true"

This way, even if users miss the speak message, the warning is actually the only
perceivable content in the page.

Fixes #42110.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/theme-editor.php

    r41865 r41876  
    298298    }
    299299?>
    300 <div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js">
     300<div id="file-editor-warning" class="notification-dialog-wrap file-editor-warning hide-if-no-js hidden">
    301301    <div class="notification-dialog-background"></div>
    302     <div class="notification-dialog" role="dialog" aria-labelledby="file-editor-warning-title" tabindex="0">
     302    <div class="notification-dialog">
    303303        <div class="file-editor-warning-content">
    304             <h1 id="file-editor-warning-title"><?php _e( 'Heads up!' ); ?></h1>
    305             <p>
    306                 <?php
    307                 echo sprintf(
    308                     /* translators: %s is a link to Custom CSS section in the Customizer. */
    309                     __( 'You appear to be making direct edits to your theme in the WordPress dashboard. We recommend that you don&#8217;t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There&#8217;s no need to change your CSS here &mdash; you can edit and live preview CSS changes in WordPress&#8217;s <a href="%s">built in CSS editor</a>.' ),
    310                     esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
    311                 );
    312                 ?>
    313             </p>
    314             <p><?php _e( 'If you decide to go ahead with direct edits anyway, make sure to back up all your site&#8217;s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
     304            <div class="file-editor-warning-message">
     305                <h1><?php _e( 'Heads up!' ); ?></h1>
     306                <p>
     307                    <?php
     308                    echo sprintf(
     309                        /* translators: %s is a link to Custom CSS section in the Customizer. */
     310                        __( 'You appear to be making direct edits to your theme in the WordPress dashboard. We recommend that you don&#8217;t! Editing this code directly is dangerous, and can leave you unable to log back in to WordPress and undo changes. There&#8217;s no need to change your CSS here &mdash; you can edit and live preview CSS changes in WordPress&#8217;s <a href="%s">built in CSS editor</a>.' ),
     311                        esc_url( add_query_arg( 'autofocus[section]', 'custom_css', admin_url( 'customize.php' ) ) )
     312                    );
     313                    ?>
     314                </p>
     315                <p><?php _e( 'If you decide to go ahead with direct edits anyway, make sure to back up all your site&#8217;s files before making changes so you can restore a functional version if something goes wrong.' ); ?></p>
     316            </div>
    315317            <p>
    316318                <a class="button file-editor-warning-go-back" href="<?php echo esc_url( $return_url ); ?>"><?php _e( 'Go back' ); ?></a>
Note: See TracChangeset for help on using the changeset viewer.