@eeacms/volto-eea-design-system 1.0.6 → 1.0.7

package/theme/themes/eea/collections/breadcrumb.overrides

@@ -10,6 +10,17 @@
     margin-right: 0;
   }
 }
+
+.ui.breadcrumb ol {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+  padding-top: @space-025;
+  li {
+    display: inline-block;
+  }
+}
+
 /*******************************
         Theme Overrides
 *******************************/

package/theme/themes/eea/elements/button.overrides

@@ -33,7 +33,8 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     outline: none;
   }
 }
@@ -56,7 +57,8 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     outline: none;
   }
 }
@@ -112,19 +114,23 @@
 /* Text Button */
 button.ui.button.text,
 button.ui.buttons.text,
+a.ui.button.text,
 p.ui.button {
   background-color: @textButtonBackground;
   color: @primaryColor;
   text-decoration: underline;
+  padding: @textButtonPadding;
 
   &:hover,
   &:active,
-  &:focus {
+  &:focus,
+  &:focus-visible {
     background-color: @textButtonBackground;
     color: @primaryColorHover;
   }
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     box-shadow: @textButtonFocusedBoxShadow;
   }
 }
@@ -141,6 +147,7 @@ p.ui.button {
   &:active,
   &:visited,
   &:focus,
+  &:focus-visible,
   &:hover {
     border: @buttonBorder @white;
     background: @searchButtonBackground;
@@ -193,6 +200,8 @@ p.ui.button {
 .ui.inverted.primary.button:hover,
 .ui.inverted.primary.buttons .button:focus,
 .ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button:focus-visible,
+.ui.inverted.primary.button:focus-visible,
 .ui.inverted.primary.buttons .button.active,
 .ui.inverted.primary.button.active,
 .ui.inverted.primary.buttons .button:active,
@@ -206,7 +215,9 @@ p.ui.button {
 }
 
 .ui.inverted.primary.buttons .button:focus,
-.ui.inverted.primary.button:focus {
+.ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button:focus-visible,
+.ui.inverted.primary.button:focus-visible {
   background-color: @primaryColorFocus;
 }
 
@@ -231,6 +242,8 @@ p.ui.button {
 .ui.inverted.secondary.button:hover,
 .ui.inverted.secondary.buttons .button:focus,
 .ui.inverted.secondary.button:focus,
+.ui.inverted.secondary.buttons .button:focus-visible,
+.ui.inverted.secondary.button:focus-visible,
 .ui.inverted.secondary.buttons .button.active,
 .ui.inverted.secondary.button.active,
 .ui.inverted.secondary.buttons .button:active,
@@ -244,7 +257,9 @@ p.ui.button {
 }
 
 .ui.inverted.secondary.buttons .button:focus,
-.ui.inverted.secondary.button:focus {
+.ui.inverted.secondary.button:focus,
+\.ui.inverted.secondary.buttons .button:focus-visible,
+.ui.inverted.secondary.button:focus-visible {
   background-color: @secondaryColorFocus;
 }
 
@@ -275,6 +290,8 @@ p.ui.button {
 .ui.inverted.tertiary.button:hover,
 .ui.inverted.tertiary.buttons .button:focus,
 .ui.inverted.tertiary.button:focus,
+.ui.inverted.tertiary.buttons .button:focus-visible,
+.ui.inverted.tertiary.button:focus-visible,
 .ui.inverted.tertiary.buttons .button.active,
 .ui.inverted.tertiary.button.active,
 .ui.inverted.tertiary.buttons .button:active,
@@ -289,7 +306,9 @@ p.ui.button {
 }
 
 .ui.tertiary.buttons .button:focus,
-.ui.tertiary.button:focus {
+.ui.tertiary.button:focus,
+.ui.tertiary.buttons .button:focus-visible,
+.ui.tertiary.button:focus-visible {
   background-color: @tertiaryColorFocus;
 }
 

package/theme/themes/eea/elements/button.variables

@@ -38,6 +38,7 @@
 
 /* Text Button */
 @textButtonBackground: transparent;
+@textButtonPadding: @em-space-1 @em-space-3;
 @textButtonFocusedBoxShadow: 0 0 0 2px @primaryColorHover inset;
 
 /* Search Button */

package/theme/themes/eea/elements/label.overrides

@@ -33,25 +33,25 @@
 
 /* Link */
 .ui.low.labels .label:hover,
-a.ui.low.label:hover{
+.ui.low.label:hover{
   background-color: @lowImportanceHoverBackground;
   border-color: @lowImportanceHoverBackground;
 }
 
 .ui.medium.labels .label:hover,
-a.ui.medium.label:hover{
+.ui.medium.label:hover{
   background-color: @mediumImportanceHoverBackground;
   border-color: @mediumImportanceHoverBackground;
 }
 
 .ui.high.labels .label:hover,
-a.ui.high.label:hover{
+.ui.high.label:hover{
   background-color: @highImportanceHoverBackground;
   border-color: @highImportanceHoverBackground;
 }
 
 .ui.highlight.labels .label:hover,
-a.ui.highlight.label:hover{
+.ui.highlight.label:hover{
   background-color: @highlightImportanceHoverBackground;
   border-color: @highlightImportanceHoverBackground;
 }
@@ -80,7 +80,7 @@ a.ui.highlight.label:hover{
   border-color: @lowImportanceBackground;
 }
 .ui.basic.low.labels a.label:hover,
-a.ui.basic.low.label:hover {
+.ui.basic.low.label:hover {
   background-color: @white;
   color: @lowImportanceHoverBackground;
   border-color: @lowImportanceHoverBackground;
@@ -92,7 +92,7 @@ a.ui.basic.low.label:hover {
   border-color: @mediumImportanceBackground;
 }
 .ui.basic.medium.labels a.label:hover,
-a.ui.basic.medium.label:hover {
+.ui.basic.medium.label:hover {
   background-color: @white;
   color: @mediumImportanceHoverBackground;
   border-color: @mediumImportanceHoverBackground;
@@ -104,7 +104,7 @@ a.ui.basic.medium.label:hover {
   border-color: @highImportanceBackground;
 }
 .ui.basic.high.labels a.label:hover,
-a.ui.basic.high.label:hover {
+.ui.basic.high.label:hover {
   background-color: @white;
   color: @highImportanceHoverBackground;
   border-color: @highImportanceHoverBackground;
@@ -116,7 +116,7 @@ a.ui.basic.high.label:hover {
   border-color: @highlightImportanceBackground;
 }
 .ui.basic.highlight.labels a.label:hover,
-a.ui.basic.highlight.label:hover {
+.ui.basic.highlight.label:hover {
   background-color: @white;
   color: @highlightImportanceHoverBackground;
   border-color: @highlightImportanceHoverBackground;
@@ -164,3 +164,7 @@ a.ui.basic.highlight.label:hover {
     background: @labelNoBackground;
   }
 }
+
+.ui.corner.label i.icon:hover {
+  cursor: pointer;
+}

package/theme/themes/eea/extras/contextNavigation.less

@@ -24,7 +24,8 @@
   font-weight: @sidenavItemFontWeight;
   color      : @sidenavItemColor;
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background: @sidenavItemHoverBackground;
     color     : @sidenavItemHoverColor;
   }
@@ -92,7 +93,8 @@
   color: @sidenavItemActiveColor;
   font-weight: @sidenavItemActiveFontWeight;
 }
-.context-navigation .active.item > .content > a:hover {
+.context-navigation .active.item > .content > a:hover,
+.context-navigation .active.item > .content > a:focus-visible {
   color : @sidenavItemActiveColorHover;
 }
 

package/theme/themes/eea/extras/contextNavigation.variables

@@ -7,7 +7,7 @@
 @sidenavBackground: @grey-0;
 @sidenavMarginRight: @rem-space-4;
 @sidenavPaddingLeft: @rem-space-4;
-@sidenavOverflow: hidden;
+@sidenavOverflow: inherit;
 @sidenavMargin: @rem-space-8 auto;
 
 /* Header */

package/theme/themes/eea/extras/downloadLabeledIcon.less

@@ -14,28 +14,35 @@
   min-width: @downloadLabeledIconMinWidth;
   text-align: @downloadLabeledIconTextAlign;
 
-  .label {
-    width: @downloadLabeledIconLabelWidth;
-    font-size: @downloadLabeledIconLabelFontSize;
-    color: @downloadLabeledIconLabelColor;
-    cursor: pointer;
+  button {
+    text-decoration: none;
   }
-  .icon.wrapper {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    width: @downloadLabeledIconWrapperWidth;
-    padding: @downloadLabeledIconWrapperPadding;
+}
 
-    .icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-size: @downloadLabeledIconIconFontSize;
-      color: @downloadLabeledIconColor;
-      width: @downloadLabeledIconIconWidth;
-      height: @downloadLabeledIconWrapperIconHeight;
-    }
+.eea.download.labeled.icon .label {
+  width: @downloadLabeledIconLabelWidth;
+  font-size: @downloadLabeledIconLabelFontSize;
+  font-weight: @downloadLabeledIconLabelFontWeight;
+  color: @downloadLabeledIconLabelColor;
+  cursor: pointer;
+}
+
+.eea.download.labeled.icon .icon.wrapper {
+  height: @downloadLabeledIconWrapperMinHeight;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  width: @downloadLabeledIconWrapperWidth;
+  padding-bottom: @downloadLabeledIconWrapperPaddingBottom;
+
+  .icon {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: @downloadLabeledIconIconFontSize;
+    color: @downloadLabeledIconColor;
+    width: @downloadLabeledIconIconWidth;
+    height: @downloadLabeledIconWrapperIconHeight;
   }
 }
 
@@ -72,10 +79,12 @@
             line-height: @downloadLabeledIconLinkIconLineHeight;
           }
         }
-        a:hover {
+        a:hover,
+        a:focus-visible {
           color: @downloadLabeledIconALinkColorHover;
         }
-        li:hover {
+        li:hover,
+        li a:focus-visible {
           background-color: @downloadLabeledIconLiHover;
         }
       }

package/theme/themes/eea/extras/downloadLabeledIcon.variables

@@ -9,37 +9,39 @@
 
 /* Label */
 @downloadLabeledIconLabelWidth: 100%;
-@downloadLabeledIconLabelFontSize: 0.875rem;
-@downloadLabeledIconLabelColor: @deepBlue;
+@downloadLabeledIconLabelFontSize: @font-size-0;
+@downloadLabeledIconLabelFontWeight: @font-weight-4;
+@downloadLabeledIconLabelColor: @tertiaryColor;
 
 /* Wrapper */
+@downloadLabeledIconWrapperMinHeight: @rem-space-8;
 @downloadLabeledIconWrapperWidth: 100%;
-@downloadLabeledIconWrapperPadding: 0.5rem;
+@downloadLabeledIconWrapperPaddingBottom: @rem-space-1;
 
 /* Icon */
 @downloadLabeledIconIconFontSize: 1.563rem;
 @downloadLabeledIconWrapperIconHeight: 1.25rem;
 @downloadLabeledIconIconWidth: 1.25rem;
-@downloadLabeledIconColor: @mediumPersianBlue;
+@downloadLabeledIconColor: @lightPrimaryColor;
 
 /* Link Wrapper */
-@downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9;
-@downloadLabeledIconLinkWrapperZIndex: 1;
+@downloadLabeledIconLinkWrapperBackgroundColor: @grey-1;
+@downloadLabeledIconLinkWrapperZIndex: @z-index-1;
 @downloadLabeledIconLinkWrapperWidth: 100%;
 
 /* Dropdown */
 @downloadLabeledIconDropdownWIdth: 100%;
 
 /* List */
-@downloadLabeledIconUlMargin: 0.25rem 0;
-@downloadLabeledIconUlPaddingInlineStart: 0.25rem 0px;
-@downloadLabeledIconLiHover: @japaneseIndigo;
+@downloadLabeledIconUlMargin: @rem-space-1 0;
+@downloadLabeledIconUlPaddingInlineStart: @rem-space-1 0px;
+@downloadLabeledIconLiHover: @darkTertiaryColor;
 
 /* Link */
 @downloadLabeledIconALinkFontWeight: 700;
-@downloadLabeledIconLinkFontSize: 0.875rem;
-@downloadLabeledIconLinkIconFontSize: 1rem;
-@downloadLabeledIconLinkIconPadding: 0.125rem 0.875rem;
+@downloadLabeledIconLinkFontSize: @font-size-0;
+@downloadLabeledIconLinkIconFontSize: @font-size-1;
+@downloadLabeledIconLinkIconPadding: @rem-space-050 @rem-space-3-5;
 @downloadLabeledIconLinkIconLineHeight: 1.25rem;
-@downloadLabeledIconALinkColor: @japaneseIndigo;
-@downloadLabeledIconALinkColorHover: @white;
+@downloadLabeledIconALinkColor: @darkTertiaryColor;
+@downloadLabeledIconALinkColorHover: @grey-0;

package/theme/themes/eea/extras/header.less

@@ -785,6 +785,12 @@
   }
 }
 
+// add negative margin to the first column subtitle from nested grid
+// so that the subtitle lines up with the subtitle from the left column
+#mega-menu .nested-grid > .column:first-of-type .sub-title {
+  margin-top: @megaMenuSubTitleCountriesNestedGridMarginTop;
+}
+
 #topics-right-column {
   padding-left: @topicsRightColumnPaddingLeft;
 }
@@ -930,6 +936,8 @@
     color: @megaMenuTextColor;
     font-size: @computerMegaMenuSubTitleFontSize;
     font-weight: @megaMenuSubTitleFontWeight;
+    padding: @megaMenuSubTitlePadding;
+    display: @megaMenuSubTitleDisplay;
 
     &:hover,
     &:focus-visible {

package/theme/themes/eea/extras/header.variables

@@ -178,6 +178,9 @@
 @mobileMegaMenuSubTitleFontSize: @font-size-2;
 @computerMegaMenuSubTitleFontSize: @font-size-3;
 @megaMenuSubTitleFontWeight: @font-weight-7;
+@megaMenuSubTitlePadding: 0.5rem 0;
+@megaMenuSubTitleDisplay: block;
+@megaMenuSubTitleCountriesNestedGridMarginTop: -1rem;
 
 /* List Item */
 @megaMenuListItemFontSize: @font-size-1;
@@ -193,7 +196,7 @@
 @megaMenuGlanceListItemFontSize: @font-size-1;
 @megaMenuGlanceListItemFontWeight: @font-weight-4;
 @megaMenuGlanceListItemMargin: 0;
-@megaMenuGlanceMenuListMarginTop: @rem-space-4;
+@megaMenuGlanceMenuListMarginTop: 0;
 
 /* Accordion */
 @megaMenuAccordionTitleFontSize: @font-size-3;

package/theme/themes/eea/extras/inpageNavigation.less

@@ -22,6 +22,8 @@
   color: @navColor;
   font-weight: @navFontWeight;
   z-index: @z-index-important;
+  line-height: @navLineHeight;
+  padding: @navPadding;
 
   /* Icon align fix */
   > div > i.icon,

package/theme/themes/eea/extras/inpageNavigation.variables

@@ -13,6 +13,8 @@
 @tabletNavHeight      : 2.25rem;
 @computerNavWidth     : 3.125rem;
 @computerNavHeight    : 3.125rem;
+@navLineHeight        : @font-lineheight-3;
+@navPadding           : 0;
 
 /* Desktop Icon */
 @inpageNavigationIconWidth : 100%;

package/theme/themes/eea/extras/labeledIconGroup.variables

@@ -4,7 +4,7 @@
 *******************************/
 
 @labeledIconGroupWidth : 100%;
-@labeledIconGroupPadding : 0 2rem;
+@labeledIconGroupPadding : 0 @rem-space-8;
 
-@labeledIconGroupWrapperMarginLeft: 0.25rem;
-@labeledIconGroupWrapperMarginRight: 0.25rem;
+@labeledIconGroupWrapperMarginLeft: @rem-space-1;
+@labeledIconGroupWrapperMarginRight: @rem-space-1;

package/theme/themes/eea/extras/languageLabeledIcon.less

@@ -15,30 +15,37 @@
   min-width: @languageLabeledIconMinWidth;
   text-align: @languageLabeledIconTextAlign;
 
-  .icon.wrapper {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: @languageLabeledIconIconWrapperFontSize;
-    font-weight: @languageLabeledIconIconWrapperFontWeight;
-    color: @languageLabeledIconIconWrapperColor;
-
-    i {
-      color: @languageLabeledIconIconWrapperIconColor;
-      margin-right: @languageLabeledIconIconWrapperIconMarginRight;
-      font-size: @languageLabeledIconIconWrapperIconFontSize;
-    }
+  button {
+    text-decoration: none;
   }
+}
+
+.eea.language.labeled.icon .icon.wrapper {
+  height: @languageLabeledIconIconWrapperMinHeight;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: @languageLabeledIconIconWrapperFontSize;
+  font-weight: @languageLabeledIconIconWrapperFontWeight;
+  color: @languageLabeledIconIconWrapperColor;
+  padding-bottom: @languageLabeledIconIconWrapperPaddingBottom;
 
-  .label {
-    color: @languageLabeledIconLabelColor;
-    font-size: @languageLabeledIconLabelFontSize;
-    font-weight: @languageLabeledIconLabelFontWeight;
-    cursor: pointer;
+  i {
+    opacity: 1;
+    color: @languageLabeledIconIconWrapperIconColor;
+    margin-right: @languageLabeledIconIconWrapperIconMarginRight;
+    font-size: @languageLabeledIconIconWrapperIconFontSize;
   }
 }
 
+.eea.language.labeled.icon .label {
+  color: @languageLabeledIconLabelColor;
+  font-size: @languageLabeledIconLabelFontSize;
+  font-weight: @languageLabeledIconLabelFontWeight;
+  cursor: pointer;
+}
+
 .ui.popup.language-popup {
   margin: 0;
   padding: 0;
@@ -67,7 +74,8 @@
           padding: @languageLabeledIconLabelUlLiPadding;
         }
 
-        li:hover {
+        li:hover,
+        li div:focus-visible {
           color: @languageLabeledIconLabelUlLiColor;
           background-color: @languageLabeledIconLabelUlLiBackgroundColor;
         }

package/theme/themes/eea/extras/languageLabeledIcon.variables

@@ -8,34 +8,36 @@
 @languageLabeledIconTextAlign: center;
 
 /* Icon Wrapper  */
-@languageLabeledIconIconWrapperFontSize : 0.875rem;
-@languageLabeledIconIconWrapperFontWeight : 400;
-@languageLabeledIconIconWrapperColor : @deepBlue;
+@languageLabeledIconIconWrapperMinHeight: @rem-space-8;
+@languageLabeledIconIconWrapperFontSize : @font-size-0;
+@languageLabeledIconIconWrapperFontWeight : @font-weight-4;
+@languageLabeledIconIconWrapperColor : @tertiaryColor;
+@languageLabeledIconIconWrapperPaddingBottom : @rem-space-1;
 
 /* Icon  */
-@languageLabeledIconIconWrapperIconColor: @mediumPersianBlue;
-@languageLabeledIconIconWrapperIconMarginRight: 0.25rem;
-@languageLabeledIconIconWrapperIconFontSize: 1.5rem;
+@languageLabeledIconIconWrapperIconColor: @lightPrimaryColor;
+@languageLabeledIconIconWrapperIconMarginRight: @rem-space-1;
+@languageLabeledIconIconWrapperIconFontSize: @font-size-4;
 
 /* Label  */
-@languageLabeledIconLabelColor: @deepBlue;
-@languageLabeledIconLabelFontSize: 0.875rem;
-@languageLabeledIconLabelFontWeight: 400;
+@languageLabeledIconLabelColor: @tertiaryColor;
+@languageLabeledIconLabelFontSize: @font-size-0;
+@languageLabeledIconLabelFontWeight: @font-weight-4;
 
 /* Dropdown  */
-@languageLabeledIconDropdownBackgroundColor: #f9f9f9;
+@languageLabeledIconDropdownBackgroundColor: @grey-1;
 
 /* Link  */
 @languageLabeledIconDropdowLinkWrapperWidth: max-content;
 
 
 /* List  */
-@languageLabeledIconLabelUlMargin:0;
-@languageLabeledIconLabelUlColor: @japaneseIndigo;
-@languageLabeledIconLabelUlPadding: 0.25rem;
+@languageLabeledIconLabelUlMargin: 0;
+@languageLabeledIconLabelUlColor: @darkTertiaryColor;
+@languageLabeledIconLabelUlPadding: @rem-space-1;
 
 /* List Item  */
 @languageLabeledIconLabelUlLiPadding: 0.125rem 0.313rem;
-@languageLabeledIconLabelUlLiColor: @white;
-@languageLabeledIconLabelUlLiBackgroundColor: @japaneseIndigo;
-@languageLabeledIconLabelUlLiSpanFontWeight: 700;
+@languageLabeledIconLabelUlLiColor: @grey-0;
+@languageLabeledIconLabelUlLiBackgroundColor: @darkTertiaryColor;
+@languageLabeledIconLabelUlLiSpanFontWeight: @font-weight-7;

package/theme/themes/eea/extras/newTabLabeledIcon.less

@@ -14,29 +14,35 @@
   min-width: @newTabLabeledIconMinWidth;
   text-align: @newTabLabeledIconTextAlign;
 
+  a {
+    text-decoration: none;
+  }
+
   .label {
     width: @newTabLabeledIconLabelWidth;
     font-size: @newTabLabeledIconLabelFontSize;
+    font-weight: @newTabLabeledIconLabelFontWeight;
     color: @newTabLabeledIconLabelColor;
     cursor: pointer;
   }
+}
 
-  .icon.wrapper {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    width: @newTabLabeledIconIconWrapperWidth;
-    padding: @newTabLabeledIconWrapperPadding;
+.eea.new.tab.labeled.icon .icon.wrapper {
+  min-height: @newTabLabeledIconIconWrapperMinHeight;
+  width: @newTabLabeledIconIconWrapperWidth;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding-bottom: @newTabLabeledIconWrapperPaddingBottom;
 
-    .icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-size: @newTabLabeledIconIconFontSize;
-      color: @newTabLabeledIconColor;
-      width: @newTabLabeledIconIconWidth;
-      height: @newTabLabeledIconWrapperIconHeight;
-    }
+  .icon {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: @newTabLabeledIconIconFontSize;
+    color: @newTabLabeledIconColor;
+    width: @newTabLabeledIconIconWidth;
+    height: @newTabLabeledIconWrapperIconHeight;
   }
 }
 

package/theme/themes/eea/extras/newTabLabeledIcon.variables

@@ -4,18 +4,20 @@
 
 /* Body */
 @newTabLabeledIconWidth: min-content;
-@newTabLabeledIconMinWidth: 7rem;
+@newTabLabeledIconMinWidth: 8.5rem;
 @newTabLabeledIconTextAlign: center;
 
 /* Label */
 @newTabLabeledIconLabelWidth: 100%;
-@newTabLabeledIconLabelFontSize: 0.875rem;
-@newTabLabeledIconLabelColor: @deepBlue;
-@newTabLabeledIconColor: @mediumPersianBlue;
+@newTabLabeledIconLabelFontSize: @font-size-0;
+@newTabLabeledIconLabelFontWeight: @font-weight-4;
+@newTabLabeledIconLabelColor: @tertiaryColor;
+@newTabLabeledIconColor: @lightPrimaryColor;
 
 /* Icon Wrapper */
+@newTabLabeledIconIconWrapperMinHeight: @rem-space-8;
 @newTabLabeledIconIconWrapperWidth: 100%;
-@newTabLabeledIconWrapperPadding: 0.5rem;
+@newTabLabeledIconWrapperPaddingBottom: @rem-space-1;
 
 /* Icon */
 @newTabLabeledIconIconFontSize: 1.563rem;

package/theme/themes/eea/globals/site.overrides

@@ -9,7 +9,10 @@
   outline: @focusVisibleOutline;
 }
 
-button:focus-visible {
+button:focus-visible,
+a.button:focus-visible,
+.ui.checkbox input[type="checkbox"]:focus-visible,
+.ui.checkbox input[type="radio"]:focus-visible {
   outline: @focusVisibleOutline !important;
 }
 

package/theme/themes/eea/modules/checkbox.overrides

@@ -8,6 +8,12 @@
     format('truetype');
 }
 
+// To display focus state
+.ui.checkbox input[type="checkbox"],
+.ui.checkbox input[type="radio"] {
+  opacity: 1 !important;
+}
+
 /* Checkbox */
 .ui.checkbox:not(.toggle) {
   margin-bottom: @bottomMargin;