fix(a11y): fix some accessibility issues - INNO-1831 (#1315)

* fix(a11y): fix some accessibility issues - INNO-1831 * fix tags and search page * fix event CT
ec-europa · Oct 1, 2019 · b3f4e0f · b3f4e0f
1 parent ebb27e5
commit b3f4e0f
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 776 deletions.
diff --git a/src/systems/ec/implementations/react/components/tag/src/Tag.jsx b/src/systems/ec/implementations/react/components/tag/src/Tag.jsx
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Icon from '@ecl/ec-react-component-icon';
 
-const Tag = ({ label, variant, href, className, ...props }) => {
+const Tag = ({
+  label,
+  variant,
+  href,
+  dismissButtonLabel,
+  className,
+  ...props
+}) => {
   if (!label) return null;
 
   const classNames = classnames(className, 'ecl-tag', {
@@ -26,7 +33,15 @@ const Tag = ({ label, variant, href, className, ...props }) => {
     <TagName {...tagProps} className={classNames}>
       {label}
       {!!(variant && variant === 'removable') && (
-        <TagNameIcon className="ecl-tag__icon">
+        <TagNameIcon
+          {...(TagNameIcon === 'button'
+            ? {
+                type: 'button',
+                'aria-label': dismissButtonLabel,
+              }
+            : {})}
+          className="ecl-tag__icon"
+        >
           <Icon shape="ui--close" className="ecl-tag__icon-close" size="xs" />
           <Icon
             shape="ui--close-filled"
@@ -44,13 +59,15 @@ Tag.propTypes = {
   href: PropTypes.string,
   variant: PropTypes.string,
   className: PropTypes.string,
+  dismissButtonLabel: PropTypes.string,
 };
 
 Tag.defaultProps = {
   label: '',
   href: '',
   variant: '',
   className: '',
+  dismissButtonLabel: '',
 };
 
 export default Tag;
diff --git a/src/systems/ec/implementations/react/components/tag/stories/Index.jsx b/src/systems/ec/implementations/react/components/tag/stories/Index.jsx
@@ -14,5 +14,9 @@ storiesOf('Components|Tag', module)
     <Tag label={text('Label', 'Button tag')} type="button" />
   ))
   .add('removable', () => (
-    <Tag label={text('Label', 'Removable tag')} variant="removable" />
+    <Tag
+      label={text('Label', 'Removable tag')}
+      variant="removable"
+      dismissButtonLabel="Dismiss"
+    />
   ));
diff --git a/src/systems/ec/implementations/react/templates/pages/event-agenda/examples/Default.jsx b/src/systems/ec/implementations/react/templates/pages/event-agenda/examples/Default.jsx
@@ -4,15 +4,13 @@ import React, { Fragment } from 'react';
 import Breadcrumb, { BreadcrumbItem } from '@ecl/ec-react-component-breadcrumb';
 import Card from '@ecl/ec-react-component-card';
 import Footer from '@ecl/ec-react-component-footer';
-import LanguageListOverlay from '@ecl/ec-react-component-language-list/src/LanguageListOverlay';
 import Link from '@ecl/ec-react-component-link';
 import PageBanner from '@ecl/ec-react-component-page-banner';
 import PageHeader from '@ecl/ec-react-component-page-header';
 import SiteHeader from '@ecl/ec-react-component-site-header';
 import { Timeline2, Timeline2Item } from '@ecl/ec-react-component-timeline2';
 
 import footerContent from '@ecl/ec-specs-footer/demo/data--corporate';
-import languageListContent from '@ecl/ec-specs-language-list/demo/data--overlay';
 import siteHeaderContent from '@ecl/ec-specs-site-header/demo/data--en';
 
 export default () => {
@@ -31,7 +29,6 @@ export default () => {
   return (
     <Fragment>
       <SiteHeader {...siteHeaderContent} data-ecl-auto-init="SiteHeader" />
-      <LanguageListOverlay {...languageListContent} hidden="true" />
       <PageHeader
         breadcrumb={breadcrumb}
         meta="Conference"
@@ -53,6 +50,7 @@ export default () => {
               <Card
                 meta="Discussion | 15 november 2019 | 14:30 - 18:00 | Riverside"
                 title={{
+                  level: 4,
                   variant: 'standalone',
                   label:
                     "'Working on what?' Building a Community of Innovators in Cultural Heritage",
@@ -65,6 +63,7 @@ export default () => {
               <Card
                 meta="Debate | 16 november 2019 | 14:00 - 15:30 | Auditorium"
                 title={{
+                  level: 4,
                   variant: 'standalone',
                   label:
                     'When is the future? Opportunities for innovation in Cultural Heritage',
@@ -116,7 +115,7 @@ export default () => {
 
             <div>
               <h4
-                className="ecl-u-type-heading-4 ecl-u-mb-m ecl-u-mt-none 
+                className="ecl-u-type-heading-4 ecl-u-mb-m ecl-u-mt-none
             ecl-u-bg-grey ecl-u-pa-m ecl-u-type-color-white ecl-u-type-bold
             ecl-u-border-left ecl-u-border-width-8 ecl-u-border-color-yellow ecl-u-z-navigation"
                 data-ecl-template-sticky-header
@@ -425,7 +424,7 @@ export default () => {
 
             <div>
               <h4
-                className="ecl-u-type-heading-4 ecl-u-mb-m ecl-u-mt-none 
+                className="ecl-u-type-heading-4 ecl-u-mb-m ecl-u-mt-none
             ecl-u-bg-grey ecl-u-pa-m ecl-u-type-color-white ecl-u-type-bold
             ecl-u-border-left ecl-u-border-width-8 ecl-u-border-color-yellow ecl-u-z-navigation"
                 data-ecl-template-sticky-header

diff --git a/src/systems/ec/implementations/react/templates/pages/event-detail/examples/Default.jsx b/src/systems/ec/implementations/react/templates/pages/event-detail/examples/Default.jsx
@@ -11,7 +11,6 @@ import {
 } from '@ecl/ec-react-component-description-list';
 import Footer from '@ecl/ec-react-component-footer';
 import Icon from '@ecl/ec-react-component-icon';
-import LanguageListOverlay from '@ecl/ec-react-component-language-list/src/LanguageListOverlay';
 import Link from '@ecl/ec-react-component-link';
 import MediaContainer from '@ecl/ec-react-component-media-container';
 import PageBanner from '@ecl/ec-react-component-page-banner';
@@ -24,7 +23,6 @@ import {
 } from '@ecl/ec-react-component-unordered-list';
 
 import footerContent from '@ecl/ec-specs-footer/demo/data--corporate';
-import languageListContent from '@ecl/ec-specs-language-list/demo/data--overlay';
 import siteHeaderContent from '@ecl/ec-specs-site-header/demo/data--en';
 
 export default () => {
@@ -39,7 +37,6 @@ export default () => {
   return (
     <Fragment>
       <SiteHeader {...siteHeaderContent} data-ecl-auto-init="SiteHeader" />
-      <LanguageListOverlay {...languageListContent} hidden="true" />
       <PageHeader
         breadcrumb={breadcrumb}
         meta="Conference"
@@ -456,7 +453,7 @@ export default () => {
                     "service" : "map",
                     "version": "2.0",
                     "address": "The EGG, Rue Bara 175, 1070 Bruxelles, Belgique",
-                    "options" : { 
+                    "options" : {
                         "color" : "blue",
                         "display" : "map",
                         "target" : "before"