search

cc-archive / cccatalog-frontend

[PROJECT TRANSFERRED] CC Search is a search tool for CC-licensed and public domain content across the internet.
https://github.com/WordPress/openverse-frontend
MIT License
163 stars 196 forks source link

Proper ordering of <h> tags in the pages #1118

Closed ayanchoudhary closed 4 years ago

ayanchoudhary commented 4 years ago

Problem

We need to have a proper ordering of the <h> tags. Currently, we have an <h5> tag in the footer and an <h1> or <h2> tag in the page. Ideally to satisfy accessibility requirements we need to have the <h> tags in a definite order i.e. an <h5> tag should have preceding <h1> ... <h4>tags.

Additional context

This is actually reducing our accessibility scores by quite a bit.

Implementation

Aakash2408 commented 4 years ago

Hey @AyanChoudhary , @kgodey can you explain a bit more what changes we need in tags?

ayanchoudhary commented 4 years ago

@Aakash2408 The a11y requirements state that we need to have a proper hierarchy of h tags, but most of our pages only have an <h1> or at most have a level hierarchy till <h2> tags. We currently have an <h5> tag in our footer here.

What we need to do is change the <h5> to a div/span while maintaining the <h5> styling. Maybe this recent change in vocabulary would help

Aakash2408 commented 4 years ago

@AyanChoudhary so we need to change every tag into any div or span but keeping the styling like font size keeping the same?

ayanchoudhary commented 4 years ago

No, just the <h5> in the footer needs to be changed.

Aakash2408 commented 4 years ago

ok ! @AyanChoudhary Can I take this?

ayanchoudhary commented 4 years ago

Sure! Go ahead 👍

Aakash2408 commented 4 years ago

@AyanChoudhary can you kindly tell me the location of code I mean in which branch it is-- develop or master and where?

rochisha0 commented 4 years ago

@Aakash2408 develop is the main branch.

Aakash2408 commented 4 years ago

No, just the <h5> in the footer needs to be changed. https://github.com/creativecommons/cccatalog-frontend/blob/develop/src/components/FooterSection.vue Line 150 .It looks this is the only h5 in the footer

Aakash2408 commented 4 years ago

Hey @rochisha0 @AyanChoudhary @kgodey When I try to run the project locally after npm install and when I run the command npm run dev Screenshot from 2020-08-18 15-04-57 Do anyone have any idea what is happening?

rochisha0 commented 4 years ago

Try merging it with the upstream and repeat the process @Aakash2408

ayanchoudhary commented 4 years ago

@Aakash2408 try removing node_modules and re run npm install that should fix it

Aakash2408 commented 4 years ago

@AyanChoudhary @kgodey kindly review the Pull Request