Bug 118122 – Web Inspector: AX: VoiceOver speaks all inspector search fields as 'required'

• Component: Web Inspector
• Status: RESOLVED FIXED

[James Craig]

I believe this is just an oversight. These fields aren't actually required for anything and there appears to be no validation checking that relies on this property, so we could comment or remove "*.required = true;" in all occurrences to make this work better for VoiceOver. 


Searching 400 files for ".required" (case sensitive)

/Users/jc/svnroot/WebKit/Source/WebInspectorUI/UserInterface/FilterBar.js:
   32      this._inputField = document.createElement("input");
   33      this._inputField.type = "search";
   34:     this._inputField.required = true;
   35      this._inputField.spellcheck = false;
   36      this._inputField.incremental = true;

/Users/jc/svnroot/WebKit/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js:
   33      this._inputElement = document.createElement("input");
   34      this._inputElement.type = "search";
   35:     this._inputElement.required = true;
   36      this._inputElement.spellcheck = false;
   37      this._inputElement.addEventListener("search", this._searchFieldChanged.bind(this));

/Users/jc/svnroot/WebKit/Source/WebInspectorUI/UserInterface/SearchBar.js:
   36      this._searchInput = this._element.appendChild(document.createElement("input"));
   37      this._searchInput.type = "search";
   38:     this._searchInput.required = true;
   39      this._searchInput.spellcheck = false;
   40      this._searchInput.incremental = true;

3 matches across 3 files

[Radar WebKit Bug Importer]

<rdar://problem/14287209>

[Timothy Hatcher]

They are marked required to allow us to style them with a white background when there is content typed into them. Otherwise they have a semi transparent background. Can we hide that from VoiceOver since this is a purely visual reason?

[James Craig]

(In reply to comment #2)
> They are marked required to allow us to style them with a white background when there is content typed into them. Otherwise they have a semi transparent background. 

Oh, I see the :valid pseudo-class selectors now. I think we can manage the same thing with a :not([value=""]) selector, right? I'll try it out.

> Can we hide that from VoiceOver since this is a purely visual reason?

No, for attrs with identical semantics like @required and @aria-required, the host language attribute wins if there is a conflict, so <input required aria-required="false"> is still required.

[James Craig]

The :not([value=""]) selector doesn't work as I had hoped. 

Even if I set an initial empty value via el.value=""; or el.setAttribute("value","");, the attribute does not stay in sync. I thought value was a reflected attribute, but it appears the DOM attribute is just to set the default value of the WebIDL attribute.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-value

[James Craig]

The CSS4 selector :not(:placeholder-shown) is the right one to use, but WebKit does not recognize it yet (I filed bug 118162). I think it looks okay with the change (currently only white when focused), and it should should match the previous style (white when focused or non-empty) once WebKit supports the new selector. I'll upload a diff for review.

[James Craig]

Created attachment 205654 [details]
patch

[WebKit Commit Bot]

Comment on attachment 205654 [details]
patch

Clearing flags on attachment: 205654

Committed r152199: <http://trac.webkit.org/changeset/152199>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.