Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Refactor <p> and <h5> in settings to improve accessibility

See original GitHub issue

Bug Description

Currently we have components that use <p> and <h5>s incorrectly. An example is here: https://github.com/google/site-kit-wp/pull/1410#discussion_r424722296, but it’s not exhaustive; there are several components that take this approach to displaying data, where what is marked up as a Paragraph is really a Heading, and vice-versa.

This is problematic for accessibility and semantic reasons, and shouldn’t be this way. 😄 We should refactor these components so they are marked-up accordingly. If the visual style of these components makes sense as-is, then the markup should be changed but the style largely preserved. (I’m not sure that’s the case though.)

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Components should use <h*> tags for headings and <p> for the content related to that heading, not the other way around.
<h*> headings should precede the content they are describing, not come after the paragraph that relates to them.
Visual appearance should be unmodified.

Implementation Brief

Swap h5 and p tags in the following files:
- assets/js/modules/adsense/settings/settings-view.js
- assets/js/modules/analytics/settings/settings-view.js
- assets/js/modules/tagmanager/setup.js
In assets/sass/components/settings/_googlesitekit-settings-module.scss make any required CSS changes to the .googlesitekit-settings-module__meta-item-type class selector to ensure that there is no visual change.
Finish and merge #1579
Confirm that the VRT tests pass.

QA Brief

Changelog entry

Fix accessibility issues in Site Kit settings due to semantically incorrect tag usage.

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

aaemnnosttvcommented, May 29, 2020

IB ✅

@ahmedkrmn - you can start storybook with npm run storybook 😄 - you may want to keep an eye on this issue before starting on this as it may be done by someone on our team.

0reactions

cole10upcommented, Jun 5, 2020

Tested

Built and installed latest develop SK. Activated each module.

Ran a series of regression tests around each module confirming visual appearance is unmodified.

Passed QA ✅