Details sections are used in Elements tab (Computed and Node panels), Sources tab (Breakpoints, Resource, Scope Chain), and Storage tab. There's currently now way to focus on the section with Tab/Shift-Tab navigation.
<rdar://problem/60028941>
Created attachment 392828 [details] Patch
Created attachment 392829 [details] [Video] With patch applied
Comment on attachment 392828 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=392828&action=review r=me > Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:107 > + margin-top: calc(-1 * var(--details-section-header-vertical-padding)); Some explanation as to why this is necessary would be nice :) > Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:122 > + outline-offset: -5px; > + border-radius: 9px; These are oddly specific numbers. How do you come up with them? > Source/WebInspectorUI/UserInterface/Views/DetailsSection.js:163 > + if (event.code === "Space" || event.code === "Enter") { What's the difference between this (which only appears to be used once or twice in Web Inspector) and `keyIdentifier === "Left"` (which is used a good amount)?
Comment on attachment 392828 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=392828&action=review >> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:107 >> + margin-top: calc(-1 * var(--details-section-header-vertical-padding)); > > Some explanation as to why this is necessary would be nice :) I left a comment in the ChangeLog. >> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:122 >> + border-radius: 9px; > > These are oddly specific numbers. How do you come up with them? I tweaked the numbers so the outline is optically around the glyph. If we used a different glyph, the numbers would be different.
Created attachment 392845 [details] Patch
Comment on attachment 392845 [details] Patch Clearing flags on attachment: 392845 Committed r258058: <https://trac.webkit.org/changeset/258058>
All reviewed patches have been landed. Closing bug.