[ADD] Improve Accessibility (#2738)

mjmlio · Sep 11, 2023 · a61b973 · a61b973
1 parent 30ad569
commit a61b973
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 11 deletions.
diff --git a/doc/components_1.md b/doc/components_1.md
@@ -33,8 +33,8 @@ A MJML document starts with a `<mjml>` 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 `<html lang="">` attribute | none
-dir | string | used as `<html dir="">` attribute | none
+lang | string | used as `<html lang="">` attribute | und
+dir | string | used as `<html dir="">` attribute | auto
 
 
 ## mj-head

diff --git 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
@@ -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
@@ -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` : ''}<!doctype html>
-<html ${langAttribute}${dirAttribute}xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="${lang}" dir="${dir}" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
   <head>
     <title>${title}</title>
     <!--[if !mso]><!-->

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -125,6 +125,7 @@ export default class MjSocialElement extends BodyComponent {
   }
 
   static defaultAttributes = {
+    alt: '',
     align: 'left',
     color: '#000',
     'border-radius': '3px',
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ export default class MjCarouselImage extends BodyComponent { @@
       }
       static defaultAttributes = {
+        alt: '',
         target: '_blank',
       }
@@ Expand Down @@