search

RedHat-UX / red-hat-design-system

Red Hat's Design System
https://ux.redhat.com
MIT License
101 stars 20 forks source link

[bug] `<rh-footer>` doesn't gracefully degrade #2058

Open markcaron opened 5 days ago

markcaron commented 5 days ago

Describe the bug

There are some -lightdom.css styles that hide content when the element is not defined. This creates a broken experience when JS doesn't load.

IMO, the Footer is an important piece of navigation and access to information. Therefore, the content within the light DOM should be styled in a progressively enhanced way—like a stacked list of links at the minimum.

Maybe there's a technical challenge I'm missing?

Screenshots

image image

Steps to reproduce

  1. Go to redhat.com or rh-footer demo
  2. Disabled JS
  3. Refresh and see broken footer (hidden links and content)

Expected behaviour

Content/links aren't hidden.

Element HTML

No response

Operating System (OS)

iOS

Browser

Chrome

Additional browser or assistive technology info

No response

bennypowers commented 5 days ago

maybe we can use a css animation to reveal that content after X seconds so long as the js didn't load, but when js comes online, apply some css or a class which immediately reveals the content. WDYT?