Media: Remove infinite scroll from media library and modal.

Replace infinitely autoloading behavior on scroll with a user-controlled load more button. Fix a long standing accessibility issue in the media library. Infinite scroll poses a wide range of problems for accessibility, usability, and performance.

This change modifies the library to load 40 items in the initial view, with a load more button to load the next 40 items and a button to move focus from the load more region to the first of the most recently added items.

The text for communicating the jump target was broadly discussed, agreeing that the text incorporated here would most concisely and clearly convey the purpose of the button, and any further detail is learnable from use.
 
Props afercia, adamsilverstein, joedolson, audrasjb, francina 
Fixes #50105. See #40330. 

git-svn-id: https://develop.svn.wordpress.org/trunk@50829 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2021-05-07 23:17:33 +00:00
parent 0a3a3c5119
commit 85f53ca0a6
8 changed files with 389 additions and 41 deletions
+4 -2
View File
@@ -420,7 +420,8 @@ border color while dragging a file over the uploader drop area */
.media-frame.mode-grid,
.media-frame.mode-grid .media-frame-content,
.media-frame.mode-grid .attachments-browser .attachments,
.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
.media-frame.mode-grid .uploader-inline-content {
position: static;
}
@@ -498,7 +499,8 @@ border color while dragging a file over the uploader drop area */
border: 4px dashed #c3c4c7;
}
.media-frame.mode-select .attachments-browser.fixed .attachments {
.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
position: relative;
top: 94px; /* prevent jumping up when the toolbar becomes fixed */
padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */