At 200% zoom, broken underline on Read about our approach text in the Footer

[jtart]

Describe the bug
When the page is zoomed in to 200%, in Chrome at some breakpoints - When you hover/focus on ‘Read about our approach…’ the underline covers some of the text.

This issue can also be seen on iPhone 5 when using VoiceOver (some users use a keyboard with a mobile device).

To Reproduce
View on Chrome in desktop, and on iPhone 5, view a page at 200% zoom, and view the underline covering some of the text in the Read about our approach... in the Footer.

Expected behaviour
Underline should not cover text, likely should discuss with UX about how it should look.

Desktop (please complete the following information):

• Chrome

Smartphone (please complete the following information):

• iPhone 5

[BogdanDogaru]

Blocked on #828 and #616

[sareh]

Still valid issue:

Screen Shot of footer with 200% zoom

Note: even without zooming, if you have a small viewport, the underline overlaps the text below:

Screen Shot of footer with 100% zoom, in a small viewport (which allows link to flow over multiple lines)

Should be raised with @nataliesmart from UX.

[sareh]

As a result of discussing with @greenc05 & @nataliesmart, it was discussed to change the hover/focus to use text-decoration: underline instead of the border bottom.

Here's the impact of before/after when changing this in the browser:

Current implementation with border-bottom:

With text-decoration: underline

[sareh]

Added label simorgh-core-stream since all front-end components that are shared between Articles and Front Pages are to be addressed by Simorgh Core.

[jamesbhobbs]

Covered here BBC-archive/psammead#397