Revisions: Improve accessibility of revisions selection.

Add `aria-labelledby` and `aria-describedby` attributes to revision slider selection handle. Add keyboard `:focus` state to revision slider  handle. Move 'multiple revision' checkbox before the buttons panel, matching its visual order. Change diff `Title` and `Content` headings from `h3` to `h2` to correct headings hierarchy.

Props joedolson, rishishah, sarahricker, williamalexander, afercia. 
Fixes #52303.
Built from https://develop.svn.wordpress.org/trunk@59225


git-svn-id: http://core.svn.wordpress.org/trunk@58617 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson
2024-10-13 20:49:13 +00:00
parent f7fb13a3c4
commit 0c88366123
8 changed files with 63 additions and 16 deletions

View File

@@ -459,8 +459,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
touch-action: none;
}
.wp-slider .ui-slider-handle,
.wp-slider .ui-slider-handle.focus {
.wp-slider .ui-slider-handle {
background: #f6f7f7;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 0 #c3c4c7;
@@ -480,6 +479,15 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
transform: translateY(1px);
}
.wp-slider .ui-slider-handle:focus,
.wp-slider .ui-slider-handle.ui-state-focus {
background: #f0f0f1;
border-color: #8c8f94;
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-slider .ui-slider-handle:before {
background: none;
position: absolute;

File diff suppressed because one or more lines are too long

View File

@@ -458,8 +458,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
touch-action: none;
}
.wp-slider .ui-slider-handle,
.wp-slider .ui-slider-handle.focus {
.wp-slider .ui-slider-handle {
background: #f6f7f7;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 0 #c3c4c7;
@@ -479,6 +478,15 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
transform: translateY(1px);
}
.wp-slider .ui-slider-handle:focus,
.wp-slider .ui-slider-handle.ui-state-focus {
background: #f0f0f1;
border-color: #8c8f94;
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-slider .ui-slider-handle:before {
background: none;
position: absolute;

File diff suppressed because one or more lines are too long