1069367 - "Header" should be below in card in markup

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System::Window Mgmt, defect)

Description

[Eitan Isaacson [:eeejay]]

The header appears below the card in cards view, but in the markup it is above.

This is confusing for the screen reader user since the swipe order contradicts the spatial order.

Comment 1

[Pete Chambers]

I would like to be assigned this bug if possible, where do I start?

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Pete Chambers from comment #1)
> I would like to be assigned this bug if possible, where do I start?

Yes, please :). For your first steps you should check out:
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/card.js
and see how the markup is structured there. What we want is the markup to be consistent with presentation (where the header is ahead of screenshot/icon view).

Thanks!

Comment 3

[Pete Chambers]

First of all thanks for assigning me to the bug, I just had a look at how it is structured and got a good idea of what is included however I'm a little confused as to where the header is located in the file?

Comment 4

[Pete Chambers]

Not to worry I think I've located it, I think it may have been because I was viewing it on my mobile device at first! :)

Comment 5

[Pete Chambers]

I'm really sorry Yura but I didn't feel like I could help with this bug and have looked into another bug. Sorry again

Comment 6

[jobara]

Yura, is this still an issue? The screenshotView class is at the top of the markup. https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/card.js#L73-L93

Unfortunately, I can't seem to get the simulator to run and don't have a device to test this out to be sure.

Comment 7

[jobara]

Attachment: Moved the markup for the header to come before the screenshot. While this had been done with styling, it is more semantic it this way in the markup as well.

Comment 8

[Yura Zenevich [:yzen] (please use "needinfo")]

Comment on attachment 8507331 [details] [review]
Moved the markup for the header to come before the screenshot. While this had been done with styling, it is more semantic it this way in the markup as well.

This looks good from a11y point of view. The order of the header and the screen shot is now correct.

Justin, could you please rebase your PR to re-trigger the tests, there were some failing tests (though unrelated).

Thanks!

Comment 9

[jobara]

Yura, I've rebased the PR and pushed up.

Comment 10

[Yura Zenevich [:yzen] (please use "needinfo")]

https://treeherder.allizom.org/ui/#/jobs?repo=gaia&revision=8a64787109a492dd8ef0febd11cb54578c44a34e

Comment 11

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8507331 [details] [review]
Moved the markup for the header to come before the screenshot. While this had been done with styling, it is more semantic it this way in the markup as well.

LGTM

Comment 12

[Yura Zenevich [:yzen] (please use "needinfo")]

https://github.com/mozilla-b2g/gaia/commit/e09e1734ad523cf63351a28f6f84454319349fbe

Thanks for the PR!