1448358 - Fix accessibility issues of migration, context menu, sections

Status: NEW

(Firefox :: New Tab Page, enhancement, P3)

Description

[Ed Lee :Mardak]

From https://github.com/mozilla/activity-stream/issues/2998

From #2874 (comment):

    Potential semantics improvements:
        .manual-migration-container would ideally be a section (like top sites), this way screen readers can jump between sections (right now it's just a div). It would be even better if it had an aria-label describing the section.
        top sites section should ideally have aria-labelledby attribute pointing to the h3.section-title (but via id)
        h3 seems to be a hierarchically invalid header (no preceding h1/h2 that I can find)
    .context-menu-button:
        main issue is that it's a hover only element. It's not discoverable unless keyboard focus shifts to it from the link. I would suggest making it visible when focus is on the top site so there is no surprise navigation to a suddenly visible element. I don't think there's no focus specific styling for the button at the moment.
        .sr-only span inside (afaik used only for text) could be replaced with aria-label or title attribute on the button itself
        button should make use of aria-haspopup, aria-controls and aria-expanded attributes
        looks like when activated focus styling moves onto the preview link
        when tab away from the menu focus indication disappears, though it is probably still on the button that is now hidden
        arrow up/down is also expected for menus like that
    Pocket section
        section should ideally have aria-labelledby attribute pointing to the h3.section-title (but via id)