Fix some accessibility issues in image editing.

Fix some accessibility issues in image editing.

- Fix tab order on editing tool bar by swapping containers.
- Add background color for focused buttons on editing tool.
- When a editing tool is shown, the first input element should be focused.

BUG=652352
TEST=manual
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/463197f1254e1fa220a24f8d2229b879be85bfc4
Cr-Commit-Position: refs/heads/master@{#423615}

[fukino, 2016-10-06 07:31:18]

Description was changed from

==========
Fix some accessibility issues in image editing.

- Fix tab order on editing tool bar by swapping containers.
- Add background color for focused buttons on editing tool.
- When a editing tool is shown, the first input element should be focused.

BUG=652352
TEST=manual
==========

to

==========
Fix some accessibility issues in image editing.

- Fix tab order on editing tool bar by swapping containers.
- Add background color for focused buttons on editing tool.
- When a editing tool is shown, the first input element should be focused.

BUG=652352
TEST=manual
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[fukino, 2016-10-06 07:31:51]

The CQ bit was checked by fukino@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-10-06 07:32:06]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-10-06 07:58:14]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-10-06 07:58:14]

Dry run: This issue passed the CQ dry run.

[fukino, 2016-10-06 08:07:01]

fukino@chromium.org changed reviewers:
+ oka@chromium.org

[fukino, 2016-10-06 08:07:02]

PTAL

[oka, 2016-10-06 09:11:55]

lgtm

LGMT with nits.

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/css...
File ui/file_manager/gallery/css/gallery.css (right):

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/css...
ui/file_manager/gallery/css/gallery.css:846: background-color: rgba(255, 255,
255, 0.12);
Should we use 
rgba(0, 0, 0, 0.3) for consistency?
The EXIT button in the lower right corner in the edit toolbar is highlighted
with this value if focused.

https://cs.chromium.org/chromium/src/ui/file_manager/gallery/css/gallery.css?...

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/js/...
File ui/file_manager/gallery/js/image_editor/image_transform.js (right):

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/js/...
ui/file_manager/gallery/js/image_editor/image_transform.js:146: // TODO(fukino):
The loop order is not guaranteed. Fix it!
suggestion: Consider using Map.
A Map object iterates its elements in insertion order.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...

You can revert this TODO if it's not relevant to the objective of this CL (up to
you).

[fukino, 2016-10-06 14:34:30]

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/css...
File ui/file_manager/gallery/css/gallery.css (right):

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/css...
ui/file_manager/gallery/css/gallery.css:846: background-color: rgba(255, 255,
255, 0.12);
On 2016/10/06 09:11:55, oka wrote:
> Should we use 
> rgba(0, 0, 0, 0.3) for consistency?
> The EXIT button in the lower right corner in the edit toolbar is highlighted
> with this value if focused.
> 
>
https://cs.chromium.org/chromium/src/ui/file_manager/gallery/css/gallery.css?...

The background of this button is darker, so (0, 0, 0) is almost invisible.
I picked this value from Material Design button spec for dark background.
https://material.google.com/components/buttons.html#buttons-raised-buttons

(BTW, it says "Focused:12% #000000 shade over the color", but I suppose the
correct spec is "Focused:12% #FFFFFF shade over the color".)

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/js/...
File ui/file_manager/gallery/js/image_editor/image_transform.js (right):

https://codereview.chromium.org/2400613002/diff/1/ui/file_manager/gallery/js/...
ui/file_manager/gallery/js/image_editor/image_transform.js:146: // TODO(fukino):
The loop order is not guaranteed. Fix it!
On 2016/10/06 09:11:55, oka wrote:
> suggestion: Consider using Map.
> A Map object iterates its elements in insertion order.
>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...
> 
> You can revert this TODO if it's not relevant to the objective of this CL (up
to
> you).

Map can be used if tooling support works well. I'll check it later. (I heard it
used to have problems before.)
Let me keep this comment to skip one additional CL. Sorry!

[fukino, 2016-10-06 18:48:33]

The CQ bit was checked by fukino@chromium.org

[commit-bot: I haz the power, 2016-10-06 18:49:06]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-10-06 18:58:22]

Committed patchset #1 (id:1)

[commit-bot: I haz the power, 2016-10-06 18:59:56]

Description was changed from

==========
Fix some accessibility issues in image editing.

- Fix tab order on editing tool bar by swapping containers.
- Add background color for focused buttons on editing tool.
- When a editing tool is shown, the first input element should be focused.

BUG=652352
TEST=manual
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
Fix some accessibility issues in image editing.

- Fix tab order on editing tool bar by swapping containers.
- Add background color for focused buttons on editing tool.
- When a editing tool is shown, the first input element should be focused.

BUG=652352
TEST=manual
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/463197f1254e1fa220a24f8d2229b879be85bfc4
Cr-Commit-Position: refs/heads/master@{#423615}
==========

[commit-bot: I haz the power, 2016-10-06 18:59:57]

Patchset 1 (id:??) landed as
https://crrev.com/463197f1254e1fa220a24f8d2229b879be85bfc4
Cr-Commit-Position: refs/heads/master@{#423615}