feat(#2812): Updated footer to accept slotted content

[ArakTaiRoth]

Before (the change)

Previously the only elements allowed in the Nav and/or Meta section of the Footer, were <a>. The story called to also allow <goab-link>.

After (the change)

Now, anything is allowed, as the elements for both Nav and Meta are full on slots, just like GoabContainer or GoabAccordion. However <a> and <goab-link> tags are given a bit more with some CSS help to help them look proper in the Footer with nothing needed on the users' end.

In addition, this shouldn't affect anyone's current work, as all they're work should continue to look and act the exact same.

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

Use the docs PR for Footer for both Angular and React. Also, I would highly recommend testing this out in alternative situations, or putting together your own footers, to test that yes all current use of the Footer should still work as intended, and that the slots also continue to work as intended.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-08-14 23:54 UTC

[github-actions]

Preview removed

All preview folders cleaned from gh-pages branch.

[twjeffery]

@ArakTaiRoth I did a full pass on this, looks pretty good, just a couple things:

• The footer nav link spacing comes out at 12px, and #2697 asks for 16px. It's the new slotted rule in FooterNavSection. We just need to make sure that goes back to 16px before this goes in.
• I think this one is breaking. The component used to give back a ul with list items and now it gives back whatever gets slotted in. So a test looking for a footer li stops matching, and screen readers won't announce them as a list anymore. Let's block the story for now.

[ArakTaiRoth]

@ArakTaiRoth I did a full pass on this, looks pretty good, just a couple things:

• The footer nav link spacing comes out at 12px, and Footer navigation links incorrect spacing when more than one column #2697 asks for 16px. It's the new slotted rule in FooterNavSection. We just need to make sure that goes back to 16px before this goes in.
• I think this one is breaking. The component used to give back a ul with list items and now it gives back whatever gets slotted in. So a test looking for a footer li stops matching, and screen readers won't announce them as a list anymore. Let's block the story for now.

@twjeffery I fixed the spacing issue if you can confirm? Regarding setting it to blocking, I don't think the screen reader thing is an issue. They will still be read out as links, and can still be navigated as links, I don't believe having them read out like a list is a problem. But yes, you are correct that any tests that target <ul> and <li> will now break, though I think that should be few and far between, as they never had control over those elements, they should've added things like ID's and classes to the <a> tags and that will still be targetable as normal.

[twjeffery]

@ArakTaiRoth Spacing looks good, thanks. Fair enough on the list, I think you're right that it isn't a problem. And agreed the ul and li were never really theirs to target. Let's keep it as a standard release.