Changeset 260978 in webkit


Ignore:
Timestamp:
Apr 30, 2020 7:20:44 PM (4 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Computed: shouldn't display focus outline on click
https://bugs.webkit.org/show_bug.cgi?id=211118
<rdar://problem/62491002>

Reviewed by Devin Rousso.

  • CSS property view is no longer focusable.
  • Disclosure triangle is now tabbable.
  • UserInterface/Views/ComputedStyleSection.css:

(.computed-style-section .computed-property-item):
(.computed-style-section .computed-property-item.expanded):
(.computed-style-section .computed-property-item > .disclosure-button:focus):

  • UserInterface/Views/ExpandableView.js:

(WI.ExpandableView):
(WI.ExpandableView.prototype._onDisclosureButtonClick):
(WI.ExpandableView.prototype._update):
Drive-by: add ariaExpanded so VoiceOver reads whether it's expanded or collapsed.

  • UserInterface/Views/SpreadsheetStyleProperty.js:

Remove tabIndex so we don't show any focus outline around the entire CSS property view.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r260963 r260978  
     12020-04-30  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Computed: shouldn't display focus outline on click
     4        https://bugs.webkit.org/show_bug.cgi?id=211118
     5        <rdar://problem/62491002>
     6
     7        Reviewed by Devin Rousso.
     8
     9        - CSS property view is no longer focusable.
     10        - Disclosure triangle is now tabbable.
     11
     12        * UserInterface/Views/ComputedStyleSection.css:
     13        (.computed-style-section .computed-property-item):
     14        (.computed-style-section .computed-property-item.expanded):
     15        (.computed-style-section .computed-property-item > .disclosure-button:focus):
     16        * UserInterface/Views/ExpandableView.js:
     17        (WI.ExpandableView):
     18        (WI.ExpandableView.prototype._onDisclosureButtonClick):
     19        (WI.ExpandableView.prototype._update):
     20        Drive-by: add `ariaExpanded` so VoiceOver reads whether it's expanded or collapsed.
     21
     22        * UserInterface/Views/SpreadsheetStyleProperty.js:
     23        Remove tabIndex so we don't show any focus outline around the entire CSS property view.
     24
    1252020-04-30  Devin Rousso  <drousso@apple.com>
    226
  • trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css

    r248681 r260978  
    3333    box-sizing: border-box;
    3434    max-width: 100%;
    35     min-height: var(--disclosure-button-size);
     35    min-height: calc(var(--disclosure-button-size));
    3636    padding-left: calc(var(--disclosure-button-size) + 6px);
    3737    padding-right: var(--css-declaration-horizontal-padding);
    38     border-top: 0.5px solid transparent;
    3938    overflow: hidden;
    4039    text-overflow: ellipsis;
     
    4443    padding-bottom: 2px;
    4544    background-color: hsl(0, 0%, 97%);
    46     border-top-color: var(--text-color-quaternary);
     45    border-top: 0.5px solid var(--text-color-quaternary);
     46    border-bottom: 0.5px solid var(--text-color-quaternary);
    4747}
    4848
    49 .computed-style-section .computed-property-item.expanded + .computed-property-item {
    50     border-top-color: var(--text-color-quaternary);
     49.computed-style-section .computed-property-item.expanded + .computed-property-item.expanded {
     50    border-top: none;
     51}
     52
     53.computed-style-section .computed-property-item > .disclosure-button:focus {
     54    outline: auto -webkit-focus-ring-color;
     55    outline-offset: -3px; /* Make focus outline smaller than usual so it doesn't get clipped here. */
     56    border-radius: calc((var(--disclosure-button-size) / 2) - 2px);
    5157}
    5258
  • trunk/Source/WebInspectorUI/UserInterface/Views/ExpandableView.js

    r238589 r260978  
    3131
    3232        if (childElement) {
    33             let disclosureButton = document.createElement("button");
    34             disclosureButton.classList.add("disclosure-button");
    35             disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this));
    36             this._element.append(disclosureButton);
     33            this._disclosureButton = this._element.createChild("button", "disclosure-button");
     34            this._disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this));
    3735        }
    3836
     
    4038        this._expandedSetting = new WI.Setting("expanded-" + key, false);
    4139
    42         if (childElement) {
     40        if (childElement)
    4341            this._element.append(childElement);
    44             this._element.classList.toggle("expanded", this._expandedSetting.value);
    45         }
     42
     43        this._update();
    4644    }
    4745
     
    5755    _onDisclosureButtonClick(event)
    5856    {
    59         let shouldExpand = !this._expandedSetting.value;
    60         this._update(shouldExpand);
     57        this._expandedSetting.value = !this._expandedSetting.value;
     58        this._update();
    6159    }
    6260
    63     _update(shouldExpand)
     61    _update()
    6462    {
    65         this._element.classList.toggle("expanded", shouldExpand);
    66         this._expandedSetting.value = shouldExpand;
     63        let isExpanded = this._expandedSetting.value;
     64        this._element.classList.toggle("expanded", isExpanded);
     65        this._disclosureButton?.setAttribute("aria-expanded", isExpanded);
    6766    }
    6867};
  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

    r260590 r260978  
    5353
    5454        if (!this._readOnly) {
    55             this._element.tabIndex = -1;
    5655            property.addEventListener(WI.CSSProperty.Event.ModifiedChanged, this.updateStatus, this);
    5756
Note: See TracChangeset for help on using the changeset viewer.