Title: [258058] trunk/Source/WebInspectorUI
- Revision
- 258058
- Author
- nvasil...@apple.com
- Date
- 2020-03-06 21:22:57 -0800 (Fri, 06 Mar 2020)
Log Message
Web Inspector: AXI: no way to expand/collapse sidebar sections with Tab navigation
https://bugs.webkit.org/show_bug.cgi?id=208562
<rdar://problem/60028941>
Reviewed by Devin Rousso.
* UserInterface/Views/DetailsSection.css:
(.details-section > .header):
(.details-section > .header::before):
Increase the height of the clickble area so it matches the height
of the header section.
(.details-section .header:focus):
(.details-section .header:focus::before):
Adjust the focus ring around the expand/collapse triangle so it has rounded corners.
* UserInterface/Views/DetailsSection.js:
(WI.DetailsSection):
(WI.DetailsSection.prototype._headerElementClicked):
(WI.DetailsSection.prototype._headerElementMouseDown):
(WI.DetailsSection.prototype._headerElementKeyPress):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (258057 => 258058)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-03-07 05:11:56 UTC (rev 258057)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-03-07 05:22:57 UTC (rev 258058)
@@ -1,5 +1,29 @@
2020-03-06 Nikita Vasilyev <nvasil...@apple.com>
+ Web Inspector: AXI: no way to expand/collapse sidebar sections with Tab navigation
+ https://bugs.webkit.org/show_bug.cgi?id=208562
+ <rdar://problem/60028941>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/DetailsSection.css:
+ (.details-section > .header):
+ (.details-section > .header::before):
+ Increase the height of the clickble area so it matches the height
+ of the header section.
+
+ (.details-section .header:focus):
+ (.details-section .header:focus::before):
+ Adjust the focus ring around the expand/collapse triangle so it has rounded corners.
+
+ * UserInterface/Views/DetailsSection.js:
+ (WI.DetailsSection):
+ (WI.DetailsSection.prototype._headerElementClicked):
+ (WI.DetailsSection.prototype._headerElementMouseDown):
+ (WI.DetailsSection.prototype._headerElementKeyPress):
+
+2020-03-06 Nikita Vasilyev <nvasil...@apple.com>
+
Web Inspector: AXI: scope bars should be focusable when navigating by pressing Tab
https://bugs.webkit.org/show_bug.cgi?id=208277
<rdar://problem/59828111>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (258057 => 258058)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2020-03-07 05:11:56 UTC (rev 258057)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2020-03-07 05:22:57 UTC (rev 258058)
@@ -48,8 +48,8 @@
.details-section > .header {
position: sticky;
top: var(--details-section-header-top);
- height: 23px;
- padding: 4px 0;
+ height: var(--details-section-header-height);
+ padding: var(--details-section-header-vertical-padding) 0;
-webkit-padding-end: 5px;
font-size: 11px;
font-weight: bold;
@@ -61,6 +61,9 @@
/* Ensure the headers are displayed above scrollbars. */
z-index: var(--z-index-header);
+
+ --details-section-header-height: 23px;
+ --details-section-header-vertical-padding: 4px;
}
.details-section > .header > .options > .navigation-bar {
@@ -100,7 +103,8 @@
.details-section > .header::before {
display: block;
width: 21px;
- height: 100%;
+ height: var(--details-section-header-height);
+ margin-top: calc(-1 * var(--details-section-header-vertical-padding));
content: "";
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
background-repeat: no-repeat;
@@ -108,6 +112,16 @@
background-size: 13px 13px;
}
+.details-section .header:focus {
+ outline: none;
+}
+
+.details-section .header:focus::before {
+ outline: auto -webkit-focus-ring-color;
+ outline-offset: -5px;
+ border-radius: 9px;
+}
+
body[dir=rtl] .details-section > .header::before {
transform: scaleX(-1);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js (258057 => 258058)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js 2020-03-07 05:11:56 UTC (rev 258057)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js 2020-03-07 05:22:57 UTC (rev 258058)
@@ -35,8 +35,11 @@
this._element.classList.add(identifier, "details-section");
this._headerElement = document.createElement("div");
+ this._headerElement.addEventListener("mousedown", this._headerElementMouseDown.bind(this));
this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
+ this._headerElement.addEventListener("keypress", this._headerElementKeyPress.bind(this));
this._headerElement.className = "header";
+ this._headerElement.tabIndex = 0;
this._element.appendChild(this._headerElement);
if (optionsElement instanceof HTMLElement) {
@@ -131,12 +134,24 @@
// Private
+ _headerElementMouseDown(event)
+ {
+ if (this._optionsElement?.contains(event.target))
+ return;
+
+ // Don't lose focus if already focused.
+ if (document.activeElement === this._headerElement)
+ return;
+
+ event.preventDefault();
+ }
+
_headerElementClicked(event)
{
- if (this._optionsElement && this._optionsElement.contains(event.target))
+ if (this._optionsElement?.contains(event.target))
return;
- var collapsed = this.collapsed;
+ let collapsed = this.collapsed;
this.collapsed = !collapsed;
this._expandedByUser = collapsed;
@@ -143,6 +158,18 @@
this._element.scrollIntoViewIfNeeded(false);
}
+ _headerElementKeyPress(event)
+ {
+ if (event.code === "Space" || event.code === "Enter") {
+ if (this._optionsElement?.contains(event.target))
+ return;
+
+ let collapsed = this.collapsed;
+ this.collapsed = !collapsed;
+ this._expandedByUser = collapsed;
+ }
+ }
+
_optionsElementMouseDown(event)
{
this._headerElement.classList.add(WI.DetailsSection.MouseOverOptionsElementStyleClassName);
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
