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

[markcaron]

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

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]

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?

[markcaron]

@bennypowers we could do the CSS animation to limit CLS.