Add id prop to ListView #39494
Merged
Add id prop to ListView #39494
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getdave
added
the
[Feature] List View
getdave
commented
Mar 16, 2022
| @@ -205,6 +207,7 @@ function ListView( | |||
| blockDropTarget={ blockDropTarget } | |||
| /> | |||
| <TreeGrid | |||
| id={ id } | |||
There was a problem hiding this comment.
Note that this component accepts arbitrary props and spreads them onto the underlying <table> element as ...props. Thus we are not adding a new prop to <TreeView>.
|
Size Change: +9 B (0%) Total Size: 1.16 MB
ℹ️ View Unchanged
|
adamziel
approved these changes
Mar 16, 2022
getdave
force-pushed
the
try/add-id-prop-to-list-view
branch
from
dc573c2
to
d9be0a6
Compare
|
Rebasin to get those tests passing |
5 tasks
jostnes
pushed a commit
to jostnes/gutenberg
that referenced
this pull request
Mar 23, 2022
getdave
added a commit
that referenced
this pull request
Mar 28, 2022
…enus (#39290) * Navigation: try adding dedicated sidebar for managing layout of navigation menus * Fix table width to avoid overflow * Iterate on var naming and code comments * Further naming refinement * More var renaming * Rename panel title for clarity * Improve a11y of component * Revert addition of fixed table layout. Introduces too many visual bugs * Wrap items to avoid off screen movers where possible * Move additional padding * Revert id on ListView This is now handled in #39494 * Use standard getEntityRecords and remove custom entity selector Now moved to #39498 * Add handling for no data or limited data * Collapse all Nav nodes by default * Only show empty message when there are no menus * Guard against editing unpublished Menus * Select Gallery block in list view correctly * Remove rebase artifact * Add empty message in case of empty menu Co-authored-by: Dave Smith <getdavemail@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR adds an
idprop to<ListView>. This is ultimately passed down as...propsto<TreeGrid>and thus ends up being theidattribute of the root<table>element of the list view.Why?
For a11y purposes it is often important to have an
idattribute on an element. For example if you have some kind of control that is associated with the list view then you would need to add anaria-controlsattribute to it which references theidattribute of the list view.An example of this requirement is shown in #39290 where we need to associate the Navigation Menu dropdown
<select>with the list view as when you select a menu it changes the list view.How?
It adds an
idprop.Testing Instructions
idprop:gutenberg/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
Lines 62 to 66 in 5c39cdb
It should look like this:
<ListView showNestedBlocks __experimentalFeatures __experimentalPersistentListViewFeatures + id="some-id" />idattribute is present on the List View<table>element.Screenshots or screencast