use button tag instead of div with role button

Author: OleksandrDragun

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

@@ -35,10 +35,7 @@ export const FilterBlock = ({ filters, clearAllFilters }) => {
       {filters.status && (
         <div className={cx('filter-block__status')}>
           {filters.status}
-          <div
-            role="button"
-            tabIndex={0}
-            aria-label="Close button"
+          <button
             className={cx('filter-block__status-icon')}
             onClick={clearAllFilters}
             onKeyDown={(e) => {
@@ -48,7 +45,7 @@ export const FilterBlock = ({ filters, 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

@@ -136,12 +136,7 @@ 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,
@@ -157,7 +152,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,13 @@ export const TagList = ({ tags }) => {
         )}
       </div>
       {isCounterButtonVisible ? (
-        <div
-          role="button"
-          tabIndex={0}
-          aria-label="Counter button"
+        <button
           className={cx('tag-list__item', 'tag-list__item--count')}
           onClick={toggleExpanded}
           onKeyDown={handleKeyDown}
         >
           +{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);
     }
   }