@zohodesk/dot 1.2.1 → 1.2.2

package/es/list/ListLayout/ListLayout.module.css

@@ -1,58 +1,74 @@
 .varClass {
   --listBorder: var(--zdt_listLayout_border)
 }
+
 .container {
   position: relative;
   composes: varClass;
 }
-.listHover:hover, .hoveredStyle{
+
+.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
   background-color: var(--zdt_listLayout_hover_bg);
 }
+
 .active, .active:hover {
   background-color: var(--zdt_listLayout_active_bg);
 }
-.cursorPointer{
+
+.cursorPointer {
   cursor: pointer
 }
+
 /* View */
 .classic .innerContainer {
   min-height: var(--zd_size70) ;
   padding: var(--zd_size13) 0 ;
 }
+
 .compact .innerContainer {
   min-height: var(--zd_size41) ;
   padding: var(--zd_size5) 0 ;
 }
+
 .superCompact .innerContainer {
   min-height: var(--zd_size35) ;
   padding: var(--zd_size2) 0 ;
 }
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }
+
 [dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
   border-right: var(--zd_size2) solid transparent;
 }
-[dir=ltr] .keyboardActive, [dir=ltr] .active{
+
+[dir=ltr] .keyboardActive, [dir=ltr] .active {
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive, [dir=rtl] .active{
+
+[dir=rtl] .keyboardActive, [dir=rtl] .active {
   border-top-right-radius: var(--zd_size5);
   border-bottom-right-radius: var(--zd_size5);
 }
-[dir=ltr] .keyboardActive{
+
+[dir=ltr] .keyboardActive {
   border-left-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=rtl] .keyboardActive{
+
+[dir=rtl] .keyboardActive {
   border-right-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=ltr] .active{
+
+[dir=ltr] .active {
   border-left-color: var(--zdt_listLayout_active_border);
 }
-[dir=rtl] .active{
+
+[dir=rtl] .active {
   border-right-color: var(--zdt_listLayout_active_border);
 }

package/es/list/listCommon.module.css

@@ -2,59 +2,77 @@
   display: inline-block;
   vertical-align: middle;
 }
+
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .avatarMargin {
   margin-right: var(--zd_size25) ;
 }
+
 [dir=rtl] .avatarMargin {
   margin-left: var(--zd_size25) ;
 }
+
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }
+
 .secondaryPanel {
   line-height: var(--zd_size18);
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .statusColumn {
   composes: inlineBlockMiddle;
 }
+
 [dir=ltr] .statusColumn {
   text-align: right;
 }
+
 [dir=rtl] .statusColumn {
   text-align: left;
 }
+
 .classic .floatingIconContainer {
   display: none;
 }
+
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer,
 .listContainer:hover .classic .floatingIconContainer,
-.hoveredStyle .classic .floatingIconContainer {
+.hoveredStyle .classic .floatingIconContainer,
+.compact:focus-within .floatingIconContainer,
+.superCompact:focus-within .floatingIconContainer,
+.listContainer:focus-within .classic .floatingIconContainer,
+.hoveredStyle .classic:focus-within .floatingIconContainer {
   display: inline-flex;
   align-items: center;
 }
+
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer {
   opacity: 0;
   visibility: hidden;
 }
+
 .floatingIcons {
   font-size: var(--zd_font_size15) ;
 }
-.listContainer, .listLayoutContainer {
+
+.listContainer,
+.listLayoutContainer {
   position: relative;
   transition: var(--zd_transition3) all ease;
 }
+
 .listContainer:hover .compact .floatingIconContainer,
 .listContainer:hover .superCompact .floatingIconContainer,
 .hoveredStyle .compact .floatingIconContainer,
-.hoveredStyle .superCompact .floatingIconContainer 
- {
+.hoveredStyle .superCompact .floatingIconContainer {
   opacity: 1;
   visibility: visible;
-}
+}

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -306,8 +306,14 @@ export class StatusDropdown extends React.Component {
       statusColor,
       needExternalPopupState = false,
       isPopupActive = false,
-      needMultiLineText
+      needMultiLineText,
+      a11y = {}
     } = this.props;
+    const {
+      tabIndex = 0,
+      ariaLabelledby,
+      ariaLabel
+    } = a11y;
     let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     let {
       searchString
@@ -330,7 +336,11 @@ export class StatusDropdown extends React.Component {
       onClick: removeClose,
       disabled: isDisabled || isReadOnly ? true : false,
       "aria-haspopup": true,
-      "aria-expanded": isPopupOpen && isEditable ? true : false
+      "aria-expanded": isPopupOpen && isEditable ? true : false,
+      tabIndex: tabIndex,
+      "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-disabled": isDisabled || isReadOnly
     }, isEditable ? /*#__PURE__*/React.createElement("div", {
       className: style.hiddenInput
     }, /*#__PURE__*/React.createElement(TextBox, {

package/es/lookup/Lookup/Lookup.js

@@ -60,6 +60,7 @@ export default class Lookup extends Component {
       role = 'dialog',
       ariaLabelledby,
       ariaDescribedby,
+      ariaLabel,
       ariaModal = isActive ? true : undefined
     } = a11y;
     const {
@@ -79,6 +80,7 @@ export default class Lookup extends Component {
       role: role,
       "aria-labelledby": ariaLabelledby,
       "aria-describedby": ariaDescribedby,
+      "aria-label": ariaLabel,
       "aria-modal": ariaModal,
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]}`,

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -117,6 +117,8 @@ export default class AlertLookup extends Component {
     let ariaMessageId = this.getAriaId();
     let ariaConfirmMsgId = this.getAriaId();
     let ariaTitleId = this.getAriaId();
+    let ariaLeaveButtonId = this.getAriaId();
+    let ariaStayButtonId = this.getAriaId();
     a11y = {
       ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
@@ -175,12 +177,22 @@ export default class AlertLookup extends Component {
       customProps: {
         'data-a11y-autofocus': isDefaultFocus
       }
-    }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+    }, PrimaryButtonProps, {
+      a11y: {
+        'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
+      },
+      id: ariaLeaveButtonId
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,
       onClick: onCancelClick,
       palette: "secondary"
-    }, SecondaryButtonProps))))) : null))));
+    }, SecondaryButtonProps, {
+      a11y: {
+        'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
+      },
+      id: ariaStayButtonId
+    }))))) : null))));
   }
 
 }

package/lib/Attachment/Attachment.js

@@ -80,7 +80,8 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         "data-title": tooltip,
         alignBox: "row",
         isCover: false,
-        dataSelectorId: dataSelectorId
+        dataSelectorId: dataSelectorId,
+        tabIndex: "0"
       }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].attachleft
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Attachment/Attachment.module.css

@@ -18,19 +18,22 @@
   background-color: var(--zdt_attachment_transparent_bg);
 }
 
-.attachmentHover:hover, .attachmentHover:hover .attachleft {
+.attachmentHover:hover, .attachmentHover:hover .attachleft, .attachmentHover:focus-within, .attachmentHover:focus-within .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 
-.attachmentHover:hover .attachleft i {
+.attachmentHover:hover .attachleft i,
+.attachmentHover:focus-within .attachleft i {
   color: var(--zdt_attachment_hover_text);
 }
 
-.attachment:hover .attachDownload {
+.attachment:hover .attachDownload,
+.attachment:focus-within .attachDownload {
   display: block;
 }
 
-.attachmentHover:hover .attachSize {
+.attachmentHover:hover .attachSize,
+.attachment:focus-within .attachSize {
   color: var(--zdt_attachment_hover_text);
 }
 
@@ -132,7 +135,7 @@
   line-height: var(--zd_size18);
 }
 
-.attachDownload:hover {
+.attachDownload:hover, .attachDownload:focus-within {
   background-color: var(--zdt_attachment_download_hover_bg);
 }
 
@@ -145,7 +148,8 @@
   color: var(--zdt_attachment_size_text);
 }
 
-.attachDownload:hover .downIcon {
+.attachDownload:hover .downIcon,
+.attachDownload:focus-within .downIcon {
   color: var(--zdt_attachment_download_hover_text);
 }
 

package/lib/Link/Link.js

@@ -141,7 +141,8 @@ var Link = /*#__PURE__*/function (_React$Component) {
       }, others, {
         onClick: this.onCallBack.bind(this, urlOutput, href)
       }, customProps, {
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        tabIndex: "0"
       }), children);
     }
   }]);

package/lib/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -82,6 +82,7 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
         "data-id": dataId,
         "data-test-id": dataId
       }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/_react["default"].createElement("div", {
+        tabIndex: "0",
         className: "".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass)
       }, title) : null, description ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _CommonEmptyStateModule["default"].linkWrapper

package/lib/list/Icons/AddNewIcon.js

@@ -15,6 +15,8 @@ var _icons = require("@zohodesk/icons");
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -57,9 +59,9 @@ var AddNewIcon = /*#__PURE__*/function (_React$Component) {
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/CompleteIcon.js

@@ -15,6 +15,8 @@ var _icons = require("@zohodesk/icons");
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,9 +60,9 @@ var CompleteIcon = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           className = _this$props.className,
           iconSize = _this$props.iconSize;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/DeleteIcon.js

@@ -15,6 +15,8 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,13 +60,13 @@ var DeleteComponent = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           iconSize = _this$props.iconSize,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,
-        tabIndex: 0
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-GN-delete",
         iconClass: iconClass ? iconClass : '',

package/lib/list/Icons/EditIcon.js

@@ -15,6 +15,8 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,12 +60,13 @@ var EditIcon = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           iconSize = _this$props.iconSize,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-GN-edit",
         iconClass: iconClass ? iconClass : '',

package/lib/list/Icons/ReadUnreadIcon.js

@@ -17,6 +17,8 @@ var _icons = require("@zohodesk/icons");
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -62,12 +64,13 @@ var ReadUnreadIcon = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className,
           isRead = _this$props.isRead,
           iconSize = _this$props.iconSize;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
         size: iconSize,

package/lib/list/Icons/SmartIcon.js

@@ -15,6 +15,8 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -61,12 +63,13 @@ var SmartIcon = /*#__PURE__*/function (_Component) {
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-TK-peek",
         iconClass: iconClass ? iconClass : ''

package/lib/list/ListLayout/ListLayout.module.css

@@ -1,58 +1,74 @@
 .varClass {
   --listBorder: var(--zdt_listLayout_border)
 }
+
 .container {
   position: relative;
   composes: varClass;
 }
-.listHover:hover, .hoveredStyle{
+
+.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
   background-color: var(--zdt_listLayout_hover_bg);
 }
+
 .active, .active:hover {
   background-color: var(--zdt_listLayout_active_bg);
 }
-.cursorPointer{
+
+.cursorPointer {
   cursor: pointer
 }
+
 /* View */
 .classic .innerContainer {
   min-height: var(--zd_size70) ;
   padding: var(--zd_size13) 0 ;
 }
+
 .compact .innerContainer {
   min-height: var(--zd_size41) ;
   padding: var(--zd_size5) 0 ;
 }
+
 .superCompact .innerContainer {
   min-height: var(--zd_size35) ;
   padding: var(--zd_size2) 0 ;
 }
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }
+
 [dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
   border-right: var(--zd_size2) solid transparent;
 }
-[dir=ltr] .keyboardActive, [dir=ltr] .active{
+
+[dir=ltr] .keyboardActive, [dir=ltr] .active {
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive, [dir=rtl] .active{
+
+[dir=rtl] .keyboardActive, [dir=rtl] .active {
   border-top-right-radius: var(--zd_size5);
   border-bottom-right-radius: var(--zd_size5);
 }
-[dir=ltr] .keyboardActive{
+
+[dir=ltr] .keyboardActive {
   border-left-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=rtl] .keyboardActive{
+
+[dir=rtl] .keyboardActive {
   border-right-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=ltr] .active{
+
+[dir=ltr] .active {
   border-left-color: var(--zdt_listLayout_active_border);
 }
-[dir=rtl] .active{
+
+[dir=rtl] .active {
   border-right-color: var(--zdt_listLayout_active_border);
 }

package/lib/list/listCommon.module.css

@@ -2,59 +2,77 @@
   display: inline-block;
   vertical-align: middle;
 }
+
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .avatarMargin {
   margin-right: var(--zd_size25) ;
 }
+
 [dir=rtl] .avatarMargin {
   margin-left: var(--zd_size25) ;
 }
+
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }
+
 .secondaryPanel {
   line-height: var(--zd_size18);
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .statusColumn {
   composes: inlineBlockMiddle;
 }
+
 [dir=ltr] .statusColumn {
   text-align: right;
 }
+
 [dir=rtl] .statusColumn {
   text-align: left;
 }
+
 .classic .floatingIconContainer {
   display: none;
 }
+
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer,
 .listContainer:hover .classic .floatingIconContainer,
-.hoveredStyle .classic .floatingIconContainer {
+.hoveredStyle .classic .floatingIconContainer,
+.compact:focus-within .floatingIconContainer,
+.superCompact:focus-within .floatingIconContainer,
+.listContainer:focus-within .classic .floatingIconContainer,
+.hoveredStyle .classic:focus-within .floatingIconContainer {
   display: inline-flex;
   align-items: center;
 }
+
 .compact .floatingIconContainer,
 .superCompact .floatingIconContainer {
   opacity: 0;
   visibility: hidden;
 }
+
 .floatingIcons {
   font-size: var(--zd_font_size15) ;
 }
-.listContainer, .listLayoutContainer {
+
+.listContainer,
+.listLayoutContainer {
   position: relative;
   transition: var(--zd_transition3) all ease;
 }
+
 .listContainer:hover .compact .floatingIconContainer,
 .listContainer:hover .superCompact .floatingIconContainer,
 .hoveredStyle .compact .floatingIconContainer,
-.hoveredStyle .superCompact .floatingIconContainer 
- {
+.hoveredStyle .superCompact .floatingIconContainer {
   opacity: 1;
   visibility: visible;
-}
+}