1014076 - Cannot change search search provider in about:newtab

Status: RESOLVED DUPLICATE of bug 1032324

(Firefox :: New Tab Page, defect)

Description

[Florens Verschelde :fvsch]

Attachment: Proposed mock-up for text fall-back

Bug 962490 introduced a search box in the New Tab page. This search box has an accompanying search provider icon of 65x26px, which can be clicked to display the list of search providers (<xul:panel id="newtab-search-panel">).

The current implementation (in Nightly) of this button has 2 main issues:

1. It’s broken by design, as it is not displayed in several situations, including some that will not be fixed through localization.
2. It’s implemented in a way that is not accessible to screen readers and for keyboard use.

MAIN DESIGN ISSUE:

The current design dictates using a logo image (of 65x26px), built into Firefox. Currently there are missing logos (Bug 1006203) for mainstream search providers, and also for local search providers. Finally, nothing is planned for adding logos for user-installed or user-defined search providers.

This means that this newtab page will ship with missing logos:
1. For localized versions. (Quite likely that localizers won’t have all images ready for the 31 stable.)
2. For user-installed and user-defined search providers. (As far as I know, nothing is planned to remedy this.)

In the current design, when there is no logo the search provider’s name is used as the text input’s placeholder text. This means no button for switching search providers. Meaning a missing or, worse, brittle feature (sometimes it’s there, sometimes it’s not).

We need a design and implementation change to remedy this.

ACCESSIBILITY ISSUES:

- The current button is a DIV, which can’t receive keyboard focus.
- When the button is clicked, the XUL list doesn’t receive focus, or doesn’t receive focus in a way that allows selecting a search provider with the keyboard (and probably using a screen reader).
- Logos are displayed with a background-image. There is no text content in the DIV which can be surfaced to screen readers. Logos should be <img src="logo.png" alt="Search Provider Name"> instead.

DESIGN SOLUTION:

A simple solution would be to use a text label *outside* of the text input, that could work as search provider switcher.

This could be used to fix some of the accessibility issues as well.

<button type="button" id="newtab-search-logo">
  <img src="{logo url}" alt="{Search Provider Name}">
</button>

(A <label for="…"> might be better, I’m not sure.)

If there is no logo image, Firefox will display the alt text. (Alternatively we could replace the <img> with a <span> or a text node, but I’m not sure there is a point. The alt attribute is designed for this.)

I’m attaching a mock-up showing a text label fallback.

DESIGN DETAILS:

- Affordance: I worry that users will not know they can click the logo to change search engines. Perhaps a small visual indicator would be necessary? At the very least an indicator on hover and focus states?
- Perhaps put the search engine logo on top in one column mode, so that the text input is not too small?
- Currently the XUL drop-down has a look that is a bit far from either the dropdown for the toolbar search field or the new dropdown style introduced with Aurora. The text is washed out gray instead of dark, there are unnecessary separators making it harder to parse, and the background color is off.
- Finally I’m noticing that logos are not left-aligned to tiles below as specified. A small left margin (close to margin-left:-4px) fixes this.

Comment 1

[Florens Verschelde :fvsch]

Attachment: Mock-up of visual changes to the drop-down

This is what the search engine selection drop-down would look like if it matched the style of “Aurora” dropdowns.

Comment 2

[Ed Lee :Mardak]

There's a few issues in this bug report that might have bugs filed already:

1) providers list not shown - not sure if this is blocked on 1006203 ?
2) look/feel not quite right - bug 1011610 ?
3) accessibility issues

Comment 3

[Florens Verschelde :fvsch]

Thanks for your help.

1. I can edit comment #0 down to limit it to the button design part, and post it to bug 1006203.
2. I posted in bug 1011610
3. Found nothing for the accessibility issues, which makes sense since the search field in about:newtab is new. I can file a new bug for the accessibility part, or use the current one. What would be best?

Comment 4

[Florens Verschelde :fvsch]

Attachment: Search engine picker with corrective stylesheet (a bit hackish)

Comment 5

[Florens Verschelde :fvsch]

Attachment: Corrective stylesheet (hackish since applied to the existing elements)

This is a userstyle I wrote and use with Stylish in order to make the search engine picker usable for myself. (I have 10 search engine providers in my main Firefox profile, none of them show a logo, and even with more logos provided by localization teams half of them would remain logo-less.)

I’m using the existing elements and interactions, the only thing I did is make the “logo” container visible at all times, with fallback text.
Attachment 8428390 [details] shows how it renders.

Comment 6

[Mike Kaply [:mkaply]]

Why would you not just use the favicon when there is no image available?

Comment 7

[Florens Verschelde :fvsch]

(In reply to Mike Kaply (:mkaply) from comment #6)
> Why would you not just use the favicon when there is no image available?

Because it’s just a userstyle, so I can’t access the favicon.
Of course a real patch could use the favicon. I’m working on one.

Comment 8

[Bryan Clark (DevTools PM) [:clarkbw]]

Boriss, could you comment on this?  In the situation where an image doesn't exist for a search engine you can't use chooser on this page and many of the other localizations will be missing images for a while.

Comment 9

[Florens Verschelde :fvsch]

For the record, I put a rough patch in Bug 1011610 which attempts to fix this as well as the popup styling. The result looks like: Attachment 8429442 [details].

I’d be happy to submit a more specific patch implementing whatever design (for “fallback” cases) is eventually decided on.

Comment 10

[Bryan Clark (DevTools PM) [:clarkbw]]

joining this with bug 1032324