Accessible CookieYes

Easily manage and reuse CookieYes accessibility improvements in Yard projects.

✅ Getting started

Step 1: Install @yardinternet/a11y-cookie-yes

The recommended installation method is NPM. Install the latest version by running the following command:

npm install --save @yardinternet/a11y-cookie-yes

Step 2: Initialize A11yCookieYes

import A11yCookieYes from '@yardinternet/a11y-cookie-yes';

document.addEventListener( 'DOMContentLoaded', function () {
   new A11yCookieYes( {
     googleConsentMode: true,
} );

Step 3 (optional): Import CSS files

The package itself fixes a lot of styling issues with CookieYes, which is why it's recommended to import it as well. Optionally, you can pass extra native CSS variables to overwrite the default styling.

@import '~@yardinternet/a11y-cookie-yes/dist/a11y-cookie-yes';

[data-cky-tag='video-placeholder'],
.cky-btn-revisit-wrapper,
.cky-consent-container,
.cky-modal {
 --a11y-cookie-yes-primary-color: #{theme-color( 'primary' )};
}

Depending on your primary color, you might need to add a border if your footer has the primary color.

.cky-btn-revisit-wrapper {
 border: 1px solid color-yiq( theme-color( 'primary' ) );
}

Step 4 (optional): Add embedBlocker a11y script

Depending on your project setup, you might need to add the embedBlocker script. We usually define ours in app/Actions/Gutenberg.php.

 /**
  * Change YouTube block embed URL to:
  * 1. Include youtube-nocookie
  * 2. Add disablekb=1 to disable YouTube keyboard shortcuts for a11y
  * 3. Add ?keyboard=0 to disable Vimeo keyboard shortcuts for a11y
  */
 public function changeEmbedURL(string $blockContent, array $block): string
 {
  if ("core/embed" !== $block['blockName']) {
   return $blockContent;
  }

  $blockContent = str_replace('youtube.com', 'youtube-nocookie.com', $blockContent);
  $blockContent = str_replace('?feature=oembed', '?feature=oembed&disablekb=1', $blockContent); // YouTube
  $blockContent = str_replace('dnt=1', 'dnt=1&keyboard=0', $blockContent); // Vimeo

  return $blockContent;
 }

And then call it in our app/filters.php

// Embeds
Hook::filter('render_block', 'App\Actions\Gutenberg@changeEmbedURL', 10, 3);

⚙️ Changing options

List of current styling options that can be overwritten:

	--a11y-cookie-yes-primary-color: #{$ckDefaultColor};
	--a11y-cookie-yes-border-radius: 5px;
	--a11y-cookie-yes-btn-font-size: 1rem;
	--a11y-cookie-yes-btn-font-size-banner: 0.95rem;
	--a11y-cookie-yes-btn-primary-bg: var(--a11y-cookie-yes-primary-color);
	--a11y-cookie-yes-btn-primary-txt-color: #fff;
	--a11y-cookie-yes-btn-primary-border-color: var(--a11y-cookie-yes-primary-color);
	--a11y-cookie-yes-btn-secondary-bg: transparent;
	--a11y-cookie-yes-btn-secondary-txt-color: var(--a11y-cookie-yes-primary-color);
	--a11y-cookie-yes-btn-secondary-border-color: var(--a11y-cookie-yes-primary-color);
	--a11y-cookie-yes-blocked-embed-bg: #f2f2f2;
	--a11y-cookie-yes-vimeo-icon-font-family: 'Font Awesome 6 Brands';
	--a11y-cookie-yes-vimeo-icon-color: #01adef;
	--a11y-cookie-yes-vimeo-icon-size: 5rem;
	--a11y-cookie-yes-vimeo-icon-unicode: '\f27d';

👷‍♀️ Package development

This package is built with Vite (library mode) via @yardinternet/vite-config. It outputs ESM only, so it can't be used with require.

1. Run pnpm install inside this project.
2. Run pnpm start to build in watch mode.
3. To test it inside a project/theme, link this folder from the consumer:

   # run inside the consumer project
   pnpm link ../path/to/a11y-cookie-yes

   Undo it later with pnpm unlink ../path/to/a11y-cookie-yes (or pnpm install to restore the published version).

🚀 How to publish

1. Go to releases of the package and click on "Draft a new release"
2. Click "Choose a tag", type the corresponding version and press Enter. Add a title and description for the release.
3. Click "Publish release"

The Github Workflow release-package.yml will run whenever a release is created in this repository. If the tests pass, then the package will be published to Github packages.

About us