@eeacms/volto-tabs-block 3.0.1 → 4.0.1

package/CHANGELOG.md

@@ -4,6 +4,36 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [4.0.1](https://github.com/eea/volto-tabs-block/compare/4.0.0...4.0.1) - 4 April 2023
+
+#### :rocket: New Features
+
+- feat(EditBlockWrapper.jsx): add buildStyleClassNamesFromData helper function to import [Miu Razvan - [`b3cd3c8`](https://github.com/eea/volto-tabs-block/commit/b3cd3c84aecea5d858a77cdd208dd669ee4bf328)]
+
+#### :bug: Bug Fixes
+
+- fix(Edit.jsx): add key prop to MenuItem component to avoid warning in console [Miu Razvan - [`55cc784`](https://github.com/eea/volto-tabs-block/commit/55cc784f452637cf686f80a40aef3809784032f6)]
+
+#### :hammer_and_wrench: Others
+
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`52bc1b0`](https://github.com/eea/volto-tabs-block/commit/52bc1b0fbd4611173b8ca9dc2cf4033b31474420)]
+## [4.0.0](https://github.com/eea/volto-tabs-block/compare/3.0.1...4.0.0) - 10 March 2023
+
+#### :house: Internal changes
+
+- chore(accordion): Cleanup menuColor [Alin Voinea - [`de63905`](https://github.com/eea/volto-tabs-block/commit/de639056210d426d64e2e4762aeec2e215563854)]
+- chore(typo): Fix typo accesibilty [Alin Voinea - [`cc7754e`](https://github.com/eea/volto-tabs-block/commit/cc7754eeb2e224966f942b9053638c3db94d834c)]
+
+#### :hammer_and_wrench: Others
+
+- Release 4.0.0 [Alin Voinea - [`8fc4cc9`](https://github.com/eea/volto-tabs-block/commit/8fc4cc9d8dc71e623e6586b95871cb3b98dc385f)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`22d5bdc`](https://github.com/eea/volto-tabs-block/commit/22d5bdc1b3579cc46c73ce855041ca09154eb502)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`fde4324`](https://github.com/eea/volto-tabs-block/commit/fde4324f962cde8e8de0d76a44bee4b67d216bf8)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9175e47`](https://github.com/eea/volto-tabs-block/commit/9175e470d793edc63b62a99940aed25dd45f3713)]
+- test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`3348950`](https://github.com/eea/volto-tabs-block/commit/334895036f8e367281abb35a20879c32dfbfc292)]
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`39bfb39`](https://github.com/eea/volto-tabs-block/commit/39bfb39fa6e8483e639491ff998293e758ac6384)]
+- yarn 3 [Alin Voinea - [`7e98df5`](https://github.com/eea/volto-tabs-block/commit/7e98df59669d71945be461e86e282b913538b805)]
+- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`079d7a4`](https://github.com/eea/volto-tabs-block/commit/079d7a43480e92fe280a9372399ff2d4d28537ae)]
 ### [3.0.1](https://github.com/eea/volto-tabs-block/compare/3.0.0...3.0.1) - 16 November 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "3.0.1",
+  "version": "4.0.1",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,8 +26,8 @@
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

package/src/components/EditBlockWrapper.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Icon, BlockChooser } from '@plone/volto/components';
-import { blockHasValue } from '@plone/volto/helpers';
+import {
+  blockHasValue,
+  buildStyleClassNamesFromData,
+} from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { Button } from 'semantic-ui-react';
 import includes from 'lodash/includes';
@@ -81,12 +84,16 @@ class EditBlockWrapper extends React.Component {
       ? data.required
       : includes(config.blocks.requiredBlocks, type);
 
+    const styles = buildStyleClassNamesFromData(data.styles);
+
     return (
       <div ref={this.blockNode} className="block-wrapper">
         <div
           ref={draginfo?.innerRef}
           {...(selected ? draginfo?.draggableProps : null)}
-          className={`block-editor-${data['@type']}`}
+          className={cx(`block-editor-${data['@type']}`, styles, {
+            [data.align]: data.align,
+          })}
         >
           {!selected && (
             <div

package/src/components/View.jsx

@@ -47,6 +47,7 @@ const View = (props) => {
         >
           <TabsView
             {...props}
+            tabIndex={0}
             activeTab={activeTab}
             activeTabIndex={activeTabIndex}
             node={view}

package/src/components/templates/accordion/View.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
@@ -31,7 +31,12 @@ class Tab extends React.Component {
 
   render() {
     return (
-      <AnimateHeight animateOpacity duration={500} height={this.state.height}>
+      <AnimateHeight
+        animateOpacity
+        duration={500}
+        height={this.state.height}
+        aria-hidden={false}
+      >
         <RenderBlocks {...this.props} />
       </AnimateHeight>
     );
@@ -45,7 +50,9 @@ const View = (props) => {
     tabs = {},
     activeTabIndex = 0,
     setActiveTab = () => {},
+    id,
   } = props;
+
   const accordionConfig =
     config.blocks.blocksConfig[TABS_BLOCK].templates?.['accordion'] || {};
   const { icons, semanticIcon, transformWidth = 800 } = accordionConfig;
@@ -94,7 +101,9 @@ const View = (props) => {
           {title || defaultTitle}{' '}
         </>
       ),
-      getContent: () => <Tab {...props} tab={tab} content={tabs[tab]} />,
+      getContent: () => (
+        <Tab {...props} tab={tab} content={tabs[tab]} aria-hidden={false} />
+      ),
       key: tab,
       tabClassName: cx('ui button item title', { active }),
       panelClassName: cx('ui bottom attached segment tab', {
@@ -115,12 +124,36 @@ const View = (props) => {
     );
   }, [mounted]);
 
+  useLayoutEffect(() => {
+    if (document.activeElement.role !== 'tab') return;
+    if (
+      document.getElementById(id)?.getElementsByClassName('tab active').length >
+      0
+    ) {
+      let activeTabDiv = document
+        .getElementById(id)
+        .getElementsByClassName('tab active')[0];
+      activeTabDiv.setAttribute('tabindex', '0');
+      activeTabDiv.setAttribute('className', 'accessibility-accordion-tab');
+      activeTabDiv.focus();
+    }
+  }, [activeTabIndex, id]);
+
   return (
-    <>
+    <div
+      tabIndex="0"
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          const focusedElement = document.activeElement;
+          if (focusedElement) focusedElement.click();
+        }
+      }}
+      role="tab"
+    >
       <Tabs
         ref={tabsContainer}
         transformWidth={initialWidth}
-        className="tabs aa"
         selectedTabKey={tabsList[activeTabIndex]}
         items={items}
         onChange={(tab) => {
@@ -131,15 +164,17 @@ const View = (props) => {
           }
         }}
         tabsWrapperClass={cx(
+          props?.data?.accordionIconRight ? 'tabs-accordion-icon-right' : '',
           'ui pointing secondary menu',
-          getDataValue('menuColor'),
+          'tabs-accessibility',
+          data?.theme ? `theme-${data?.theme}` : '',
           {
             inverted: getDataValue('menuInverted'),
           },
         )}
         showMore={false}
       />
-    </>
+    </div>
   );
 };
 

package/src/components/templates/accordion/schema.js

@@ -1,3 +1,5 @@
+import config from '@plone/volto/registry';
+
 export default () => ({
   title: 'Accordion tabs block',
   fieldsets: [
@@ -9,36 +11,40 @@ export default () => ({
     {
       id: 'menu',
       title: 'Menu',
-      fields: ['menuColor', 'menuInverted'],
+      fields: ['menuInverted', 'accordionIconRight'],
+    },
+    {
+      id: 'style',
+      title: 'Style',
+      fields: ['theme'],
     },
   ],
   properties: {
     description: {
       title: 'Description',
     },
-    menuColor: {
-      title: 'Color',
-      defaultValue: 'green',
-      choices: [
-        ['red', 'Red'],
-        ['orange', 'Orange'],
-        ['yellow', 'Yellow'],
-        ['olive', 'Olive'],
-        ['green', 'Green'],
-        ['teal', 'Teal'],
-        ['blue', 'Blue'],
-        ['violet', 'Violet'],
-        ['purple', 'Purple'],
-        ['pink', 'Pink'],
-        ['brown', 'Brown'],
-        ['grey', 'Grey'],
-        ['black', 'Black'],
-      ],
+    accordionIconRight: {
+      title: 'Icon position on the right',
+      description: 'Position left/right of the icon in the accordion tab',
+      type: 'boolean',
     },
     menuInverted: {
       title: 'Inverted',
       type: 'boolean',
     },
+    theme: {
+      title: 'Theme',
+      description: 'Set the theme for the accordion tabs block',
+      widget: 'theme_picker',
+      colors: [
+        ...(config.settings && config.settings.themeColors
+          ? config.settings.themeColors.map(({ value, title }) => ({
+              name: value,
+              label: title,
+            }))
+          : []),
+      ],
+    },
   },
   required: [],
 });

package/src/components/templates/carousel/HorizontalView.jsx

@@ -29,6 +29,7 @@ const Dots = (props) => {
           >
             <button
               aria-label={`Select slide ${index + 1}`}
+              tabIndex={0}
               onClick={() => {
                 if (slider.current) {
                   slider.current.slickGoTo(index);
@@ -65,6 +66,7 @@ const ArrowsGroup = (props) => {
               slider.current.slickPrev();
             }
           }}
+          tabIndex={0}
         >
           <Icon name={leftArrowSVG} size="50px" />
         </button>
@@ -80,6 +82,7 @@ const ArrowsGroup = (props) => {
               slider.current.slickNext();
             }
           }}
+          tabIndex={0}
         >
           <Icon name={rightArrowSVG} size="50px" />
         </button>
@@ -93,6 +96,7 @@ const ArrowsGroup = (props) => {
 const View = (props) => {
   const slider = React.useRef(null);
   const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+  const blockId = props.id;
   const {
     activeTab = null,
     data = {},
@@ -128,10 +132,24 @@ const View = (props) => {
       for (let element of slider.current.innerSlider.list.querySelectorAll(
         ".slick-slide[aria-hidden='true'] a",
       )) {
-        element.setAttribute('aria-hiden', 'true');
+        element.setAttribute('aria-hidden', 'false');
       }
     });
   }, [activeTab]);
+  React.useEffect(() => {
+    if (!slider.current?.innerSlider?.list) return;
+    let unaccesibileElements = slider.current.innerSlider.list.querySelectorAll(
+      '.slick-slide',
+    );
+    for (let element of unaccesibileElements) {
+      element.setAttribute('tabindex', '0');
+      element.setAttribute('aria-hidden', 'false');
+      element.style.removeProperty('outline');
+    }
+    if (document.getElementsByClassName('slick-slider')?.length > 0)
+      for (let carouselDiv of document.getElementsByClassName('slick-slider'))
+        carouselDiv.setAttribute('tabindex', '0');
+  }, []);
 
   React.useEffect(() => {
     const urlHash = props.location.hash.substring(1) || '';
@@ -183,7 +201,24 @@ const View = (props) => {
 
   return (
     <>
-      <Slider {...settings} ref={slider} className={cx(uiContainer)}>
+      <Slider
+        {...settings}
+        ref={slider}
+        className={cx(uiContainer, 'tabs-accessibility')}
+        accessibility={true}
+        afterChange={() => {
+          if (
+            document
+              .getElementById(blockId)
+              ?.getElementsByClassName('slick-slider')?.length > 0
+          ) {
+            document
+              .getElementById(blockId)
+              .getElementsByClassName('slick-current')[0]
+              .focus();
+          }
+        }}
+      >
         {panes.length ? panes.map((pane) => pane.renderItem) : ''}
       </Slider>
       <ArrowsGroup activeTab={activeTab} tabsList={tabsList} slider={slider} />

package/src/components/templates/default/Edit.jsx

@@ -193,6 +193,7 @@ const Edit = (props) => {
       menuItem: (
         <MenuItem
           {...props}
+          key={tab}
           editingTab={editingTab}
           index={index}
           setEditingTab={setEditingTab}
@@ -274,7 +275,10 @@ const Edit = (props) => {
         menu={{
           attached: menuPosition.attached,
           borderless: getDataValue('menuBorderless'),
-          color: getDataValue('menuColor'),
+          color:
+            props?.template === 'accordion' && props?.data?.theme
+              ? `theme-${props?.data?.theme}`
+              : getDataValue('menuColor'),
           compact: getDataValue('menuCompact'),
           fluid: getDataValue('menuFluid'),
           inverted: getDataValue('menuInverted'),

package/src/components/templates/default/View.jsx

@@ -22,11 +22,12 @@ const MenuItem = (props) => {
     setActiveTab = () => {},
     tabsTitle,
     tabsDescription,
+    blockId,
   } = props;
+
   const { tab, index } = props;
   const title = tabs[tab].title;
   const tabIndex = index + 1;
-
   const defaultTitle = `Tab ${tabIndex}`;
 
   return (
@@ -40,11 +41,30 @@ const MenuItem = (props) => {
       <Menu.Item
         name={defaultTitle}
         active={tab === activeTab}
+        tabIndex={0}
         onClick={() => {
           if (activeTab !== tab) {
             setActiveTab(tab);
           }
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            if (
+              document
+                .getElementById(blockId)
+                ?.getElementsByClassName('active tab').length > 0
+            ) {
+              const tabDiv = document
+                .getElementById(blockId)
+                .getElementsByClassName('active tab')[0];
+              tabDiv.focus();
+            }
+            if (activeTab !== tab) {
+              setActiveTab(tab);
+            }
+          }
+        }}
       >
         <span className={'menu-item-count'}>{tabIndex}</span>
         <p className={'menu-item-text'}>{title || defaultTitle}</p>
@@ -64,7 +84,6 @@ const View = (props) => {
     hashlink = {},
     setActiveTab = () => {},
   } = props;
-
   const [menuPosition, setMenuPosition] = React.useState({});
 
   React.useEffect(() => {
@@ -134,11 +153,12 @@ const View = (props) => {
           index={index}
           tabsTitle={tabsTitle}
           tabsDescription={tabsDescription}
+          blockId={props?.id || ''}
         />
       ),
       render: () => {
         return (
-          <Tab.Pane as={isContainer ? Container : undefined}>
+          <Tab.Pane as={isContainer ? Container : undefined} tabIndex={0}>
             <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
           </Tab.Pane>
         );
@@ -150,7 +170,7 @@ const View = (props) => {
     <>
       <Tab
         activeIndex={activeTabIndex}
-        className="default tabs"
+        className="default tabs tabs-accessibility"
         menu={{
           attached: menuPosition.attached,
           borderless: getDataValue('menuBorderless'),

package/src/components/templates/horizontal-responsive/View.jsx

@@ -18,30 +18,76 @@ import {
 import '@eeacms/volto-tabs-block/less/menu.less';
 
 const MenuItem = (props) => {
-  const { activeTab = null, tabs = {}, setActiveTab = () => {} } = props;
+  const {
+    activeTab = null,
+    tabs = {},
+    setActiveTab = () => {},
+    blockId,
+  } = props;
   const { tabsTitle, tabsDescription, tab, index } = props;
   const title = tabs[tab].title;
   const tabIndex = index + 1;
-
   const defaultTitle = `Tab ${tabIndex}`;
 
   return (
     <React.Fragment>
       {index === 0 && (tabsTitle || tabsDescription) && (
-        <Menu.Item className="menu-title">
+        <Menu.Item
+          className="menu-title"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              if (
+                document
+                  .getElementById(blockId)
+                  ?.getElementsByClassName('active tab')?.length > 0
+              ) {
+                const tabDiv = document
+                  .getElementById(blockId)
+                  .getElementsByClassName('active tab')[0];
+                tabDiv.focus();
+              }
+              if (activeTab !== tab) {
+                setActiveTab(tab);
+              }
+            }
+          }}
+        >
           <SimpleMarkdown md={tabsTitle} defaultTag="##" className="title" />
           <SimpleMarkdown md={tabsDescription} className="description" />
         </Menu.Item>
       )}
       <Button
         as="a"
-        className={cx('item', { active: tab === activeTab })}
+        tabIndex={0}
+        className={cx('item', 'accesibility-button', {
+          active: tab === activeTab,
+        })}
         item-data={tab}
         onClick={() => {
           if (activeTab !== tab) {
             setActiveTab(tab);
           }
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            if (
+              document
+                .getElementById(blockId)
+                ?.getElementsByClassName('active tab').length > 0
+            ) {
+              const tabDiv = document
+                .getElementById(blockId)
+                .getElementsByClassName('active tab')[0];
+              tabDiv.focus();
+            }
+            if (activeTab !== tab) {
+              setActiveTab(tab);
+            }
+          }
+        }}
       >
         <span className={'menu-item-count'}>{tabIndex}</span>
         <p className={'menu-item-text'}>{title || defaultTitle}</p>
@@ -92,7 +138,7 @@ const MenuWrapper = (props) => {
 
   return (
     <React.Fragment>
-      <div className="menu-wrapper">
+      <div className="menu-wrapper tabs-accessibility">
         {panes.map((pane, index) => (
           <React.Fragment key={`menu-item-${index}-${pane.id}`}>
             {pane.menuItem}
@@ -207,6 +253,7 @@ const View = (props) => {
           key={tab}
           tab={tab}
           tabsList={tabsList}
+          blockId={props.id}
           index={index}
           lastIndex={tabsList.length - 1}
           tabsTitle={tabsTitle}
@@ -216,7 +263,7 @@ const View = (props) => {
       render: () => {
         return (
           <>
-            <Tab.Pane as={isContainer ? Container : undefined}>
+            <Tab.Pane as={isContainer ? Container : undefined} tabIndex={0}>
               <RenderBlocks
                 {...props}
                 metadata={metadata}

package/src/less/menu.less

@@ -55,12 +55,10 @@
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        background: @menuTitleBackgrounnd;
         font-size: @menuTitleFontSize;
         font-weight: @menuTitleFontWeight;
 
         &:hover {
-          background: @menuTitleHoverBackground;
           color: @menuTitleHoverColor;
         }
 
@@ -143,6 +141,13 @@
     }
   }
 
+  .ui.menu.RRT__accordion.tabs-accordion-icon-right {
+    .ui.item {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+  }
+
   .ui.menu.RRT__accordion {
     &::before {
       display: none;
@@ -153,11 +158,9 @@
     .ui.item {
       display: flex;
       width: 100%;
-      padding: 0.75rem 1rem !important;
-      border-width: 0 !important;
-      border-bottom: none !important;
+      padding: 0 1rem !important;
+      border-bottom: 0.0625rem solid #e6e7e8;
       margin: 0 !important;
-      background-color: @accordionMenuItemBackground;
 
       .icon {
         margin: 0 !important;
@@ -174,7 +177,58 @@
       }
     }
 
+    .RRT__tab:not(.active) .icon {
+      color: #808285;
+    }
+
+    &.theme-primary {
+      .ui.item:not(.active):hover {
+        color: @primaryColor !important;
+
+        .icon {
+          color: @primaryColor !important;
+        }
+      }
+
+      .ui.item.active {
+        background-color: @primaryColor !important;
+        color: #fff !important;
+      }
+    }
+
+    &.theme-secondary {
+      .ui.item:not(.active):hover {
+        color: @secondaryColor !important;
+
+        .icon {
+          color: @secondaryColor !important;
+        }
+      }
+
+      .ui.item.active {
+        background-color: @secondaryColor !important;
+        color: #fff !important;
+      }
+    }
+
+    &.theme-tertiary {
+      .ui.item:not(.active):hover {
+        color: @tertiaryColor !important;
+
+        .icon {
+          color: @tertiaryColor !important;
+        }
+      }
+
+      .ui.item.active {
+        background-color: @tertiaryColor !important;
+        color: #fff !important;
+      }
+    }
+
     &.red {
+      color: @red !important;
+
       .ui.item.active {
         background-color: @red !important;
         color: #fff !important;
@@ -182,6 +236,10 @@
     }
 
     &.orange {
+      .ui.item:hover {
+        color: @orange !important;
+      }
+
       .ui.item.active {
         background-color: @orange !important;
         color: #fff !important;
@@ -189,6 +247,10 @@
     }
 
     &.yellow {
+      .ui.item:hover {
+        color: @yellow !important;
+      }
+
       .ui.item.active {
         background-color: @yellow !important;
         color: #fff !important;
@@ -196,6 +258,10 @@
     }
 
     &.olive {
+      .ui.item:hover {
+        color: @olive !important;
+      }
+
       .ui.item.active {
         background-color: @olive !important;
         color: #fff !important;
@@ -203,6 +269,10 @@
     }
 
     &.green {
+      .ui.item:hover {
+        color: @green !important;
+      }
+
       .ui.item.active {
         background-color: @green !important;
         color: #fff !important;
@@ -210,6 +280,10 @@
     }
 
     &.teal {
+      .ui.item:hover {
+        color: @teal !important;
+      }
+
       .ui.item.active {
         background-color: @teal !important;
         color: #fff !important;
@@ -217,6 +291,10 @@
     }
 
     &.blue {
+      .ui.item:hover {
+        color: @blue !important;
+      }
+
       .ui.item.active {
         background-color: @blue !important;
         color: #fff !important;
@@ -224,6 +302,10 @@
     }
 
     &.violet {
+      .ui.item:hover {
+        color: @violet !important;
+      }
+
       .ui.item.active {
         background-color: @violet !important;
         color: #fff !important;
@@ -231,6 +313,10 @@
     }
 
     &.purple {
+      .ui.item:hover {
+        color: @purple !important;
+      }
+
       .ui.item.active {
         background-color: @purple !important;
         color: #fff !important;
@@ -238,6 +324,10 @@
     }
 
     &.brown {
+      .ui.item:hover {
+        color: @brown !important;
+      }
+
       .ui.item.active {
         background-color: @brown !important;
         color: #fff !important;
@@ -245,6 +335,10 @@
     }
 
     &.grey {
+      .ui.item:hover {
+        color: @grey !important;
+      }
+
       .ui.item.active {
         background-color: @grey !important;
         color: #fff !important;
@@ -252,6 +346,10 @@
     }
 
     &.black {
+      .ui.item:hover {
+        color: @black !important;
+      }
+
       .ui.item.active {
         background-color: @black !important;
         color: #fff !important;
@@ -266,4 +364,70 @@
   }
 }
 
+.ui.menu.RRT__tabs {
+  .item.ui {
+    color: #323232;
+  }
+
+  &.theme-primary {
+    .item.ui:hover {
+      color: @primaryColor !important;
+    }
+
+    .item.ui.active {
+      border-bottom: 0.1875rem solid @primaryColor !important;
+      color: @primaryColor !important;
+    }
+  }
+
+  &.theme-secondary {
+    .item.ui:hover {
+      color: @secondaryColor !important;
+    }
+
+    .item.ui.active {
+      border-bottom: 0.1875rem solid @secondaryColor !important;
+      color: @secondaryColor !important;
+    }
+  }
+
+  &.theme-tertiary {
+    .item.ui:hover {
+      color: @tertiaryColor !important;
+    }
+
+    .ui.item.active {
+      border-bottom: 0.1875rem solid @tertiaryColor !important;
+      color: @tertiaryColor !important;
+    }
+  }
+}
+
+.tabs-block {
+  .theme-primary {
+    .active.item {
+      border-bottom: 0.1875rem solid @primaryColor !important;
+      color: @primaryColor !important;
+    }
+  }
+
+  .theme-secondary {
+    .active.item {
+      border-bottom: 0.1875rem solid @secondaryColor !important;
+      color: @secondaryColor !important;
+    }
+  }
+
+  .theme-tertiary {
+    .active.item {
+      border-bottom: 0.1875rem solid @tertiaryColor !important;
+      color: @tertiaryColor !important;
+    }
+  }
+}
+
+// .tabs-block .ui.menu.RRT__accordion .ui.item .icon {
+//   color: #808285;
+// }
+
 .loadAddonOverrides();

package/src/less/menu.variables

@@ -20,3 +20,8 @@
 
 @accordionMenuItemBackground: #F3F4F5;
 @accordionTabBackground: transparent;
+
+/* Theme variables */
+@primaryColor         : #004B7F;
+@secondaryColor       : #007B6C;
+@tertiaryColor        : #3D5265;

package/src/less/tabs.less

@@ -7,6 +7,31 @@
 .loadAddonVariables();
 
 .tabs-block {
+  .tabs-accessibility {
+    .ui.button.item:focus-visible {
+      outline: 1px dotted #212121 !important;
+      outline: 5px auto -webkit-focus-ring-color !important;
+    }
+
+    a:focus-visible {
+      outline: 1px dotted #212121 !important;
+      outline: 5px auto -webkit-focus-ring-color !important;
+    }
+
+    .slick-current:focus-visible {
+      outline: 1px dotted #212121 !important;
+      outline: 5px auto -webkit-focus-ring-color !important;
+    }
+
+    .accessibility-accordion-tab {
+      outline: none;
+    }
+
+    .accessibility-accordion-tab:focus-visible {
+      outline: 1px dotted #212121 !important;
+      outline: 5px auto -webkit-focus-ring-color !important;
+    }
+  }
   color: @tabsBlockColor;
 
   > .styled {