Skip to content

Commit eceb8de

Browse files
dazgreerdazgreer
committed
feat(accessibility: aria tags / text units
- `font-size` now includes `rem` units and `line-height` includes `em` and `rem` - Moved some ARIA tags for better client coverage, following testing - Removed default `aria-hidden` on mj-divider and removed regression test
1 parent cfb7607 commit eceb8de

23 files changed

Lines changed: 79 additions & 96 deletions

File tree

‎packages/mjml-accordion/README.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ Displays the title in a title/text pair.
148148
| color | CSS color formats | text color | |
149149
| css-class | string | class name, added to the root HTML element created | |
150150
| font-family | string | font family | |
151-
| font-size | `px` | font size | `16px` |
151+
| font-size | `px` `rem` | font size | `16px` |
152152
| font-weight | string | text thickness | |
153153
| padding | `px` `%` | accordion title padding, supports up to 4 parameters | `16px` |
154154
| padding-bottom | `px` `%` | accordion title bottom padding | |
@@ -178,22 +178,22 @@ Displays the text in a title/text pair.
178178

179179
##### Attributes
180180

181-
| attribute | accepts | description | default value |
182-
| ---------------- | ----------------- | --------------------------------------------------- | ------------- |
183-
| background-color | CSS color formats | background color | |
184-
| color | CSS color formats | text color | |
185-
| css-class | string | class name, added to the root HTML element created | |
186-
| font-family | string | font family | |
187-
| font-size | `px` | font size | `16px` |
188-
| font-weight | string | text thickness | |
189-
| letter-spacing | `px` `em` | letter spacing | |
190-
| line-height | `px` `%` | space between the lines | `150%` |
191-
| padding | `px` `%` | accordion text padding, supports up to 4 parameters | `16px` |
192-
| padding-bottom | `px` `%` | accordion text bottom padding | |
193-
| padding-left | `px` `%` | accordion text left padding | |
194-
| padding-right | `px` `%` | accordion text right padding | |
195-
| padding-top | `px` `%` | accordion text top padding | |
196-
| role | string | adds a `role` attribute to the slide container | `region` |
181+
| attribute | accepts | description | default value |
182+
| ---------------- | ------------------- | --------------------------------------------------- | ------------- |
183+
| background-color | CSS color formats | background color | |
184+
| color | CSS color formats | text color | |
185+
| css-class | string | class name, added to the root HTML element created | |
186+
| font-family | string | font family | |
187+
| font-size | `px` `rem` | font size | `16px` |
188+
| font-weight | string | text thickness | |
189+
| letter-spacing | `px` `em` | letter spacing | |
190+
| line-height | `px` `%` `em` `rem` | space between the lines | `150%` |
191+
| padding | `px` `%` | accordion text padding, supports up to 4 parameters | `16px` |
192+
| padding-bottom | `px` `%` | accordion text bottom padding | |
193+
| padding-left | `px` `%` | accordion text left padding | |
194+
| padding-right | `px` `%` | accordion text right padding | |
195+
| padding-top | `px` `%` | accordion text top padding | |
196+
| role | string | adds a `role` attribute to the slide container | `region` |
197197

198198
##### Modifiers
199199

‎packages/mjml-accordion/src/AccordionText.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default class MjAccordionText extends BodyComponent {
1616
color: 'color',
1717
'color--dark': 'color',
1818
'font-family': 'string',
19-
'font-size': 'unit(px)',
19+
'font-size': 'unit(px,rem)',
2020
'font-weight': 'string',
2121
'letter-spacing': 'unitWithNegative(px,em)',
22-
'line-height': 'unit(px,%,)',
22+
'line-height': 'unit(px,%,em,rem)',
2323
padding: 'unit(px,%){1,4}',
2424
'padding-bottom': 'unit(px,%)',
2525
'padding-left': 'unit(px,%)',
@@ -190,7 +190,6 @@ export default class MjAccordionText extends BodyComponent {
190190
<div
191191
${this.htmlAttributes({
192192
class: 'mj-accordion-content',
193-
role: this.getAttribute('role'),
194193
})}
195194
>
196195
<table
@@ -199,6 +198,7 @@ export default class MjAccordionText extends BodyComponent {
199198
cellpadding: '0',
200199
class: borderDarkClass || undefined,
201200
style: 'table',
201+
role: this.getAttribute('role'),
202202
})}
203203
>
204204
<tr>

‎packages/mjml-accordion/src/AccordionTitle.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default class MjAccordionTitle extends BodyComponent {
1717
color: 'color',
1818
'color--dark': 'color',
1919
'font-family': 'string',
20-
'font-size': 'unit(px)',
20+
'font-size': 'unit(px,rem)',
2121
'font-weight': 'string',
2222
padding: 'unit(px,%){1,4}',
2323
'padding-bottom': 'unit(px,%)',

‎packages/mjml-button/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,14 @@ Displays a customizable button.
5050
| container-background-color | CSS color formats | button container background color | |
5151
| css-class | string | class name, added to the root HTML element created | |
5252
| font-family | string | font name | `Ubuntu, sans-serif` |
53-
| font-size | `px` | text size | `16px` |
53+
| font-size | `px` `rem` | text size | `16px` |
5454
| font-style | string | CSS values, e.g. `normal` `italic` `oblique` | |
5555
| font-weight | string | text thickness | |
5656
| height | `px` `%` | button height | |
5757
| href | string | URL format | |
5858
| inner-padding | `px` `%` | inner button padding, <br>supports up to 4 parameters | `10px 25px` |
5959
| letter-spacing | `px` `em` | letter-spacing | |
60-
| line-height | `px` `%` | line-height on link | `150%` |
60+
| line-height | `px` `%` `em` `rem` | line-height on link | `150%` |
6161
| multiline | boolean | improve button display in Outlook classic | |
6262
| name | string | specify the name attribute for the button link | |
6363
| padding | `px` `%` | button container padding, supports up to 4 parameters | `10px 25px` |

‎packages/mjml-button/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@ export default class MjButton extends BodyComponent {
3232
'container-background-color': 'color',
3333
'container-background-color--dark': 'color',
3434
'font-family': 'string',
35-
'font-size': 'unit(px)',
35+
'font-size': 'unit(px,rem)',
3636
'font-style': 'string',
3737
'font-weight': 'string',
3838
height: 'unit(px,%)',
3939
href: 'string',
4040
'inner-padding': 'unit(px,%){1,4}',
4141
'letter-spacing': 'unitWithNegative(px,em)',
42-
'line-height': 'unit(px,%,)',
42+
'line-height': 'unit(px,%,em,rem)',
4343
multiline: 'boolean',
4444
name: 'string',
4545
padding: 'unit(px,%){1,4}',

‎packages/mjml-carousel/src/Carousel.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,9 @@ export default class MjCarousel extends BodyComponent {
516516
width: '100%',
517517
role: 'none',
518518
class: 'mj-carousel-main',
519+
role: this.getAttribute('role'),
520+
'aria-label': this.getAttribute('aria-label'),
521+
'aria-roledescription': this.getAttribute('aria-roledescription'),
519522
})}
520523
>
521524
<tr>
@@ -555,9 +558,6 @@ export default class MjCarousel extends BodyComponent {
555558
<div
556559
${this.htmlAttributes({
557560
class: 'mj-carousel',
558-
role: this.getAttribute('role'),
559-
'aria-label': this.getAttribute('aria-label'),
560-
'aria-roledescription': this.getAttribute('aria-roledescription'),
561561
})}
562562
>
563563
${this.generateRadios()}

‎packages/mjml-column/src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -660,6 +660,9 @@ export default class MjColumn extends BodyComponent {
660660
class: columnTableDarkClass,
661661
style: 'table',
662662
width: '100%',
663+
role: this.getAttribute('role'),
664+
'aria-label': this.getAttribute('aria-label'),
665+
'aria-roledescription': this.getAttribute('aria-roledescription'),
663666
})}
664667
>
665668
${this.renderChildren(children, {
@@ -729,9 +732,6 @@ export default class MjColumn extends BodyComponent {
729732
return `
730733
<div
731734
${this.htmlAttributes({
732-
role: this.getAttribute('role'),
733-
'aria-label': this.getAttribute('aria-label'),
734-
'aria-roledescription': this.getAttribute('aria-roledescription'),
735735
class: classesName,
736736
style: 'div',
737737
})}

‎packages/mjml-divider/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Displays a horizontal divider that can be customized like a HTML border.
1919
| attribute | accepts | description | default value |
2020
| -------------------------- | ----------------------- | ------------------------------------------------------ | ------------- |
2121
| align | `left` `center` `right` | horizontal alignment | `center` |
22-
| aria-hidden | string | adds an `aria-hidden` attribute to the divider element | `true` |
22+
| aria-hidden | string | adds an `aria-hidden` attribute to the divider element | |
2323
| border-color | CSS color formats | divider color | `#000000` |
2424
| border-style | string | CSS values, e.g. `dashed` `dotted` `solid` | `solid` |
2525
| border-width | `px` | divider's border width | `4px` |

‎packages/mjml-divider/src/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export default class MjDivider extends BodyComponent {
2525
}
2626

2727
static defaultAttributes = {
28-
'aria-hidden': 'true',
2928
'border-color': '#000000',
3029
'border-style': 'solid',
3130
'border-width': '4px',

‎packages/mjml-hero/src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -406,9 +406,6 @@ export default class MjHero extends BodyComponent {
406406
`)}
407407
<div
408408
${this.htmlAttributes({
409-
role: this.getAttribute('role'),
410-
'aria-label': this.getAttribute('aria-label'),
411-
'aria-roledescription': this.getAttribute('aria-roledescription'),
412409
align: this.getAttribute('align'),
413410
class: this.getAttribute('css-class'),
414411
style: 'div',
@@ -421,6 +418,9 @@ export default class MjHero extends BodyComponent {
421418
cellspacing: '0',
422419
role: 'none',
423420
style: 'table',
421+
role: this.getAttribute('role'),
422+
'aria-label': this.getAttribute('aria-label'),
423+
'aria-roledescription': this.getAttribute('aria-roledescription'),
424424
})}
425425
>
426426
<tr

0 commit comments

Comments
 (0)