Feat: add cookieTable.caption for better a11y (ref. #485)

orestbida · Mar 25, 2023 · 35b3457 · 35b3457
1 parent ee33d54
commit 35b3457
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 4 deletions.
diff --git a/demo/demo_gtm/cookieconsent-init.js b/demo/demo_gtm/cookieconsent-init.js
@@ -52,6 +52,7 @@ CookieConsent.run({
 
  language: {
  default: 'en',
+ rtl: 'en',
 
  translations: {
  en: {
@@ -85,6 +86,7 @@ CookieConsent.run({
  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  linkedCategory: 'analytics',
  cookieTable: {
+ caption: 'Cookie tableeee',
  headers: {
  name: 'Cookie',
  domain: 'Domain',

diff --git a/dist/cookieconsent.css b/dist/cookieconsent.css
diff --git a/dist/cookieconsent.esm.js b/dist/cookieconsent.esm.js
diff --git a/dist/cookieconsent.umd.js b/dist/cookieconsent.umd.js
diff --git a/dist/css-components/preferences-modal.css b/dist/css-components/preferences-modal.css
diff --git a/src/core/modals/preferencesModal.js b/src/core/modals/preferencesModal.js
@@ -156,6 +156,7 @@ export const createPreferencesModal = (api, createMainContainer) => {
  sCurrentCategoryObject = sLinkedCategory && state._allDefinedCategories[sLinkedCategory],
  sCookieTableData = section.cookieTable,
  sCookieTableBody = sCookieTableData?.body,
+ sCookieTableCaption = sCookieTableData?.caption,
  sCreateCookieTable = sCookieTableBody?.length > 0,
  hasToggle = !!sCurrentCategoryObject,
 
@@ -322,6 +323,13 @@ export const createPreferencesModal = (api, createMainContainer) => {
  const thead = createNode('thead');
  const tbody = createNode('tbody');
 
+ if(sCookieTableCaption) {
+ const caption = createNode('caption');
+ addClassPm(caption, 'table-caption');
+ caption.innerHTML = sCookieTableCaption;
+ table.appendChild(caption);
+ }
+
  addClassPm(table, 'section-table');
  addClassPm(thead, 'table-head');
  addClassPm(tbody, 'table-body');

diff --git a/src/scss/core/components/_preferences-modal.scss b/src/scss/core/components/_preferences-modal.scss
@@ -575,6 +575,12 @@ $service-toggle-knob-icon-width: 1.7px;
  font-size: .9em;
  }
 
+ .pm__table-caption {
+ border-top: 1px solid var(--cc-cookie-category-block-border);
+ text-align: start;
+ }
+
+ .pm__table-caption,
  .pm__table-head > tr{
  font-weight: 600;
  color: var(--cc-primary-color);
@@ -589,6 +595,7 @@ $service-toggle-knob-icon-width: 1.7px;
  }
  }
 
+ .pm__table-caption,
  .pm__table-th,
  .pm__table-td{
  padding: 0.625em;

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -299,6 +299,12 @@ declare namespace CookieConsent {
  }
 
  interface CookieTable {
+
+ /**
+ * Table caption
+ */
+ caption?: string,
+
  /**
  * Define the table headers (columns).
  */