EWC footer-links Component

Overview

The ewc-footer-links component provides a standardized footer for Eurostat web applications, ensuring a consistent visual identity across all Eurostat digital products. It includes a feedback link that allows users to share their comments about the application, as well as links to Cookies, Privacy policy, and Legal notice, each pointing to the corresponding official Eurostat page.

Selecting the Accessibility link opens a modal containing the accessibility statement. When the page includes a banner, the modal appears beneath it; otherwise, it expands to cover the full page.

Structure

To be comply with accessibility standards, the ewc-footer-links must always be contained in a footer element

<footer>component</footer>

Features

• Responsive design
• Accessibility compliant
• Accessibility overlay behavior
  • If a banner is visible, the overlay is displayed below the banner. If the page needs to be scrolled to reach the footer, the overlay opens below the banner (scroll up), then go back to footer position (scroll down)
  • If the page has no banner, the overlay covers the full height
• Optional standard link for 'Accessibility'
• Feedback link sends an email to Eurostat support (not configurable)
• Non-customisable links to EC pages for 'Cookies', 'Privacy policy', 'Legal notice'

Accessibility statement displayed in a modal

Set the URL of the accessibility statement in the 'a11y-modal-url' attribute. The modal will display an iframe containing the statement.

If the page includes a banner, assign an id to the banner or the header and pass it to the component using the a11y-container attribute. The component uses this id to calculate the banner height and position the modal below.

If the page/tool displays a banner:

<ewc-banner id="main-banner"></ewc-banner>

or

<header id="main-banner">
  <ewc-banner></ewc-banner>
</header>

Then the element can be used like this

<footer>
  <ewc-footer-links
    a11y-container="main-banner"
    email="[email protected]"
    subject="This is the eMail's subject"
    a11y-modal-url="iframe url">
  </ewc-footer-links>
</footer>

If the page/tool doesn't display a banner:

<footer>
  <ewc-footer-links
    email="[email protected]"
    subject="This is the email's subject"
    a11y-modal-url="iframe url">
  </ewc-footer-links>
</footer>

Accessibility statement displayed as a link

If a standard link is needed instead of a modal, use the a11y-link-url attribute:

<footer>
  <ewc-footer-links
    email="[email protected]"
    subject="This is the email's subject"
    a11y-link-url="iframe url">
  </ewc-footer-links>
</footer>

URL statement

The URL statement is provided by Web Content Team.

For statement in the modal

The URL displays a specific link for Eurostat website with only the webcontent visible, i.e

https://ec.europa.eu/eurostat/web/accessibility-statements/business-sector-profile?p_p_id=com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_EYLXnStgyxM8&p_p_state=POP_UP

The URL is provided by the content team.

Standard link

The URL displays the page within Eurostat website

https://ec.europa.eu/eurostat/web/accessibility-statements/business-sector-profile

API

All attributes are listed below.

| Attributes | Default value | Mandatory | Customisation | |-------------------|---------------|------------|---------------| |email | [email protected] | yes | no | |subject | Eurostat%20support | yes | no | |feedback | Feedback | yes | no | |feedback-url | mailto:[email protected] | yes | no | |cookies | Cookies | yes | no | |cookies-url | https://commission.europa.eu/cookies-policy_en | yes | no | |privacy-policy | Privacy policy | yes | no | |privacy-policy-url | https://commission.europa.eu/privacy-policy-websites-managed-european-commission_en | yes | no | |legal-notice | Legal notice | yes | no | |legal-notice-url | https://commission.europa.eu/legal-notice_en | yes | no | |accessibility | Accessibility | yes | no | |a11y-modal-url | no : must be accessibility statement URL for iframe | yes | yes | |a11y-container | no : must be id of the banner | no | yes | |a11y-link-url | no : must be accessibility statement URL | yes* | yes |

* Mandatory only when using link mode.

Changing these attributes at runtime updates the corresponding links.

Usage

Installation

npm install @ewc-lib/ewc-footer-links

Import the component in your application:

// Using ES modules
import "@ewc-lib/ewc-css-common/custom-props.css";
import '@ewc-lib/ewc-footer-links';

If you are using Vue framework, please update your vite.config.js

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('ewc-')
        }
      }
    })
  ]
})

Showcase

All behaviors can be simulated in the showcase:

https://ec.europa.eu/eurostat/cache/test/ewc-showcase/ewc-footer-links/2.2.16-beta/

Notes

Accessibility

The component is designed with accessibility in mind:

• Keyboard navigable element
• Sufficient color contrast

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

European Union Public License (EUPL)

Changelog

• 2.2.16-beta

  • fix accessibility issues

• 2.2.15-beta

  • fix break point for mobile responsiveness

• 2.2.13-beta

  • fix loading of the scrolling behavior
  • update of the readme files

• 2.2.12-beta

  • update of the behavior of the overlay
  • update of the readme files

• 2.2.11-beta

  • fix and update of the readme files

• 2.2.10-beta

  • add scrolling with arrow in the iframe
  • add specific id "a11y-statement" in iframe to avoid potential conflict with other iframes

• 2.2.9-beta

  • fix color links and states

• 2.2.8-beta

  • revert css-common to 0.1.0 and fixed visited link color in css file of the component

• 2.2.7-beta

  • accessibility
  • add optional attribute to display a standard link

• 2.2.6-alpha

  • fix feedback icon position
  • adaptation to vue framework

• 2.2.3-alpha

  • add setter for URL
  • add setter for banner id
  • add a11y statement overlay when clicking on 'Accessibility'

• 2.2.2-alpha

  • remove underline style on links (standalone links)
  • fix active style on feedback link
  • fix feedback icon position

• 2.1.1-alpha

  • correct mistake in usage examples
  • increase encapsulation

• 2.1.0-alpha

  • add setter, docu and usage examples