Fix 2746: Add 'skip to content' styles

[bimbolabuari]

Description of Issue

Screen readers tend to announce all of the links on the page to the user, in order to help with accessibility to bypass parts of each page, for example, navigation links in the mode-bar, filter-bar in the toolbar and get to main content, skip to content is needed.
Skip to content styles provides help with the positioning of the skip to content link, adding visibility, font properties, border properties.

Proposed Solution

Skip to content styles is implemented in the upper left corner that says “Skip to Content.”, It is hidden and then brings into view when it is focused or active. It's the first thing that appears after the page is being loaded and tabbed on, it skips to the first postcard which is the most important of the page on the data view. it is only visible when tabbed on importantly for screen-readers only and hiding the skip-to-content link to everybody else.

Testing

The testing was done manually by tabbing on the page which in turn activates the skip to content button as shown in the screenshot section below. The gulp test command was run to make sure no test is broken/affected by the changes.

Testing checklist

• I certify that I ran my checklist

Post views

• Go to data posts
• Tab on page
• "Skip to content" will be visible on top left side
• Tab on "skip to content" button
• Focus is on "skip to content" link
• Press tab or space bar
• Focus is on first post card

Screenshots

Current	Proposed changes

Fixes ushahidi/platform#2746

Ping @ushahidi/platform @Angamanga @rowasc

[AmTryingMyBest]

QA'd, passes. 👍