From a61b973b9f4f175a651beaecfa951922632682da Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Mon, 11 Sep 2023 01:17:38 -0700 Subject: [PATCH] [ADD] Improve Accessibility (#2738) --- doc/components_1.md | 4 ++-- packages/mjml-carousel/README.md | 2 +- packages/mjml-carousel/src/CarouselImage.js | 1 + packages/mjml-core/src/helpers/skeleton.js | 5 +---- packages/mjml-core/src/index.js | 4 ++-- packages/mjml-image/README.md | 2 +- packages/mjml-image/src/index.js | 1 + packages/mjml-social/README.md | 2 +- packages/mjml-social/src/SocialElement.js | 1 + 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/doc/components_1.md b/doc/components_1.md index 7f0aa52d3..8f03c55e3 100644 --- a/doc/components_1.md +++ b/doc/components_1.md @@ -33,8 +33,8 @@ A MJML document starts with a `` tag, it can contain only `mj-head` and `m attribute | unit | description | default value ----------|------|-------------|--------------- owa | string | if set to "desktop", switch force desktop version for older (self-hosted) version of Outlook.com that doesn't support media queries (cf. [this issue](https://github.com/mjmlio/mjml/issues/2241)) | none -lang | string | used as `` attribute | none -dir | string | used as `` attribute | none +lang | string | used as `` attribute | und +dir | string | used as `` attribute | auto ## mj-head diff --git a/packages/mjml-carousel/README.md b/packages/mjml-carousel/README.md index ea8cf24d4..365726e5a 100644 --- a/packages/mjml-carousel/README.md +++ b/packages/mjml-carousel/README.md @@ -57,7 +57,7 @@ This component enables you to add and style the images in the carousel. attribute | unit | description | default value ----------|------|-------------|--------------- -alt | string | image description | n/a +alt | string | image description | '' css-class | string | class name, added to the root HTML element created | n/a href | url | link to redirect to on click | n/a rel | string | specify the rel attribute | n/a diff --git a/packages/mjml-carousel/src/CarouselImage.js b/packages/mjml-carousel/src/CarouselImage.js index c1a584a60..d993a37e1 100644 --- a/packages/mjml-carousel/src/CarouselImage.js +++ b/packages/mjml-carousel/src/CarouselImage.js @@ -19,6 +19,7 @@ export default class MjCarouselImage extends BodyComponent { } static defaultAttributes = { + alt: '', target: '_blank', } diff --git a/packages/mjml-core/src/helpers/skeleton.js b/packages/mjml-core/src/helpers/skeleton.js index ac1eaf5ef..9ee327887 100644 --- a/packages/mjml-core/src/helpers/skeleton.js +++ b/packages/mjml-core/src/helpers/skeleton.js @@ -25,11 +25,8 @@ export default function skeleton(options) { dir, } = options - const langAttribute = lang ? `lang="${lang}" ` : '' - const dirAttribute = dir ? `dir="${dir}" ` : '' - return `${beforeDoctype ? `${beforeDoctype}\n` : ''} - + ${title} diff --git a/packages/mjml-core/src/index.js b/packages/mjml-core/src/index.js index e0f31f3ca..192949488 100644 --- a/packages/mjml-core/src/index.js +++ b/packages/mjml-core/src/index.js @@ -166,8 +166,8 @@ export default function mjml2html(mjml, options = {}) { style: [], title: '', forceOWADesktop: get(mjml, 'attributes.owa', 'mobile') === 'desktop', - lang: get(mjml, 'attributes.lang'), - dir: get(mjml, 'attributes.dir'), + lang: get(mjml, 'attributes.lang') || 'und', + dir: get(mjml, 'attributes.dir') || 'auto', } const validatorOptions = { diff --git a/packages/mjml-image/README.md b/packages/mjml-image/README.md index 12c5ea0c6..be5326c34 100644 --- a/packages/mjml-image/README.md +++ b/packages/mjml-image/README.md @@ -25,7 +25,7 @@ Note that if no width is provided, the image will use the parent column width. attribute | unit | description | default value ------------------------------|---------------|--------------------------------|----------------------------- align | position | image alignment | center -alt | string | image description | n/a +alt | string | image description | '' border | string | css border definition | none border-top | string | css border definition | none border-bottom | string | css border definition | none diff --git a/packages/mjml-image/src/index.js b/packages/mjml-image/src/index.js index 727165e3c..fd3fef75c 100644 --- a/packages/mjml-image/src/index.js +++ b/packages/mjml-image/src/index.js @@ -39,6 +39,7 @@ export default class MjImage extends BodyComponent { } static defaultAttributes = { + alt: '', align: 'center', border: '0', height: 'auto', diff --git a/packages/mjml-social/README.md b/packages/mjml-social/README.md index 0a8a9489a..63874f284 100644 --- a/packages/mjml-social/README.md +++ b/packages/mjml-social/README.md @@ -73,7 +73,7 @@ Note that default icons are transparent, which allows `background-color` to actu attribute | unit | description | default value ----------------------------|-------------|-------------------------------|--------------------------- align | string | left/right/center | center -alt | string | image alt attribute | none +alt | string | image alt attribute | '' background-color | color | icon color | Each social `name` has its own default border-radius | px | border radius | 3px color | color | text color | #333333 diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js index 9c4559c7c..0050f8526 100644 --- a/packages/mjml-social/src/SocialElement.js +++ b/packages/mjml-social/src/SocialElement.js @@ -125,6 +125,7 @@ export default class MjSocialElement extends BodyComponent { } static defaultAttributes = { + alt: '', align: 'left', color: '#000', 'border-radius': '3px',