Move donate-page banner into a footer landmark region

[coseeian]

The "donate-page" banner (and its "hide banner" button) was previously not contained within any landmark region, which could hinder navigation for screen reader users.

To address this accessibility issue, the banner has been moved into a <footer> landmark region, with aria-label attribute to distinguish it with the main <footer>. This change ensures that all interactive elements are contained within appropriate HTML5 landmarks, improving both accessibility and navigability.

For additional details, see: issue 928
Additional reference: Labeling (multiple) landmarks | MDN

[ksen0]

I'm sorry it's taken me a while to get to this!

When I test this, I find that the design no longer works. Instead of being fixed to the bottom of the screen, it is part of the footer in a way not intended by the design.

It is it possible to include it in an adequate landmark but make sure that it is available on the site as intended in the design, or, to be honest, I think it would be alright to remove the banner completely.

It has limited discoverability in general, and is not too useful to draw attention. So it if is also an accessibility issue, I don't think there is a strong argument to keep it. cc @davepagurek does that sound reasonable? To stop using the banner entirely and rather focus on the navigability of the other links on the site?

[davepagurek]

This is the thing along the bottom of the page right? Currently we rely on that when the Processing Foundation is seeking donations and when we have other events, do we have an alternative spot in mind for those? Maybe an additional section on the home page?

[coseeian]

Hi @ksen0 and @davepagurek, thank you for the feedback. I apologize for missing the layout regression in the previous attempt.

I've updated the PR with a new approach. I believe we can satisfy both accessibility and the design by wrapping the banner in a new <footer> landmark, instead of nesting it inside the existing site footer. We can use aria-label attribute to distinguish it with the main site footer. Reference: Labeling (multiple) landmarks | MDN

This is the landmark rotor in Mac's VoiceOver, after applying the change:

This allows the banner to maintain the sticky positioning exactly as it is, while making it navigable via landmarks for assistive technology.

The only concern remains is the i18n of aria-label. Since the banner content is currently English-only, I think we can proceed with an English label for now. We can integrate the i18n system in future when the banner needs to be localized.

[coseeian]

I've come up with a new label, 'sticky', which remains static; this allows us to decouple the aria-label from the banner configuration.