Add Underline and outboundlink to header.

Yoast / yoast-components

Accessible React components by Yoast

GNU General Public License v3.0

21 stars 6 forks source link

Add Underline and outboundlink to header. #798

Closed Dieterrr closed 5 years ago

Dieterrr commented 5 years ago

Summary

This PR can be summarized in the following changelog entry:

Relevant technical choices:

Made link on Courses card header outbound and added underline on header title.

Test instructions

This PR can be tested by following these steps:

Yarn link yoast-components in this branch and build yoastseo.
Go to the courses page click on the header (image or title) and see the link opens in a new tab.
Hover over the header and see the title gets an underline.

Fixes #11906

afercia commented 5 years ago

CR 👍

Pushed a few changes:

use empty alt attributes for the images, as recommended in https://www.w3.org/TR/WCAG20-TECHS/H2.html the link text is already announced, no need to repeat it in the imate alt
added the courses overview in the standalone examples, under the "Components" tab
RTL styles for the checkmark icon
CSS clean up and standardize the buttons effect on :active
use rel={ null } to omit the rel="noopener noreferrer" attributes, as these are links that point to yoast.com

To test the RTL styles:

go in the standalone app: yarn start and go to http://localhost:3333/
go in the "Components" tab and press the "Change language direction" button
verify the checkmarks position is inverted and the Cards look OK

IreneStr commented 5 years ago

Acceptance 🚧

The underlinings in safari are blue instead of pink/purple:
UX question @afercia @hedgefield: the title is also underlined when the image (not the title itself) is hovered. Is that intentional/desirable?

hedgefield commented 5 years ago

I suppose that's okay as they both lead to the same place. But whether it's intentional, I don't know.

afercia commented 5 years ago

Last commit:

fixes hover style in Safari
resets the blue box-shadow while clicking

IreneStr commented 5 years ago

Acceptance 👍 I've pushed one minor change to prevent the blue box-shadow after clicking in Chrome.

afercia commented 5 years ago

I've pushed one minor change to prevent the blue box-shadow after clicking in Chrome.

Worth noting this change also removes the focus style when using the keyboard: the only indicator now is the underline on the text, which is not great but at least it's something. The persistence of the style "after clicking" is expected, as at that point the link is no more active but it does have focus.

We should try to avoid to change the focus style when the change is not an accessibility improvement 🙂