use button tag instead of div with role button

Author: OleksandrDragun

app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/filterBlock.jsx

@@ -35,20 +35,9 @@ export const FilterBlock = ({ filters, clearAllFilters }) => {
       {filters.status && (
         <div className={cx('filter-block__status')}>
           {filters.status}
-          <div
-            role="button"
-            tabIndex={0}
-            aria-label="Close button"
-            className={cx('filter-block__status-icon')}
-            onClick={clearAllFilters}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                clearAllFilters();
-              }
-            }}
-          >
+          <button className={cx('filter-block__status-icon')} onClick={clearAllFilters}>
             <CloseIcon />
-          </div>
+          </button>
         </div>
       )}
       <Button className={cx('filter-block__add-button')} icon={<PlusIcon />} variant="text">

app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/filterBlock.scss

@@ -43,6 +43,9 @@
       align-items: center;
       width: 16px;
       height: 16px;
+      padding: 0;
+      border-width: 0;
+      background-color: transparent;
       cursor: pointer;
 
       svg {

app/src/pages/inside/productVersionPage/linkedTestCasesTab/headerConfig/headerConfig.jsx

@@ -46,7 +46,7 @@ export const HeaderConfig = ({ filters, setFilters }) => {
   };
   // Implemented only for fixing sonar cube errors
   const handleKeyDown = (e) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
       console.log(e);
     }
   };
@@ -136,18 +136,12 @@ export const HeaderConfig = ({ filters, setFilters }) => {
           setIsOpened={setIsMainFilterOpen}
           aria-label="Filter settings"
         >
-          <div
-            role="button"
-            tabIndex={0}
-            aria-haspopup="true"
-            aria-expanded={isMainFilterOpen}
-            aria-label="Filter icon"
+          <button
             className={cx('filters-icon-container', {
               'with-applied': appliedFiltersCount,
               opened: isMainFilterOpen,
             })}
             onClick={() => {}}
-            onKeyDown={handleKeyDown}
           >
             <div className={cx('header-config__filters--filter-icon-wrapper')}>
               <i className={cx('filter-icon')}>
@@ -157,7 +151,7 @@ export const HeaderConfig = ({ filters, setFilters }) => {
             {appliedFiltersCount ? (
               <span className={cx('filters-count')}>{appliedFiltersCount}</span>
             ) : null}
-          </div>
+          </button>
         </Popover>
       </div>
       <div className={cx('header-config__toggle')}>

app/src/pages/inside/productVersionPage/linkedTestCasesTab/headerConfig/headerConfig.scss

@@ -29,7 +29,7 @@
       background-color: inherit;
 
       &:hover {
-        background-color: inherit;
+        background-color: inherit !important;
       }
     }
 
@@ -43,6 +43,9 @@
       justify-content: center;
       width: 57px;
       border-radius: 20px;
+      border-width: 0;
+      background-color: transparent;
+      cursor: pointer;
 
       &:focus-visible {
         outline: 2px solid var(--rp-ui-base-dark-topaz-main);

app/src/pages/inside/productVersionPage/linkedTestCasesTab/tagList/tagList.jsx

@@ -100,16 +100,9 @@ export const TagList = ({ tags }) => {
         )}
       </div>
       {isCounterButtonVisible ? (
-        <div
-          role="button"
-          tabIndex={0}
-          aria-label="Counter button"
-          className={cx('tag-list__item', 'tag-list__item--count')}
-          onClick={toggleExpanded}
-          onKeyDown={handleKeyDown}
-        >
+        <button className={cx('tag-list__item', 'tag-list__item--count')} onClick={toggleExpanded}>
           +{count}
-        </div>
+        </button>
       ) : null}
     </div>
   );

app/src/pages/inside/productVersionPage/linkedTestCasesTab/tagList/tagList.scss

@@ -77,6 +77,7 @@
       padding-right: 7px;
       overflow: visible;
       cursor: pointer;
+      background-color: transparent;
       color: var(--rp-ui-base-e-400);
     }
   }