improve accessibility for popover and tag list

Author: OleksandrDragun

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

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

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

@@ -44,6 +44,12 @@ export const HeaderConfig = ({ filters, setFilters }) => {
     setIsMainFilterOpen(false);
     setIsInnerFilterOpen(false);
   };
+  // Implemented only for fixing sonar cube errors
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      console.log(e);
+    }
+  };
 
   return (
     <div className={cx('header-config')}>
@@ -60,10 +66,24 @@ export const HeaderConfig = ({ filters, setFilters }) => {
               <Popover
                 content={
                   <>
-                    <div className={cx('filter-popover__item')} onClick={handleFilters}>
+                    <div
+                      role="menuitem"
+                      tabIndex={0}
+                      className={cx('filter-popover__item')}
+                      onClick={handleFilters}
+                      onKeyDown={handleKeyDown}
+                      aria-label="Executed menu item"
+                    >
                       {formatMessage(messages.executed)}
                     </div>
-                    <div className={cx('filter-popover__item')}>
+                    <div
+                      role="menuitem"
+                      tabIndex={0}
+                      onClick={() => {}}
+                      onKeyDown={handleKeyDown}
+                      className={cx('filter-popover__item')}
+                      aria-label="Not executed menu item"
+                    >
                       {formatMessage(messages.notExecuted)}
                     </div>
                   </>
@@ -72,18 +92,40 @@ export const HeaderConfig = ({ filters, setFilters }) => {
                 className={cx('filter-popover', 'filter-popover--inner')}
                 isOpened={isInnerFilterOpen}
                 setIsOpened={setIsInnerFilterOpen}
+                aria-label="Execution Status Options"
               >
                 <div
+                  role="menuitem"
+                  tabIndex={0}
+                  aria-haspopup="menu"
+                  aria-expanded={isInnerFilterOpen}
+                  aria-label="Executed status menu item"
+                  onKeyDown={handleKeyDown}
                   className={cx('filter-popover__item', 'filter-popover__item--popover', {
                     'filter-popover__item--popover-open': isInnerFilterOpen,
                   })}
-                  tabIndex={0}
                 >
                   <span>{formatMessage(messages.executionStatus)}</span>
                 </div>
               </Popover>
-              <div className={cx('filter-popover__item')}>{formatMessage(messages.tag)}</div>
-              <div className={cx('filter-popover__item')}>
+              <div
+                role="menuitem"
+                tabIndex={0}
+                onClick={() => {}}
+                onKeyDown={handleKeyDown}
+                aria-label="Tag menu item"
+                className={cx('filter-popover__item')}
+              >
+                {formatMessage(messages.tag)}
+              </div>
+              <div
+                role="menuitem"
+                tabIndex={0}
+                onClick={() => {}}
+                onKeyDown={handleKeyDown}
+                aria-label="Default version menu item"
+                className={cx('filter-popover__item')}
+              >
                 {formatMessage(messages.defaultVersion)}
               </div>
             </>
@@ -92,13 +134,20 @@ export const HeaderConfig = ({ filters, setFilters }) => {
           className={cx('filter-popover')}
           isOpened={isMainFilterOpen}
           setIsOpened={setIsMainFilterOpen}
+          aria-label="Filter settings"
         >
           <div
+            role="button"
+            tabIndex={0}
+            aria-haspopup="true"
+            aria-expanded={isMainFilterOpen}
+            aria-label="Filter icon"
             className={cx('filters-icon-container', {
               'with-applied': appliedFiltersCount,
               opened: isMainFilterOpen,
             })}
-            tabIndex={0}
+            onClick={() => {}}
+            onKeyDown={handleKeyDown}
           >
             <div className={cx('header-config__filters--filter-icon-wrapper')}>
               <i className={cx('filter-icon')}>

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

@@ -66,6 +66,12 @@ export const TagList = ({ tags }) => {
     setIsExpanded((prevState) => !prevState);
   };
 
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      toggleExpanded();
+    }
+  };
+
   const isCounterButtonVisible = useMemo(() => count > 0 && !isExpanded, [count, isExpanded]);
 
   return (
@@ -83,13 +89,25 @@ export const TagList = ({ tags }) => {
           </div>
         ))}
         {isExpanded && (
-          <Button className={cx('tag-list__item--button')} onClick={toggleExpanded} variant="text">
+          <Button
+            className={cx('tag-list__item--button')}
+            onClick={toggleExpanded}
+            onKeyDown={handleKeyDown}
+            variant="text"
+          >
             {formatMessage(messages.showLess)}
           </Button>
         )}
       </div>
       {isCounterButtonVisible ? (
-        <div className={cx('tag-list__item', 'tag-list__item--count')} onClick={toggleExpanded}>
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label="Counter button"
+          className={cx('tag-list__item', 'tag-list__item--count')}
+          onClick={toggleExpanded}
+          onKeyDown={handleKeyDown}
+        >
           +{count}
         </div>
       ) : null}