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

@@ -21,6 +21,7 @@ import { useIntl } from 'react-intl';
 import { FilterFilledIcon, FilterOutlineIcon, Popover, Toggle } from '@reportportal/ui-kit';
 
 import { SearchField } from 'components/fields/searchField';
+import { ENTER_KEY_CODE, SPACE_KEY_CODE } from 'common/constants/keyCodes';
 
 import { messages } from './messages';
 
@@ -46,7 +47,7 @@ export const HeaderConfig = ({ filters, setFilters }) => {
   };
   // Implemented only for fixing sonar cube errors
   const handleKeyDown = (e) => {
-    if (e.key === 'Enter') {
+    if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {
       console.log(e);
     }
   };
@@ -136,18 +137,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 +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

@@ -25,7 +25,7 @@
     align-items: center;
     gap: 13px;
 
-    &--search-input {
+    & > &--search-input {
       background-color: inherit;
 
       &:hover {
@@ -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

@@ -66,12 +66,6 @@ export const TagList = ({ tags }) => {
     setIsExpanded((prevState) => !prevState);
   };
 
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      toggleExpanded();
-    }
-  };
-
   const isCounterButtonVisible = useMemo(() => count > 0 && !isExpanded, [count, isExpanded]);
 
   return (
@@ -89,27 +83,15 @@ export const TagList = ({ tags }) => {
           </div>
         ))}
         {isExpanded && (
-          <Button
-            className={cx('tag-list__item--button')}
-            onClick={toggleExpanded}
-            onKeyDown={handleKeyDown}
-            variant="text"
-          >
+          <Button className={cx('tag-list__item--button')} onClick={toggleExpanded} variant="text">
             {formatMessage(messages.showLess)}
           </Button>
         )}
       </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);
     }
   }