Skip to content

improve accessibility for popover and tag list #4342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OleksandrDragun wants to merge 2 commits into
base: feature/test-library
Choose a base branch
from
Open

improve accessibility for popover and tag list #4342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83d6ea1
improve accessibility for popover and tag list
OleksandrDragun May 12, 2025
47079de
use button tag instead of div with role button
OleksandrDragun May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/filterBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ export const FilterBlock = ({ filters, clearAllFilters }) => {
{filters.status && (
<div className={cx('filter-block__status')}>
{filters.status}
<div className={cx('filter-block__status-icon')} onClick={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">
Expand Down
3 changes: 3 additions & 0 deletions app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/filterBlock.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
align-items: center;
width: 16px;
height: 16px;
padding: 0;
border-width: 0;
background-color: transparent;
cursor: pointer;

svg {
Expand Down
60 changes: 52 additions & 8 deletions app/src/pages/inside/productVersionPage/linkedTestCasesTab/headerConfig/headerConfig.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -44,6 +45,12 @@ export const HeaderConfig = ({ filters, setFilters }) => {
setIsMainFilterOpen(false);
setIsInnerFilterOpen(false);
};
// Implemented only for fixing sonar cube errors
const handleKeyDown = (e) => {
if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {
console.log(e);
}
};

return (
<div className={cx('header-config')}>
Expand All @@ -60,10 +67,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>
</>
Expand All @@ -72,18 +93,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>
</>
Expand All @@ -92,13 +135,14 @@ export const HeaderConfig = ({ filters, setFilters }) => {
className={cx('filter-popover')}
isOpened={isMainFilterOpen}
setIsOpened={setIsMainFilterOpen}
aria-label="Filter settings"
>
<div
<button
className={cx('filters-icon-container', {
'with-applied': appliedFiltersCount,
opened: isMainFilterOpen,
})}
tabIndex={0}
onClick={() => {}}
>
<div className={cx('header-config__filters--filter-icon-wrapper')}>
<i className={cx('filter-icon')}>
Expand All @@ -108,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')}>
Expand Down
5 changes: 4 additions & 1 deletion app/src/pages/inside/productVersionPage/linkedTestCasesTab/headerConfig/headerConfig.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
align-items: center;
gap: 13px;

&--search-input {
& > &--search-input {
background-color: inherit;

&:hover {
Expand All @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions app/src/pages/inside/productVersionPage/linkedTestCasesTab/tagList/tagList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,9 @@ export const TagList = ({ tags }) => {
)}
</div>
{isCounterButtonVisible ? (
<div className={cx('tag-list__item', 'tag-list__item--count')} onClick={toggleExpanded}>
<button className={cx('tag-list__item', 'tag-list__item--count')} onClick={toggleExpanded}>
+{count}
</div>
</button>
) : null}
</div>
);
Expand Down
1 change: 1 addition & 0 deletions app/src/pages/inside/productVersionPage/linkedTestCasesTab/tagList/tagList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
padding-right: 7px;
overflow: visible;
cursor: pointer;
background-color: transparent;
color: var(--rp-ui-base-e-400);
}
}
Expand Down
Loading