Accessibility: Plugins: Accessibility and CSS improvements for the Plugins pages.

- improves checkboxes alignment on the "Plugins" page table in the responsive view 
- improves spacing between form controls on the "Add Plugins" page in the responsive view 
- the layout of the "filter bar" on the "Add Plugins" page is now based on CSS Flexbox 
- removes italic type from a paragraph in the "Favorites" page

Props passoniate, garethgillman, maxpertici, audrasjb, sabernhardt, afercia.
See #47327.
Fixes #49231.


git-svn-id: https://develop.svn.wordpress.org/trunk@48281 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2020-07-03 08:49:23 +00:00
parent 3785439c8b
commit 950b6ed272
4 changed files with 34 additions and 5 deletions

View File

@@ -1086,8 +1086,24 @@ th.action-links {
margin: 0;
}
/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
.plugin-install-php .wp-filter {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.wp-filter .search-form.search-plugins {
/* This element is a flex item: the inherited float won't have any effect. */
margin-top: 0;
}
.wp-filter .search-form.search-plugins select,
.wp-filter .search-form.search-plugins .wp-filter-search {
display: inline-block;
margin-top: 10px;
vertical-align: top;
}
.wp-filter .button.drawer-toggle {
@@ -3968,6 +3984,11 @@ img {
.wp-filter .search-form input[type="search"] {
font-size: 1rem;
}
.wp-filter .search-form.search-plugins {
/* This element is a flex item. */
min-width: 100%;
}
}
/* Smartphone */

View File

@@ -2094,6 +2094,16 @@ div.action-links,
line-height: 1.5;
}
.plugins tbody th.check-column {
padding: 8px 0 0 5px;
}
.plugins thead td.check-column,
.plugins tfoot td.check-column,
.plugins .inactive th.check-column {
padding-left: 9px;
}
/* Add New plugins page */
table.plugin-install .column-name,
table.plugin-install .column-version,