Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-25 02:27:50 +01:00
Code Issues Projects Releases Wiki Activity

Help/About: Improve accessibility of the 5.4 About page:

Browse Source 
* Remove vertical text and unnecessary italics.
* Update H1 headings to be unique for each of the About, Credits, Freedoms, Privacy pages.

Props sabernhardt, ryelle, melchoyce, karmatosed, audrasjb, afercia, davidbaumwald, SergeyBiryukov.
Reviewed by ryelle, SergeyBiryukov.
Merges [47521] to the 5.4 branch.
See #49295.
Built from https://develop.svn.wordpress.org/branches/5.4@47522


git-svn-id: http://core.svn.wordpress.org/branches/5.4@47297 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2020-03-27 23:48:10 +00:00
parent 1e8ffd2535
commit f1d8ec0715
9 changed files with 111 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
wp-admin/about.php
View File

@ -20,10 +20,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header">
<div class="about__header-title">
<h1>
<p>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</p>
</div>
<div class="about__header-text">
@ -41,7 +41,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</div>
<div class="about__section is-feature has-accent-background-color">
<p><?php _e( 'Say hello to more and better.' ); ?></p>
<h1><?php _e( 'Say hello to more and better.' ); ?></h1>
<p><?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever&mdash;and boosts in speed you can feel.' ); ?></p>
</div>
@ -105,7 +106,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<li><?php _e( 'Tips are gone. In their place, a Welcome Guide window you can bring up when you need it&mdash;and only when you need it&mdash;again and again.' ); ?></li>
<li><?php _e( 'Know at a glance whether you&#8217;re in a block&#8217;s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you&#8217;re in.' ); ?></li>
</ul>
<p><em><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></em></p>
<p><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></p>
</div>
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">

47
wp-admin/credits.php
View File

@ -22,10 +22,10 @@ $credits = wp_credits();
<div class="about__header">
<div class="about__header-title">
<h1>
<p>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</p>
</div>
<div class="about__header-text">
@ -42,28 +42,39 @@ $credits = wp_credits();
</nav>
</div>
<div class="about__section">
<div class="about__section is-feature">
<div class="column">
<h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2>
<h1><?php _e( 'Credits' ); ?></h1>
<?php if ( ! $credits ) : ?>
<p>
<?php
if ( ! $credits ) {
printf(
/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
__( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
__( 'https://wordpress.org/about/' ),
__( 'https://make.wordpress.org/' )
);
} else {
printf(
/* translators: %s: https://make.wordpress.org/ */
__( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
__( 'https://make.wordpress.org/' )
);
}
printf(
/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
__( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
__( 'https://wordpress.org/about/' ),
__( 'https://make.wordpress.org/' )
);
?>
</p>
<?php else : ?>
<p>
<?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?>
</p>
<p>
<?php
printf(
/* translators: %s: https://make.wordpress.org/ */
__( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
__( 'https://make.wordpress.org/' )
);
?>
</p>
<?php endif; ?>
</div>
<div class="about__image aligncenter">

111
wp-admin/css/about-rtl.css
View File

@ -100,6 +100,7 @@
.about__section {
background: #f3f4f5;
background: var(--background);
clear: both;
}
.about__container .has-accent-background-color {
@ -304,13 +305,17 @@
}
.about__container h1 {
font-size: 5em;
line-height: 1;
margin: 0 0 1em;
padding: 0;
font-weight: 600;
color: inherit;
}
.about__container h1,
.about__container h2 {
margin-top: 0;
font-size: 1.4em;
line-height: 1.4;
}
.about__container h3 {
@ -396,17 +401,7 @@
text-align: center;
}
@media screen and (max-width: 782px) {
.about__container h1 {
font-size: 4em;
}
}
@media screen and (max-width: 480px) {
.about__container h1 {
font-size: 3.2em;
}
.about__section.is-feature {
font-size: 1.4em;
font-weight: 500;
@ -416,22 +411,17 @@
/* 1.3 - Header */
.about__header {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 30em;
max-height: 42em;
height: 90vh;
margin-bottom: 32px;
background-color: #f3f4f5;
background-color: var(--background);
background-repeat: no-repeat;
background-position: top center;
background-position: top left;
background-size: contain;
background-image: url('https://wordpress.org/images/core/5.4/header.svg');
background-image: url('https://wordpress.org/images/core/5.4/header-diagonal.svg');
}
.rtl .about__header {
background-image: url('https://wordpress.org/images/core/5.4/header-diagonal-rtl.svg');
}
.about__header > div {
@ -443,49 +433,32 @@
}
.about__header-title {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/span 2;
padding: 32px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: rotate(-180deg);
min-height: 24em;
max-height: 32em;
height: 80vh;
padding: 0 32px;
}
/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
.about__header .about__header-title {
display: inline-block;
vertical-align: top;
}
.about__header-title h1 {
.about__header-title p {
margin: 0;
padding: 0;
font-size: 4em;
line-height: 1;
font-weight: 500;
color: #1730e5;
color: var(--accent-1);
}
.about__header-title h1 span {
display: block;
font-weight: 600;
font-size: 1.2em;
line-height: 1;
.about__header-title p span {
display: inline-block;
color: #216bce;
color: var(--accent-2);
}
.about__header-text {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
padding: 32px;
padding: 16px 32px 32px;
font-size: 1.5em;
line-height: 1.4;
text-align: left;
justify-self: flex-end;
}
.about__header-text p {
@ -493,11 +466,6 @@
}
.about__header-navigation {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/span 2;
-ms-grid-row: 3;
grid-row: 3;
padding-top: 0;
background: #216bce;
background: var(--nav-background);
@ -544,31 +512,16 @@
.about__container .about__header-text {
font-size: 1.4em;
}
}
@media screen and (max-width: 600px) {
.about__header {
display: block;
min-height: unset;
max-height: unset;
height: auto;
}
.about__header-title {
min-height: 0;
max-height: none;
height: auto;
/*
* 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
* 60% is a "magic" number to create a top offset approx-equal to the height of the background image,
* which scales to match the container width.
*/
padding-top: 80%;
padding-bottom: 0;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
transform: none;
}
.about__header-text {
text-align: right;
padding-top: 60%;
}
.about__header-navigation .nav-tab {
@ -579,6 +532,10 @@
}
@media screen and (max-width: 480px) {
.about__header-title p {
font-size: 3.2em;
}
.about__header-navigation .nav-tab {
float: none;
display: block;

2
wp-admin/css/about-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

111
wp-admin/css/about.css
View File

@ -99,6 +99,7 @@
.about__section {
background: #f3f4f5;
background: var(--background);
clear: both;
}
.about__container .has-accent-background-color {
@ -303,13 +304,17 @@
}
.about__container h1 {
font-size: 5em;
line-height: 1;
margin: 0 0 1em;
padding: 0;
font-weight: 600;
color: inherit;
}
.about__container h1,
.about__container h2 {
margin-top: 0;
font-size: 1.4em;
line-height: 1.4;
}
.about__container h3 {
@ -395,17 +400,7 @@
text-align: center;
}
@media screen and (max-width: 782px) {
.about__container h1 {
font-size: 4em;
}
}
@media screen and (max-width: 480px) {
.about__container h1 {
font-size: 3.2em;
}
.about__section.is-feature {
font-size: 1.4em;
font-weight: 500;
@ -415,22 +410,17 @@
/* 1.3 - Header */
.about__header {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 30em;
max-height: 42em;
height: 90vh;
margin-bottom: 32px;
background-color: #f3f4f5;
background-color: var(--background);
background-repeat: no-repeat;
background-position: top center;
background-position: top right;
background-size: contain;
background-image: url('https://wordpress.org/images/core/5.4/header.svg');
background-image: url('https://wordpress.org/images/core/5.4/header-diagonal.svg');
}
.rtl .about__header {
background-image: url('https://wordpress.org/images/core/5.4/header-diagonal-rtl.svg');
}
.about__header > div {
@ -442,49 +432,32 @@
}
.about__header-title {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/span 2;
padding: 32px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
min-height: 24em;
max-height: 32em;
height: 80vh;
padding: 0 32px;
}
/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
.about__header .about__header-title {
display: inline-block;
vertical-align: top;
}
.about__header-title h1 {
.about__header-title p {
margin: 0;
padding: 0;
font-size: 4em;
line-height: 1;
font-weight: 500;
color: #1730e5;
color: var(--accent-1);
}
.about__header-title h1 span {
display: block;
font-weight: 600;
font-size: 1.2em;
line-height: 1;
.about__header-title p span {
display: inline-block;
color: #216bce;
color: var(--accent-2);
}
.about__header-text {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
padding: 32px;
padding: 16px 32px 32px;
font-size: 1.5em;
line-height: 1.4;
text-align: right;
justify-self: flex-end;
}
.about__header-text p {
@ -492,11 +465,6 @@
}
.about__header-navigation {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/span 2;
-ms-grid-row: 3;
grid-row: 3;
padding-top: 0;
background: #216bce;
background: var(--nav-background);
@ -543,31 +511,16 @@
.about__container .about__header-text {
font-size: 1.4em;
}
}
@media screen and (max-width: 600px) {
.about__header {
display: block;
min-height: unset;
max-height: unset;
height: auto;
}
.about__header-title {
min-height: 0;
max-height: none;
height: auto;
/*
* 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
* 60% is a "magic" number to create a top offset approx-equal to the height of the background image,
* which scales to match the container width.
*/
padding-top: 80%;
padding-bottom: 0;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
transform: none;
}
.about__header-text {
text-align: left;
padding-top: 60%;
}
.about__header-navigation .nav-tab {
@ -578,6 +531,10 @@
}
@media screen and (max-width: 480px) {
.about__header-title p {
font-size: 3.2em;
}
.about__header-navigation .nav-tab {
float: none;
display: block;

2
wp-admin/css/about.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
wp-admin/freedoms.php
View File

@ -25,10 +25,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header">
<div class="about__header-title">
<h1>
<p>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</p>
</div>
<div class="about__header-text">
@ -46,7 +46,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</div>
<div class="about__section has-subtle-background-color is-feature">
<h2><?php _e( 'Freedoms' ); ?></h2>
<h1><?php _e( 'Freedoms' ); ?></h1>
<p class="about-description">
<?php

6
wp-admin/privacy.php
View File

@ -19,10 +19,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header">
<div class="about__header-title">
<h1>
<p>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</p>
</div>
<div class="about__header-text">
@ -41,7 +41,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__section">
<div class="column">
<h2><?php _e( 'Privacy' ); ?></h2>
<h1><?php _e( 'Privacy' ); ?></h1>
<p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.4-RC4-47518';
$wp_version = '5.4-RC4-47522';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.