Help/About: Improve accessibility of the 5.4 About page:
* Remove vertical text and unnecessary italics. * Update H1 headings on About, Credits, Freedoms, Privacy pages to be unique to each page. Props sabernhardt, ryelle, melchoyce, karmatosed, audrasjb, afercia, davidbaumwald, SergeyBiryukov. See #49295. Built from https://develop.svn.wordpress.org/trunk@47521 git-svn-id: http://core.svn.wordpress.org/trunk@47296 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov
parent
a546a9c35c
commit
ce2dea9ef6
|
|
@ -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—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—and only when you need it—again and again.' ); ?></li>
|
||||
<li><?php _e( 'Know at a glance whether you’re in a block’s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you’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’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’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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 — including, but not limited to — the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.5-alpha-47520';
|
||||
$wp_version = '5.5-alpha-47521';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue