@micromag/viewer 0.3.496 → 0.3.497

package/lib/index.js

@@ -23,12 +23,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var web = require('@react-spring/web');
 var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
+var reactIntl = require('react-intl');
 var EventEmitter = require('wolfy87-eventemitter');
 var components = require('@micromag/core/components');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var all = require('@micromag/elements/all');
-var reactIntl = require('react-intl');
+var FocusLock = require('react-focus-lock');
 var core$1 = require('@react-spring/core');
 var Scroll = require('@micromag/element-scroll');
 var ShareOptions = require('@micromag/element-share-options');
@@ -186,7 +187,7 @@ if (typeof history !== "undefined" && typeof window[patchKey] === "undefined") {
   });
 }
 
-var _excluded$a = ["children"],
+var _excluded$b = ["children"],
   _excluded2 = ["path", "nest", "match"],
   _excluded3 = ["to", "href", "onClick", "asChild", "children", "replace", "state"];
 
@@ -296,7 +297,7 @@ var matchRoute = function matchRoute(parser, route, path, loose) {
 
 var Router = function Router(_ref3) {
   var children = _ref3.children,
-    props = _objectWithoutProperties(_ref3, _excluded$a);
+    props = _objectWithoutProperties(_ref3, _excluded$b);
   // the router we will inherit from - it is the closest router in the tree,
   // unless the custom `hook` is provided (in that case it's the default one)
   var parent_ = useRouter();
@@ -737,9 +738,34 @@ function useScreenInteraction() {
   };
 }
 
-var styles$g = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
+function checkDraggable(el) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var parentDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var _ref = options || {},
+    _ref$maxParentDistanc = _ref.maxParentDistance,
+    maxParentDistance = _ref$maxParentDistanc === void 0 ? 5 : _ref$maxParentDistanc;
+  var _ref2 = el || {},
+    _ref2$tagName = _ref2.tagName,
+    tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
+    _ref2$parentNode = _ref2.parentNode,
+    parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode,
+    _ref2$dataset = _ref2.dataset,
+    dataset = _ref2$dataset === void 0 ? {} : _ref2$dataset;
+  if (tagName === 'BODY') {
+    return false;
+  }
+  if (typeof dataset.draggable !== 'undefined') {
+    return true;
+  }
+  if (parentDistance < maxParentDistance) {
+    return checkDraggable(parentNode, options, parentDistance + 1);
+  }
+  return false;
+}
+
+var styles$g = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled","focus-visible":"micromag-viewer-buttons-button-focus-visible"};
 
-var _excluded$9 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "ariaLabel", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$n = {
   type: PropTypes.string,
   theme: core.PropTypes.buttonTheme,
@@ -759,6 +785,7 @@ var propTypes$n = {
   disableOnLoading: PropTypes.bool,
   withoutTheme: PropTypes.bool,
   asLink: PropTypes.bool,
+  ariaLabel: PropTypes.string,
   className: PropTypes.string,
   iconClassName: PropTypes.string,
   labelClassName: PropTypes.string,
@@ -786,6 +813,7 @@ var defaultProps$n = {
   disableOnLoading: true,
   withoutTheme: false,
   asLink: false,
+  ariaLabel: null,
   className: null,
   iconClassName: null,
   labelClassName: null,
@@ -811,12 +839,13 @@ var Button = function Button(_ref) {
     disableOnLoading = _ref.disableOnLoading;
     _ref.withoutTheme;
     var asLink = _ref.asLink,
+    ariaLabel = _ref.ariaLabel,
     onClick = _ref.onClick,
     className = _ref.className,
     iconClassName = _ref.iconClassName,
     labelClassName = _ref.labelClassName,
     refButton = _ref.refButton,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(components.Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -871,6 +900,7 @@ var Button = function Button(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
+    "aria-label": ariaLabel,
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
@@ -878,9 +908,9 @@ Button.propTypes = propTypes$n;
 Button.defaultProps = defaultProps$n;
 var Button$1 = Button;
 
-var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
+var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon","focus-visible":"micromag-viewer-buttons-icon-button-focus-visible"};
 
-var _excluded$8 = ["iconClassName", "className"];
+var _excluded$9 = ["iconClassName", "className"];
 var propTypes$m = {
   iconClassName: PropTypes.string,
   className: PropTypes.string
@@ -892,7 +922,7 @@ var defaultProps$m = {
 var IconButton = function IconButton(_ref) {
   var iconClassName = _ref.iconClassName,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
     labelClassName: styles$f.label,
@@ -903,7 +933,7 @@ IconButton.propTypes = propTypes$m;
 IconButton.defaultProps = defaultProps$m;
 var IconButton$1 = IconButton;
 
-var _excluded$7 = ["single", "className"];
+var _excluded$8 = ["single", "className"];
 var propTypes$l = {
   single: PropTypes.bool,
   className: PropTypes.string
@@ -915,7 +945,7 @@ var defaultProps$l = {
 var CloseMenuButton = function CloseMenuButton(_ref) {
   var single = _ref.single,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
@@ -962,7 +992,7 @@ CloseMenuButton.propTypes = propTypes$l;
 CloseMenuButton.defaultProps = defaultProps$l;
 var CloseMenuButton$1 = CloseMenuButton;
 
-var _excluded$6 = ["className", "iconClassName"];
+var _excluded$7 = ["className", "iconClassName"];
 var propTypes$k = {
   className: PropTypes.string,
   iconClassName: PropTypes.string
@@ -974,7 +1004,7 @@ var defaultProps$k = {
 var MenuButton = function MenuButton(_ref) {
   var className = _ref.className;
     _ref.iconClassName;
-    var props = _objectWithoutProperties(_ref, _excluded$6);
+    var props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
@@ -1015,7 +1045,7 @@ MenuButton.propTypes = propTypes$k;
 MenuButton.defaultProps = defaultProps$k;
 var MenuButton$1 = MenuButton;
 
-var _excluded$5 = ["className"];
+var _excluded$6 = ["className"];
 var propTypes$j = {
   className: PropTypes.string
 };
@@ -1024,7 +1054,7 @@ var defaultProps$j = {
 };
 var ShareButton = function ShareButton(_ref) {
   var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
@@ -1164,7 +1194,7 @@ ViewerMenuContainer.propTypes = propTypes$h;
 ViewerMenuContainer.defaultProps = defaultProps$h;
 var MenuContainer = ViewerMenuContainer;
 
-var styles$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
+var styles$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot","focus-visible":"micromag-viewer-menus-menu-dot-focus-visible","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
 
 var propTypes$g = {
   current: PropTypes.bool,
@@ -1258,7 +1288,7 @@ var MenuDot = ViewerMenuDot;
 
 var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
-var _excluded$4 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
+var _excluded$5 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
 var propTypes$f = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: core.PropTypes.menuItems,
@@ -1300,7 +1330,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     withoutScreensMenu = _ref.withoutScreensMenu,
     onClose = _ref.onClose,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var _ref2 = colors || {},
     _ref2$primary = _ref2.primary,
     primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
@@ -1419,7 +1449,7 @@ StackIcon.propTypes = propTypes$e;
 StackIcon.defaultProps = defaultProps$e;
 var StackIcon$1 = StackIcon;
 
-var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","focus-visible":"micromag-viewer-menus-menu-screen-focus-visible","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","pulse":"micromag-viewer-menus-menu-screen-pulse","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon"};
+var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","focus-visible":"micromag-viewer-menus-menu-screen-focus-visible","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon","screen":"micromag-viewer-menus-menu-screen-screen","pulse":"micromag-viewer-menus-menu-screen-pulse"};
 
 var propTypes$d = {
   className: PropTypes.string,
@@ -1515,7 +1545,7 @@ var MenuScreen = ViewerMenuScreen;
 
 var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","badge":"micromag-viewer-menus-menu-preview-badge","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
 
-var _excluded$3 = ["textAlign"];
+var _excluded$4 = ["textAlign"];
 var propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
   header: PropTypes.node,
@@ -1597,7 +1627,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   // eslint-disable-next-line no-unused-vars
   var _ref6 = titleStyles || {};
     _ref6.textAlign;
-    var otherTitleStyles = _objectWithoutProperties(_ref6, _excluded$3);
+    var otherTitleStyles = _objectWithoutProperties(_ref6, _excluded$4);
   var finalTitleStyles = titleStyles !== null ? utils.getStyleFromText(otherTitleStyles) : null;
   // const { url: brandLogoUrl = null } = brandLogo || {};
   var _useState = React.useState([]),
@@ -1874,7 +1904,7 @@ ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
 var MenuShare = ViewerMenuShare;
 
-var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","focus-visible":"micromag-viewer-focus-visible","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
+var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","focus-visible":"micromag-viewer-focus-visible","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","ariaAnnouncement":"micromag-viewer-ariaAnnouncement","accessibilityLinks":"micromag-viewer-accessibilityLinks","accessibilityButton":"micromag-viewer-accessibilityButton","disabled":"micromag-viewer-disabled","tooltip":"micromag-viewer-tooltip","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
 var propTypes$9 = {
   story: core.PropTypes.story.isRequired,
@@ -2123,8 +2153,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
       progress: shareOpened ? 1 : 0,
       computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
       springParams: springParams,
-      drapOptions: {
-        axis: 'y'
+      dragOptions: {
+        axis: 'y',
+        pointer: {
+          keys: false
+        }
       }
     }),
     bindShareDrag = _useDragProgress.bind,
@@ -2167,7 +2200,10 @@ var ViewerMenu = function ViewerMenu(_ref) {
       computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
       springParams: springParams,
       drapOptions: {
-        axis: 'y'
+        axis: 'y',
+        pointer: {
+          keys: false
+        }
       }
     }),
     bindMenuDrag = _useDragProgress2.bind,
@@ -2220,14 +2256,18 @@ var ViewerMenu = function ViewerMenu(_ref) {
       iconPosition: "left",
       focusable: !shareOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton$1, {
+    toggledButton: /*#__PURE__*/React.createElement(FocusLock, {
+      group: "share",
+      disabled: !shareOpened,
+      returnFocus: true
+    }, /*#__PURE__*/React.createElement(CloseMenuButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
       iconPosition: "left",
       focusable: shareOpened,
       single: true
-    }),
+    })),
     progressSpring: shareOpenedProgress
   }) : null, afterShareMenuButton) : null, !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
@@ -2240,13 +2280,17 @@ var ViewerMenu = function ViewerMenu(_ref) {
       theme: menuTheme,
       focusable: !menuOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton$1, {
+    toggledButton: /*#__PURE__*/React.createElement(FocusLock, {
+      group: "screens",
+      disabled: !menuOpened,
+      returnFocus: true
+    }, /*#__PURE__*/React.createElement(CloseMenuButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
       iconPosition: "right",
       focusable: menuOpened
-    }),
+    })),
     progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
   }) : null) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
@@ -2265,7 +2309,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
     theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(MenuShare, {
+  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(FocusLock, {
+    group: "share",
+    disabled: !shareOpened,
+    returnFocus: true
+  }, /*#__PURE__*/React.createElement(MenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -2278,11 +2326,15 @@ var ViewerMenu = function ViewerMenu(_ref) {
     shareUrl: shareUrl,
     onShare: onShare,
     onClose: onCloseShare
-  }) : null), /*#__PURE__*/React.createElement(MenuContainer, {
+  })) : null), /*#__PURE__*/React.createElement(MenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React.createElement(MenuPreview, {
+  }, menuMounted ? /*#__PURE__*/React.createElement(FocusLock, {
+    group: "screens",
+    disabled: !menuOpened,
+    returnFocus: true
+  }, /*#__PURE__*/React.createElement(MenuPreview, {
     viewerTheme: viewerTheme,
     header: previewHeader,
     footer: previewFooter,
@@ -2301,7 +2353,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
-  }) : null));
+  })) : null));
 };
 ViewerMenu.propTypes = propTypes$9;
 ViewerMenu.defaultProps = defaultProps$9;
@@ -2390,8 +2442,9 @@ function ViewerScreen(_ref) {
 ViewerScreen.propTypes = propTypes$8;
 ViewerScreen.defaultProps = defaultProps$8;
 
-var styles$4 = {"arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
+var styles$4 = {"container":"micromag-viewer-buttons-navigation-button-container","arrow":"micromag-viewer-buttons-navigation-button-arrow","next":"micromag-viewer-buttons-navigation-button-next","previous":"micromag-viewer-buttons-navigation-button-previous"};
 
+var _excluded$3 = ["direction", "onClick", "className"];
 var propTypes$7 = {
   direction: PropTypes.oneOf(['previous', 'next']),
   onClick: PropTypes.func,
@@ -2405,8 +2458,9 @@ var defaultProps$7 = {
 var NavigationButton = function NavigationButton(_ref) {
   var direction = _ref.direction,
     _onClick = _ref.onClick,
-    className = _ref.className;
-  return /*#__PURE__*/React.createElement(IconButton$1, {
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -2422,23 +2476,8 @@ var NavigationButton = function NavigationButton(_ref) {
       fill: "currentColor"
     }, /*#__PURE__*/React.createElement("polygon", {
       points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
-    })),
-    label: /*#__PURE__*/React.createElement("span", {
-      className: "sr-only"
-    }, direction === 'previous' ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "zYH/31",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to previous screen"
-      }]
-    }) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
     }))
-  });
+  }, props));
 };
 NavigationButton.propTypes = propTypes$7;
 NavigationButton.defaultProps = defaultProps$7;
@@ -2466,7 +2505,7 @@ ArrowHint.propTypes = propTypes$6;
 ArrowHint.defaultProps = defaultProps$6;
 var ArrowHint$1 = ArrowHint;
 
-var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
+var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp","focus-visible":"micromag-viewer-partials-seek-bar-focus-visible"};
 
 var stopDragEventsPropagation = {
   onTouchMove: function onTouchMove(e) {
@@ -2563,10 +2602,15 @@ var SeekBar = function SeekBar(_ref3) {
     _useState2 = _slicedToArray(_useState, 2),
     showTimestamp = _useState2[0],
     setShowTimestamp = _useState2[1];
-  var onDrag = React.useCallback(function (_ref5) {
+  var startProgressRef = React.useRef(progress);
+  var onDrag = React.useCallback(
+  // eslint-disable-next-line no-unused-vars
+  function (_ref5) {
     var _ref5$xy = _slicedToArray(_ref5.xy, 1),
-      x = _ref5$xy[0],
-      elapsedTime = _ref5.elapsedTime,
+      xOffset = _ref5$xy[0],
+      _ref5$movement = _slicedToArray(_ref5.movement, 1);
+      _ref5$movement[0];
+      var elapsedTime = _ref5.elapsedTime,
       active = _ref5.active,
       tap = _ref5.tap,
       currentTarget = _ref5.currentTarget;
@@ -2578,21 +2622,28 @@ var SeekBar = function SeekBar(_ref3) {
       return;
     }
     var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
-      _currentTarget$getBou2 = _currentTarget$getBou.left,
-      elX = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
-      _currentTarget$getBou3 = _currentTarget$getBou.width,
-      elWidth = _currentTarget$getBou3 === void 0 ? 0 : _currentTarget$getBou3;
-    var newProgress = Math.max(0, Math.min(1, (x - elX) / elWidth));
+      _currentTarget$getBou2 = _currentTarget$getBou.width,
+      elWidth = _currentTarget$getBou2 === void 0 ? 0 : _currentTarget$getBou2,
+      _currentTarget$getBou3 = _currentTarget$getBou.x,
+      xGap = _currentTarget$getBou3 === void 0 ? null : _currentTarget$getBou3;
+    var newProgress = null;
+    if (tap) {
+      newProgress = Math.max(0, Math.min(1, (xOffset - xGap) / elWidth));
+    } else {
+      // startProgressRef.current + xMovement
+      newProgress = Math.max(0, Math.min(1, (xOffset - xGap) / elWidth));
+    }
     if (onSeek !== null) {
       onSeek(newProgress, tap);
     }
   }, [onSeek, onClick, collapsed]);
   var onDragStart = React.useCallback(function () {
+    startProgressRef.current = progress;
     setShowTimestamp(true);
     if (onSeekStart !== null) {
       onSeekStart();
     }
-  }, [onSeekStart, setShowTimestamp]);
+  }, [progress, onSeekStart, setShowTimestamp]);
   var onDragEnd = React.useCallback(function () {
     if (onSeekEnd !== null) {
       setShowTimestamp(false);
@@ -2639,6 +2690,27 @@ var SeekBar = function SeekBar(_ref3) {
     }
   })), /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
     type: "button",
+    role: "slider",
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": progress,
+    "aria-valuetext": intl.formatMessage({
+      id: "C1VUEY",
+      defaultMessage: [{
+        "type": 1,
+        "value": "current"
+      }, {
+        "type": 0,
+        "value": " of "
+      }, {
+        "type": 1,
+        "value": "duration"
+      }]
+    }, {
+      current: getFormattedTimestamp(currentTime, duration < SHOW_MILLISECONDS_THRESHOLD),
+      duration: getFormattedTimestamp(duration, duration < SHOW_MILLISECONDS_THRESHOLD)
+    }),
+    "data-draggable": true,
     className: styles$2.track,
     title: intl.formatMessage({
       id: "G1Gyjn",
@@ -2648,10 +2720,10 @@ var SeekBar = function SeekBar(_ref3) {
       }]
     }),
     "aria-label": intl.formatMessage({
-      id: "G1Gyjn",
+      id: "2prwZ7",
       defaultMessage: [{
         "type": 0,
-        "value": "Seek"
+        "value": "Progress slider"
       }]
     }),
     tabIndex: focusable ? '0' : '-1'
@@ -2661,7 +2733,7 @@ SeekBar.propTypes = propTypes$5;
 SeekBar.defaultProps = defaultProps$5;
 var SeekBar$1 = SeekBar;
 
-var styles$1 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
+var styles$1 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","focus-visible":"micromag-viewer-partials-playback-controls-focus-visible","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
 
 var propTypes$4 = {
   defaultColor: PropTypes.shape({
@@ -2729,6 +2801,9 @@ function PlaybackControls(_ref) {
     buffering = _useMediaState.buffering,
     playing = _useMediaState.playing,
     muted = _useMediaState.muted;
+
+  // console.log(controlsVisible);
+
   React.useEffect(function () {
     var id = null;
     setShowLoading(false);
@@ -2795,7 +2870,9 @@ function PlaybackControls(_ref) {
       setPlaying(false);
     }
   }, [playing, setWasPlaying, setPlaying]);
-  var onSeek = React.useCallback(function (progress) {
+  var onSeek = React.useCallback(
+  // eslint-disable-next-line no-unused-vars
+  function (progress) {
     if (mediaElement !== null) {
       mediaElement.currentTime = progress * mediaElement.duration;
     }
@@ -2825,21 +2902,8 @@ function PlaybackControls(_ref) {
   }) : /*#__PURE__*/React.createElement(components.PlayIcon, {
     className: styles$1.icon
   });
-  var playLabel = playing ? intl.formatMessage({
-    id: "mTqcmA",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Pause"
-    }]
-  }) : intl.formatMessage({
-    id: "ahSpiH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Play"
-    }]
-  });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controls && (!seekBarOnly || !playing)), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
+    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controlsVisible && controls && (!seekBarOnly || !playing)), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
   }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(components.Button, {
     className: classNames([styles$1.suggest]),
     style: {
@@ -2850,32 +2914,40 @@ function PlaybackControls(_ref) {
     icon: /*#__PURE__*/React.createElement(components.PlayIcon, {
       className: classNames([styles$1.icon, styles$1.offset])
     }),
+    "aria-pressed": !playing,
     "aria-label": intl.formatMessage({
-      id: "ahSpiH",
+      id: "mTqcmA",
       defaultMessage: [{
         "type": 0,
-        "value": "Play"
+        "value": "Pause"
       }]
     }),
     withoutBootstrapStyles: true
   }) : null, /*#__PURE__*/React.createElement(components.Button, {
-    className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
+    className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, !controlsVisible || controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
     style: {
       color: color
     },
     onClick: playing ? onPause : onPlay,
-    focusable: controlsVisible,
+    focusable: controls && controlsVisible && (!seekBarOnly || !playing),
     disabled: finalShowLoading,
     icon: finalShowLoading ? /*#__PURE__*/React.createElement(components.Spinner, {
       className: classNames([styles$1.spinner, styles$1.offset])
     }) : playIcon,
+    "aria-pressed": !playing,
     "aria-label": finalShowLoading ? intl.formatMessage({
       id: "YyYrXp",
       defaultMessage: [{
         "type": 0,
         "value": "Loading"
       }]
-    }) : playLabel,
+    }) : intl.formatMessage({
+      id: "mTqcmA",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Pause"
+      }]
+    }),
     withoutBootstrapStyles: true
   }), /*#__PURE__*/React.createElement(SeekBar$1, {
     className: styles$1.seekBar,
@@ -2885,7 +2957,7 @@ function PlaybackControls(_ref) {
     onSeek: onSeek,
     onSeekStart: onSeekStart,
     onSeekEnd: onSeekEnd,
-    focusable: playing,
+    focusable: controls && controlsVisible && !seekBarOnly,
     collapsed: isCollapsed,
     withSeekHead: !isCollapsed && !seekBarOnly,
     backgroundColor: color,
@@ -2902,18 +2974,13 @@ function PlaybackControls(_ref) {
     }) : /*#__PURE__*/React.createElement(components.MuteIcon, {
       className: styles$1.icon
     }),
-    "aria-label": muted ? intl.formatMessage({
+    "aria-pressed": !muted,
+    "aria-label": intl.formatMessage({
       id: "RK/QEY",
       defaultMessage: [{
         "type": 0,
         "value": "Unmute"
       }]
-    }) : intl.formatMessage({
-      id: "vzg8Es",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Mute"
-      }]
     }),
     withoutBootstrapStyles: true
   }));
@@ -2921,19 +2988,22 @@ function PlaybackControls(_ref) {
 PlaybackControls.propTypes = propTypes$4;
 PlaybackControls.defaultProps = defaultProps$4;
 
-var styles = {"container":"micromag-viewer-partials-web-view-container","opened":"micromag-viewer-partials-web-view-opened"};
+var styles = {"container":"micromag-viewer-partials-web-view-container","focusLock":"micromag-viewer-partials-web-view-focusLock","opened":"micromag-viewer-partials-web-view-opened"};
 
 var _excluded$2 = ["opened", "close", "open", "update", "url"];
 var propTypes$3 = {
+  onChange: PropTypes.func,
   className: PropTypes.string,
   style: PropTypes.object
 };
 var defaultProps$3 = {
+  onChange: null,
   className: null,
   style: null
 };
 function WebViewContainer(_ref) {
-  var className = _ref.className,
+  var onChange = _ref.onChange,
+    className = _ref.className,
     style = _ref.style;
   var _useViewerWebView = contexts.useViewerWebView(),
     opened = _useViewerWebView.opened,
@@ -2948,13 +3018,15 @@ function WebViewContainer(_ref) {
     enableInteraction = _useViewerInteraction.enableInteraction;
   var _usePlaybackContext = contexts.usePlaybackContext(),
     playing = _usePlaybackContext.playing,
-    setPlaying = _usePlaybackContext.setPlaying;
+    setPlaying = _usePlaybackContext.setPlaying,
+    hideControls = _usePlaybackContext.hideControls,
+    showControls = _usePlaybackContext.showControls;
   var wasPlayingRef = React.useRef(playing);
   var _useState = React.useState(url),
     _useState2 = _slicedToArray(_useState, 2),
     currentUrl = _useState2[0],
     setCurrentUrl = _useState2[1];
-  var iframeRef = React.useRef(null);
+  var ref = React.useRef(null);
 
   // Handle current webview url
   React.useEffect(function () {
@@ -2966,35 +3038,47 @@ function WebViewContainer(_ref) {
     if (url === null) {
       setCurrentUrl(null);
     }
-  }, [url]);
+    if (onChange !== null) {
+      onChange(opened);
+    }
+  }, [url, setCurrentUrl, onChange]);
 
   // Disable interaction and pause playback
   React.useEffect(function () {
     if (opened) {
       disableInteraction();
+      hideControls();
       wasPlayingRef.current = playing;
       if (playing) {
         setPlaying(false);
       }
-      iframeRef.current.focus();
     } else {
       enableInteraction();
+      showControls();
       if (wasPlayingRef.current && !playing) {
         wasPlayingRef.current = false;
         setPlaying(true);
       }
     }
   }, [opened]);
+  var keyboardShortcuts = React.useMemo(function () {
+    return {
+      escape: function escape() {
+        close();
+      }
+    };
+  }, [close]);
+  useKeyboardShortcuts(keyboardShortcuts);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.opened, opened), className, className !== null)]),
     style: style,
-    onTransitionEnd: onTransitionEnd
+    onTransitionEnd: onTransitionEnd,
+    ref: ref
   }, /*#__PURE__*/React.createElement(WebView, Object.assign({
     url: url || currentUrl
   }, webViewProps, {
     closeable: opened,
     focusable: opened,
-    iframeRef: iframeRef,
     className: styles.webView,
     onClose: close
   })));
@@ -3157,6 +3241,7 @@ var Viewer = function Viewer(_ref) {
     screensMedias = _ref.screensMedias,
     screenSizeOptions = _ref.screenSizeOptions,
     className = _ref.className;
+  var intl = reactIntl.useIntl();
   /**
    * Screen Data + Processing
    */
@@ -3208,13 +3293,20 @@ var Viewer = function Viewer(_ref) {
    * Screen Layout
    */
   var _ref5 = viewerTheme || {},
-    textStyles = _ref5.textStyles;
-  var _ref6 = textStyles || {},
-    _ref6$title = _ref6.title,
-    themeTextStyle = _ref6$title === void 0 ? null : _ref6$title;
-  var _ref7 = themeTextStyle || {},
-    _ref7$fontFamily = _ref7.fontFamily,
-    themeFont = _ref7$fontFamily === void 0 ? null : _ref7$fontFamily;
+    textStyles = _ref5.textStyles,
+    colors = _ref5.colors;
+  var _ref6 = colors || {},
+    _ref6$primary = _ref6.primary,
+    primaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
+    _ref6$focus = _ref6.focus,
+    focusColor = _ref6$focus === void 0 ? null : _ref6$focus;
+  var finalFocusColor = utils.getColorAsString(focusColor || primaryColor);
+  var _ref7 = textStyles || {},
+    _ref7$title = _ref7.title,
+    themeTextStyle = _ref7$title === void 0 ? null : _ref7$title;
+  var _ref8 = themeTextStyle || {},
+    _ref8$fontFamily = _ref8.fontFamily,
+    themeFont = _ref8$fontFamily === void 0 ? null : _ref8$fontFamily;
 
   // Fonts
   var finalFonts = React.useMemo(function () {
@@ -3231,8 +3323,9 @@ var Viewer = function Viewer(_ref) {
   var isEditor = renderContext === 'edit';
   var withoutScreensTransforms = isStatic || isCapture;
   var _usePlaybackContext = contexts.usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    _usePlaybackContext$c = _usePlaybackContext.controls,
+    playing = _usePlaybackContext.playing;
+    _usePlaybackContext.setControls;
+    var _usePlaybackContext$c = _usePlaybackContext.controls,
     playbackControls = _usePlaybackContext$c === void 0 ? false : _usePlaybackContext$c,
     _usePlaybackContext$c2 = _usePlaybackContext.controlsVisible,
     playbackcontrolsVisible = _usePlaybackContext$c2 === void 0 ? false : _usePlaybackContext$c2,
@@ -3253,15 +3346,15 @@ var Viewer = function Viewer(_ref) {
     viewerHeight = _useScreenSizeFromEle.fullHeight,
     screenSize = _useScreenSizeFromEle.screenSize,
     screenScale = _useScreenSizeFromEle.scale;
-  var _ref8 = screenSize || {},
-    _ref8$width = _ref8.width,
-    screenWidth = _ref8$width === void 0 ? null : _ref8$width,
-    _ref8$height = _ref8.height,
-    screenHeight = _ref8$height === void 0 ? null : _ref8$height,
-    _ref8$landscape = _ref8.landscape,
-    landscape = _ref8$landscape === void 0 ? false : _ref8$landscape,
-    _ref8$menuOverScreen = _ref8.menuOverScreen,
-    menuOverScreen = _ref8$menuOverScreen === void 0 ? false : _ref8$menuOverScreen;
+  var _ref9 = screenSize || {},
+    _ref9$width = _ref9.width,
+    screenWidth = _ref9$width === void 0 ? null : _ref9$width,
+    _ref9$height = _ref9.height,
+    screenHeight = _ref9$height === void 0 ? null : _ref9$height,
+    _ref9$landscape = _ref9.landscape,
+    landscape = _ref9$landscape === void 0 ? false : _ref9$landscape,
+    _ref9$menuOverScreen = _ref9.menuOverScreen,
+    menuOverScreen = _ref9$menuOverScreen === void 0 ? false : _ref9$menuOverScreen;
   var screenContainerWidth = screenScale !== null ? screenWidth * screenScale : screenWidth;
   var screenContainerHeight = screenScale !== null ? screenHeight * screenScale : screenHeight;
   var hasSize = screenWidth > 0 && screenHeight > 0;
@@ -3281,6 +3374,16 @@ var Viewer = function Viewer(_ref) {
     }
   }, [ready, landscape, menuOverScreen, onViewModeChange]);
 
+  // CSS variable
+  React.useEffect(function () {
+    if (containerRef.current === null) {
+      return;
+    }
+    if (finalFocusColor !== null) {
+      containerRef.current.style.setProperty('--micromag-focus-color', finalFocusColor);
+    }
+  }, [finalFocusColor]);
+
   /**
    * Screen Transitions
    */
@@ -3300,11 +3403,11 @@ var Viewer = function Viewer(_ref) {
       onScreenChange(screens[index], index);
     }
   }, [screenIndex, screens, onScreenChange]);
-  var onScreenNavigate = React.useCallback(function (_ref9) {
-    var index = _ref9.index,
-      newIndex = _ref9.newIndex,
-      end = _ref9.end,
-      direction = _ref9.direction;
+  var onScreenNavigate = React.useCallback(function (_ref10) {
+    var index = _ref10.index,
+      newIndex = _ref10.newIndex,
+      end = _ref10.end,
+      direction = _ref10.direction;
     if (end && onEnd !== null) {
       onEnd();
     }
@@ -3352,13 +3455,13 @@ var Viewer = function Viewer(_ref) {
     currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
     enableInteraction = _useScreenInteraction.enableInteraction,
     disableInteraction = _useScreenInteraction.disableInteraction;
-  var onTap = React.useCallback(function (_ref10) {
-    var currentTarget = _ref10.currentTarget,
-      event = _ref10.event,
-      target = _ref10.target,
-      _ref10$xy = _slicedToArray(_ref10.xy, 2),
-      x = _ref10$xy[0],
-      y = _ref10$xy[1];
+  var onTap = React.useCallback(function (_ref11) {
+    var currentTarget = _ref11.currentTarget,
+      event = _ref11.event,
+      target = _ref11.target,
+      _ref11$xy = _slicedToArray(_ref11.xy, 2),
+      x = _ref11$xy[0],
+      y = _ref11$xy[1];
     if (event) {
       event.stopPropagation();
     }
@@ -3371,12 +3474,12 @@ var Viewer = function Viewer(_ref) {
       y: y
     });
   }, [interactWithScreen, screenIndex]);
-  var computeScreenProgress = React.useCallback(function (_ref11) {
-    var active = _ref11.active,
-      _ref11$movement = _slicedToArray(_ref11.movement, 1),
-      mx = _ref11$movement[0],
-      _ref11$velocity = _slicedToArray(_ref11.velocity, 1),
-      vx = _ref11$velocity[0];
+  var computeScreenProgress = React.useCallback(function (_ref12) {
+    var active = _ref12.active,
+      _ref12$movement = _slicedToArray(_ref12.movement, 1),
+      mx = _ref12$movement[0],
+      _ref12$velocity = _slicedToArray(_ref12.velocity, 1),
+      vx = _ref12$velocity[0];
     var p = mx / screenContainerWidth; // drag "ratio": how much of the screen width has been swiped?
     var forwards = mx < 0; // true if swiping to left (to navigate forwards)
     var newIndex = !forwards ? screenIndex - 1 : screenIndex + 1; // which item index are we moving towards?
@@ -3389,8 +3492,8 @@ var Viewer = function Viewer(_ref) {
     }
     return screenIndex - progress;
   }, [screenContainerWidth, screenIndex]);
-  var onScreenProgress = React.useCallback(function (progress, _ref12) {
-    var active = _ref12.active;
+  var onScreenProgress = React.useCallback(function (progress, _ref13) {
+    var active = _ref13.active;
     var delta = Math.abs(progress - screenIndex);
     var reachedBounds = progress < 0 || progress >= screensCount; // have we reached the end of the stack?
     if (!active && delta === 1 && !reachedBounds) {
@@ -3427,9 +3530,12 @@ var Viewer = function Viewer(_ref) {
       onProgress: onScreenProgress,
       onTap: onTap,
       springParams: springParams,
-      drapOptions: {
+      dragOptions: {
         filterTaps: true,
-        axis: 'x'
+        axis: 'x',
+        pointer: {
+          keys: false
+        }
       }
     }),
     isDragging = _useDragProgress.dragging,
@@ -3486,11 +3592,11 @@ var Viewer = function Viewer(_ref) {
     menuDotsContainerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
     menuDotsContainerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var onClickScreen = React.useCallback(function (_ref13) {
-    var itemScreenId = _ref13.screenId;
+  var onClickScreen = React.useCallback(function (_ref14) {
+    var itemScreenId = _ref14.screenId;
     onInteractionPrivate();
-    var index = screens.findIndex(function (_ref14) {
-      var id = _ref14.id;
+    var index = screens.findIndex(function (_ref15) {
+      var id = _ref15.id;
       return id === itemScreenId;
     });
     changeIndex(index);
@@ -3513,19 +3619,43 @@ var Viewer = function Viewer(_ref) {
         return toggleFullscreen();
       },
       arrowleft: function arrowleft() {
-        return gotoPreviousScreen();
+        if (!checkDraggable(document.activeElement)) {
+          gotoPreviousScreen();
+        }
       },
       arrowright: function arrowright() {
-        return gotoNextScreen();
-      },
-      ' ': function _() {
-        return gotoNextScreen();
+        if (!checkDraggable(document.activeElement)) {
+          gotoNextScreen();
+        }
       }
+      // ' ': () => gotoNextScreen(),
     };
   }, [gotoPreviousScreen, gotoNextScreen]);
   useKeyboardShortcuts(keyboardShortcuts, {
     disabled: renderContext !== 'view'
   });
+
+  // const onClickSkipToContent = useCallback(() => {
+  //     const contentElement = document.getElementById('content') || null;
+  //     if (contentElement !== null) {
+  //         contentElement.focus();
+  //     }
+  // }, []);
+
+  var onClickSkipToPlaybackControls = React.useCallback(function () {
+    var controlsElement = document.getElementById('controls');
+    if (controlsElement) {
+      var buttons = controlsElement.querySelectorAll('button[tabindex]');
+      var firstFocusableButton = Array.from(buttons).find(function (button) {
+        return button.tabIndex >= 0;
+      });
+      if (firstFocusableButton) {
+        firstFocusableButton.focus({
+          preventScroll: true
+        });
+      }
+    }
+  }, []);
   var _useState5 = React.useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
     currentShareIncentive = _useState6[0],
@@ -3534,26 +3664,26 @@ var Viewer = function Viewer(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     shareIncentiveVisible = _useState8[0],
     setShareIncentiveVisible = _useState8[1];
-  var _ref15 = currentScreen || {},
-    _ref15$header = _ref15.header,
-    header = _ref15$header === void 0 ? null : _ref15$header;
-  var _ref16 = header || {},
-    _ref16$shareIncentive = _ref16.shareIncentive,
-    shareIncentive = _ref16$shareIncentive === void 0 ? null : _ref16$shareIncentive;
-  var _ref17 = shareIncentive || {},
-    _ref17$active = _ref17.active,
-    hasShareIncentive = _ref17$active === void 0 ? false : _ref17$active,
-    _ref17$label = _ref17.label,
-    shareIncentiveLabel = _ref17$label === void 0 ? null : _ref17$label;
-  var _ref18 = currentShareIncentive || {},
+  var _ref16 = currentScreen || {},
+    _ref16$header = _ref16.header,
+    header = _ref16$header === void 0 ? null : _ref16$header;
+  var _ref17 = header || {},
+    _ref17$shareIncentive = _ref17.shareIncentive,
+    shareIncentive = _ref17$shareIncentive === void 0 ? null : _ref17$shareIncentive;
+  var _ref18 = shareIncentive || {},
+    _ref18$active = _ref18.active,
+    hasShareIncentive = _ref18$active === void 0 ? false : _ref18$active,
     _ref18$label = _ref18.label,
-    currentShareIncentiveLabel = _ref18$label === void 0 ? null : _ref18$label;
-  var _ref19 = shareIncentiveLabel || {},
-    _ref19$body = _ref19.body,
-    incentiveLabel = _ref19$body === void 0 ? null : _ref19$body;
-  var _ref20 = currentShareIncentiveLabel || {},
+    shareIncentiveLabel = _ref18$label === void 0 ? null : _ref18$label;
+  var _ref19 = currentShareIncentive || {},
+    _ref19$label = _ref19.label,
+    currentShareIncentiveLabel = _ref19$label === void 0 ? null : _ref19$label;
+  var _ref20 = shareIncentiveLabel || {},
     _ref20$body = _ref20.body,
-    currentIncentiveLabel = _ref20$body === void 0 ? null : _ref20$body;
+    incentiveLabel = _ref20$body === void 0 ? null : _ref20$body;
+  var _ref21 = currentShareIncentiveLabel || {},
+    _ref21$body = _ref21.body,
+    currentIncentiveLabel = _ref21$body === void 0 ? null : _ref21$body;
   React.useEffect(function () {
     setShareIncentiveVisible(true);
     if (hasShareIncentive && shareIncentiveLabel !== currentShareIncentiveLabel) {
@@ -3622,7 +3752,62 @@ var Viewer = function Viewer(_ref) {
     }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$6.landscape, landscape), styles$6.withoutGestures, withoutGestures), styles$6.hideMenu, !menuVisible), styles$6.disableMenu, navigationDisabled), styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), styles$6.ready, ready || withoutScreensTransforms), styles$6.hasInteracted, hasInteracted), styles$6.isDragging, isDragging), className, className)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$6.ariaAnnouncement,
+    id: "announce",
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "AIr8rM",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Screen "
+    }, {
+      "type": 1,
+      "value": "current"
+    }, {
+      "type": 0,
+      "value": " of "
+    }, {
+      "type": 1,
+      "value": "length"
+    }],
+    values: {
+      current: screenIndex + 1,
+      length: screens.length
+    }
+  })), /*#__PURE__*/React.createElement("nav", {
+    "aria-label": intl.formatMessage({
+      id: "gfZs4J",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Skip Links"
+      }]
+    }),
+    className: styles$6.accessibilityLinks
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    onClick: onClickSkipToPlaybackControls,
+    "aria-disabled": withoutPlaybackControls || !playbackcontrolsVisible,
+    "aria-describedby": "disabledReason",
+    className: classNames([styles$6.accessibilityButton, _defineProperty({}, styles$6.disabled, withoutPlaybackControls || !playbackcontrolsVisible)])
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "CnVj9r",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Skip to controls"
+    }]
+  })), withoutPlaybackControls || !playbackcontrolsVisible ? /*#__PURE__*/React.createElement("div", {
+    role: "tooltip",
+    className: styles$6.tooltipBox,
+    id: "disabledReason"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$6.tooltip
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "YXhRxW",
+    defaultMessage: [{
+      "type": 0,
+      "value": "No controls available"
+    }]
+  }))) : null), !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
     withShadow: menuOverScreen && !withoutMenuShadow,
@@ -3652,7 +3837,14 @@ var Viewer = function Viewer(_ref) {
   }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
     direction: "previous",
     className: classNames([styles$6.navButton, styles$6.previous]),
-    onClick: gotoPreviousScreen
+    onClick: gotoPreviousScreen,
+    ariaLabel: intl.formatMessage({
+      id: "zYH/31",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Go to previous screen"
+      }]
+    })
   }) : null, /*#__PURE__*/React.createElement("div", {
     className: styles$6.screensFrame,
     style: {
@@ -3666,7 +3858,10 @@ var Viewer = function Viewer(_ref) {
     var screenStyles = getScreenStylesByIndex(i, progressSpring);
     return /*#__PURE__*/React.createElement(web.animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
+      id: current ? 'content' : null,
+      "aria-hidden": !current,
       style: screenStyles,
+      tabIndex: current ? 0 : -1,
       className: classNames([styles$6.screenContainer, _defineProperty({}, styles$6.current, current)])
     }, screen !== null ? /*#__PURE__*/React.createElement(ViewerScreen, {
       className: styles$6.screen,
@@ -3687,9 +3882,17 @@ var Viewer = function Viewer(_ref) {
   })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
     direction: "next",
     className: classNames([styles$6.navButton, styles$6.next]),
-    onClick: gotoNextScreen
+    onClick: gotoNextScreen,
+    ariaLabel: intl.formatMessage({
+      id: "v9bqYj",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Go to next screen"
+      }]
+    })
   }) : null, !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.playbackControls,
+    id: "controls",
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
     className: styles$6.controls