@twreporter/react-article-components 2.6.0 → 2.7.0

package/lib/components/body/headings.js

@@ -42,7 +42,9 @@ var H1 = function H1(props) {
   var text = content.split(/<strong>|<\/strong>/).filter(Boolean).join('');
   return /*#__PURE__*/_react["default"].createElement(StyledH1, {
     className: _.get(props, 'className', ''),
-    text: text
+    text: text,
+    role: "heading",
+    "aria-level": "2"
   });
 };
 var H2 = function H2(props) {
@@ -50,7 +52,9 @@ var H2 = function H2(props) {
   var text = content.split(/<strong>|<\/strong>/).filter(Boolean).join('');
   return /*#__PURE__*/_react["default"].createElement(StyledH2, {
     className: _.get(props, 'className', ''),
-    text: text
+    text: text,
+    role: "heading",
+    "aria-level": "3"
   });
 };
 var _default = exports["default"] = {

package/lib/components/body/slideshow/index.js

@@ -319,7 +319,8 @@ var Slideshow = exports["default"] = /*#__PURE__*/function (_PureComponent) {
             imageSet: [img.mobile, img.tablet, img.desktop],
             defaultImage: img.mobile,
             objectFit: 'contain',
-            sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px"
+            sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px",
+            alt: img.description
           }))
         );
       });

package/lib/components/leading/embedded.js

@@ -140,7 +140,9 @@ var Embedded = function Embedded(_ref) {
     text: subtitle
   }), /*#__PURE__*/_react["default"].createElement(Title, {
     text: title,
-    type: _headline.H1.Type.ARTICLE
+    type: _headline.H1.Type.ARTICLE,
+    role: "heading",
+    "aria-level": "1"
   })), captionText ? /*#__PURE__*/_react["default"].createElement(CaptionBlock, null, /*#__PURE__*/_react["default"].createElement(Caption, {
     text: captionText
   })) : null));

package/lib/components/leading/fullscreen.js

@@ -121,14 +121,18 @@ var FullScreenLeading = exports["default"] = /*#__PURE__*/function (_React$PureC
           defaultImage: portraitPoster.mobile,
           objectFit: "cover",
           objectPostion: "center center",
-          clickable: true
+          clickable: true,
+          alt: portraitPoster.alt
         })));
       }
       return /*#__PURE__*/_react["default"].createElement(FullScreenBlock, null, portraitPosterJSX ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portraitPosterJSX, /*#__PURE__*/_react["default"].createElement(DisplayOnLandscape, null, posterJSX)) : posterJSX, /*#__PURE__*/_react["default"].createElement(FigureOverlayMask, null), /*#__PURE__*/_react["default"].createElement(TextBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
         return /*#__PURE__*/_react["default"].createElement(components.Link, {
           to: topicHref
         }, /*#__PURE__*/_react["default"].createElement(Topic, null, shortTitle, /*#__PURE__*/_react["default"].createElement(RightArrow, null)));
-      }) : null, /*#__PURE__*/_react["default"].createElement(Title, null, title), subtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, subtitle) : null));
+      }) : null, /*#__PURE__*/_react["default"].createElement(Title, {
+        role: "heading",
+        "aria-level": "1"
+      }, title), subtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, subtitle) : null));
     }
   }]);
   return FullScreenLeading;

package/lib/components/leading/normal.js

@@ -121,7 +121,9 @@ var NormalLeading = exports["default"] = /*#__PURE__*/function (_React$PureCompo
         }, /*#__PURE__*/_react["default"].createElement(Topic, null, shortTitle));
       }) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, subtitle) : null, /*#__PURE__*/_react["default"].createElement(Title, {
         type: _headline.H1.Type.ARTICLE,
-        text: title
+        text: title,
+        role: "heading",
+        "aria-level": "1"
       })), /*#__PURE__*/_react["default"].createElement(Figure, {
         $css: this.getFigureCSS()
       }, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
@@ -129,7 +131,8 @@ var NormalLeading = exports["default"] = /*#__PURE__*/function (_React$PureCompo
         imageSet: [poster.mobile, poster.tablet, poster.desktop],
         defaultImage: poster.mobile,
         sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px",
-        clickable: true
+        clickable: true,
+        alt: poster.alt
       }), figureCaption ? /*#__PURE__*/_react["default"].createElement(FigCaption, null, figureCaption) : null)));
     }
   }]);

package/lib/components/leading/pink.js

@@ -116,7 +116,10 @@ var LeadingBlock = exports["default"] = /*#__PURE__*/function (_PureComponent) {
         return /*#__PURE__*/_react["default"].createElement(components.Link, {
           to: topicHref
         }, /*#__PURE__*/_react["default"].createElement(TopicTextBlock, null, shortTitle));
-      }) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(SubtitleTextBlock, null, /*#__PURE__*/_react["default"].createElement("span", null, subtitle)) : null, /*#__PURE__*/_react["default"].createElement(TitleTextBlock, null, /*#__PURE__*/_react["default"].createElement("span", null, title))), /*#__PURE__*/_react["default"].createElement(FigureBlock, null, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
+      }) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(SubtitleTextBlock, null, /*#__PURE__*/_react["default"].createElement("span", null, subtitle)) : null, /*#__PURE__*/_react["default"].createElement(TitleTextBlock, {
+        role: "heading",
+        "aria-level": "1"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, title))), /*#__PURE__*/_react["default"].createElement(FigureBlock, null, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
         className: "leading-image",
         imgPlaceholderSrc: _.get(poster, 'tiny.url', ''),
         imageSet: [poster.mobile, poster.tablet, poster.desktop],
@@ -124,7 +127,8 @@ var LeadingBlock = exports["default"] = /*#__PURE__*/function (_PureComponent) {
         objectFit: "cover",
         objectPostion: "center center",
         sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px",
-        clickable: true
+        clickable: true,
+        alt: poster.alt
       }))));
     }
   }]);

package/lib/components/related/card.js

@@ -153,7 +153,8 @@ var Card = /*#__PURE__*/function (_React$PureComponent) {
         title = _this$props.title,
         desc = _this$props.desc,
         publishedDate = _this$props.publishedDate,
-        thumbnail = _this$props.thumbnail;
+        thumbnail = _this$props.thumbnail,
+        alt = _this$props.alt;
       var dateStr = '';
       if (publishedDate) {
         var date = new Date(publishedDate);
@@ -173,7 +174,8 @@ var Card = /*#__PURE__*/function (_React$PureComponent) {
         defaultImage: thumbnail,
         objectFit: "cover",
         objectPosition: "center center",
-        noImgPlaceholder: true
+        noImgPlaceholder: true,
+        alt: alt
       })), /*#__PURE__*/_react["default"].createElement(DesktopTextBlock, {
         onMouseEnter: this.handleMouseEnterTextBlock,
         onMouseLeave: this.handleMouseLeaveTextBlock

package/lib/components/related/index.js

@@ -136,7 +136,8 @@ var Related = exports["default"] = /*#__PURE__*/function (_React$PureComponent)
         // if `og_image` is not provided,
         // use `hero_image` as fallback
         thumbnail: _.get(thumbnail, 'url') ? thumbnail : _.get(related, 'hero_image.resized_targets.mobile'),
-        title: related.title
+        title: related.title,
+        alt: _.get(related, 'og_image.description', '')
       };
     }
   }, {

package/lib/constants/prop-types/related.js

@@ -15,7 +15,8 @@ var card = {
   id: _propTypes["default"].string.isRequired,
   isTargetBlank: _propTypes["default"].bool,
   thumbnail: _imgWithPlaceholder["default"].imagePropType,
-  title: _propTypes["default"].string.isRequired
+  title: _propTypes["default"].string.isRequired,
+  alt: _propTypes["default"].string
 };
 var _default = exports["default"] = {
   card: card,

package/lib/managers/layout-manager.js

@@ -112,11 +112,13 @@ var LayoutManager = exports["default"] = /*#__PURE__*/function () {
           tiny: _.get(post, 'hero_image.resized_targets.tiny'),
           mobile: _.get(post, 'hero_image.resized_targets.mobile'),
           tablet: _.get(post, 'hero_image.resized_targets.tablet'),
-          desktop: _.get(post, 'hero_image.resized_targets.desktop')
+          desktop: _.get(post, 'hero_image.resized_targets.desktop'),
+          alt: _.get(post, 'leading_image_description') || _.get(post, 'hero_image.description')
         },
         portraitPoster: {
           tiny: _.get(post, 'leading_image_portrait.resized_targets.tiny'),
-          mobile: _.get(post, 'leading_image_portrait.resized_targets.mobile')
+          mobile: _.get(post, 'leading_image_portrait.resized_targets.mobile'),
+          alt: _.get(post, 'leading_image_description', '')
         },
         embedded: _.get(post, 'leading_embedded.api_data', [])
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.27.0",
-    "@twreporter/react-components": "^9.8.2",
+    "@twreporter/react-components": "^9.9.0",
     "@twreporter/redux": "^8.4.1",
-    "@twreporter/universal-header": "^3.1.1",
+    "@twreporter/universal-header": "^3.2.0",
     "howler": "^2.2.3",
     "isomorphic-dompurify": "^2.26.0",
     "lodash": "^4.17.11",
@@ -42,5 +42,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "ff804097c4b10c35fd45e2237a4e82a32411cbc5"
+  "gitHead": "250842c7912916408316ead5cbe585b9e07593be"
 }