SONAR-16782 [893321] [893331]

* [893321] Visual list is not marked up as list
* [893331] State: Selected state of the element is missing or incorrect

server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts

@@ -239,7 +239,7 @@ it('should have all type facet', async () => {
       'issue.type.VULNERABILITY',
       'issue.type.CODE_SMELL',
       'issue.type.SECURITY_HOTSPOT'
-    ].forEach(name => expect(screen.getByRole('button', { name })).toBeInTheDocument());
+    ].forEach(name => expect(screen.getByRole('checkbox', { name })).toBeInTheDocument());
   });
 });
 
@@ -249,7 +249,7 @@ it('select the correct quality profile for bulk change base on language search',
   renderCodingRulesApp(mockLoggedInUser());
   const selectQP = handler.allQualityProfile('js')[0];
 
-  await user.click(await screen.findByRole('button', { name: 'JavaScript' }));
+  await user.click(await screen.findByRole('checkbox', { name: 'JavaScript' }));
   await user.click(await screen.findByRole('button', { name: 'bulk_change' }));
   await user.click(await screen.findByRole('link', { name: 'coding_rules.activate_in…' }));
   const dialog = screen.getByRole('dialog', {
@@ -266,7 +266,7 @@ it('no quality profile for bulk cahnge base on language search', async () => {
   handler.setIsAdmin();
   renderCodingRulesApp(mockLoggedInUser());
 
-  await user.click(await screen.findByRole('button', { name: 'C' }));
+  await user.click(await screen.findByRole('checkbox', { name: 'C' }));
   await user.click(await screen.findByRole('button', { name: 'bulk_change' }));
   await user.click(await screen.findByRole('link', { name: 'coding_rules.activate_in…' }));
   const dialog = screen.getByRole('dialog', {

server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainFacet.tsx

@@ -108,7 +108,6 @@ export default class DomainFacet extends React.PureComponent<Props> {
       ) : (
         <FacetItem
           active={item.metric.key === selected}
-          disabled={false}
           key={item.metric.key}
           name={
             <span className="big-spacer-left" id={`measure-${item.metric.key}-name`}>
@@ -132,7 +131,6 @@ export default class DomainFacet extends React.PureComponent<Props> {
     return (
       <FacetItem
         active={domain.name === selected}
-        disabled={false}
         key={domain.name}
         name={
           <span id={`measure-overview-${domain.name}-name`}>

server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.tsx

@@ -36,7 +36,6 @@ export default function ProjectOverviewFacet({ value, selected, onChange }: Prop
       <FacetItemsList>
         <FacetItem
           active={value === selected}
-          disabled={false}
           key={value}
           name={<strong id={`measure-overview-${value}-name`}>{facetName}</strong>}
           onClick={onChange}

server/sonar-web/src/main/js/apps/component-measures/sidebar/__tests__/__snapshots__/DomainFacet-test.tsx.snap

@@ -14,7 +14,6 @@ exports[`should display facet item list 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="Reliability"
       loading={false}
@@ -46,7 +45,6 @@ exports[`should display facet item list 1`] = `
     </span>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="new_bugs"
       loading={false}
@@ -95,7 +93,6 @@ exports[`should display facet item list 1`] = `
     </span>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="bugs"
       loading={false}
@@ -155,7 +152,6 @@ exports[`should display facet item list with bugs selected 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="Reliability"
       loading={false}
@@ -187,7 +183,6 @@ exports[`should display facet item list with bugs selected 1`] = `
     </span>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="new_bugs"
       loading={false}
@@ -236,7 +231,6 @@ exports[`should display facet item list with bugs selected 1`] = `
     </span>
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="bugs"
       loading={false}
@@ -292,7 +286,6 @@ exports[`should not display subtitles of new measures if there is none 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="Reliability"
       loading={false}
@@ -324,7 +317,6 @@ exports[`should not display subtitles of new measures if there is none 1`] = `
     </span>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="bugs"
       loading={false}
@@ -375,7 +367,6 @@ exports[`should not display subtitles of new measures if there is none, even on
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="Reliability"
       loading={false}
@@ -407,7 +398,6 @@ exports[`should not display subtitles of new measures if there is none, even on
     </span>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="new_bugs"
       loading={false}

server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx

@@ -168,7 +168,7 @@ it('should support OWASP Top 10 version 2021', async () => {
       const standard = await handler.getStandards();
       /* eslint-disable-next-line testing-library/render-result-naming-convention */
       const linkName = renderOwaspTop102021Category(standard, val);
-      expect(await screen.findByRole('button', { name: linkName })).toBeInTheDocument();
+      expect(await screen.findByRole('checkbox', { name: linkName })).toBeInTheDocument();
     })
   );
 });
@@ -459,7 +459,7 @@ describe('redirects', () => {
     );
 
     expect(
-      await screen.findByRole('button', { name: `issue.type.${IssueType.CodeSmell}` })
+      await screen.findByRole('checkbox', { name: `issue.type.${IssueType.CodeSmell}` })
     ).toBeInTheDocument();
   });
 });

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/CreationDateFacet-test.tsx.snap

@@ -35,7 +35,6 @@ exports[`should render correctly for createdInLast month 1`] = `
     >
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.all"
@@ -45,7 +44,6 @@ exports[`should render correctly for createdInLast month 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_week"
@@ -55,7 +53,6 @@ exports[`should render correctly for createdInLast month 1`] = `
       />
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_month"
@@ -65,7 +62,6 @@ exports[`should render correctly for createdInLast month 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_year"
@@ -113,7 +109,6 @@ exports[`should render correctly for createdInLast week 1`] = `
     >
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.all"
@@ -123,7 +118,6 @@ exports[`should render correctly for createdInLast week 1`] = `
       />
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_week"
@@ -133,7 +127,6 @@ exports[`should render correctly for createdInLast week 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_month"
@@ -143,7 +136,6 @@ exports[`should render correctly for createdInLast week 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_year"
@@ -191,7 +183,6 @@ exports[`should render correctly for createdInLast year 1`] = `
     >
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.all"
@@ -201,7 +192,6 @@ exports[`should render correctly for createdInLast year 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_week"
@@ -211,7 +201,6 @@ exports[`should render correctly for createdInLast year 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_month"
@@ -221,7 +210,6 @@ exports[`should render correctly for createdInLast year 1`] = `
       />
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_year"
@@ -265,7 +253,6 @@ exports[`should render correctly: clear 1`] = `
     >
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.all"
@@ -275,7 +262,6 @@ exports[`should render correctly: clear 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_week"
@@ -285,7 +271,6 @@ exports[`should render correctly: clear 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_month"
@@ -295,7 +280,6 @@ exports[`should render correctly: clear 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_year"
@@ -448,7 +432,6 @@ exports[`should render correctly: portfolio 1`] = `
     >
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.all"
@@ -458,7 +441,6 @@ exports[`should render correctly: portfolio 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_week"
@@ -468,7 +450,6 @@ exports[`should render correctly: portfolio 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_month"
@@ -478,7 +459,6 @@ exports[`should render correctly: portfolio 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_year"
@@ -522,7 +502,6 @@ exports[`should render correctly: project 1`] = `
     >
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.all"
@@ -532,7 +511,6 @@ exports[`should render correctly: project 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_week"
@@ -542,7 +520,6 @@ exports[`should render correctly: project 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_month"
@@ -552,7 +529,6 @@ exports[`should render correctly: project 1`] = `
       />
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         loading={false}
         name="issues.facet.createdAt.last_year"

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ScopeFacet-test.tsx.snap

@@ -19,7 +19,6 @@ exports[`should render correctly: active facet 1`] = `
   <FacetItemsList>
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="MAIN"
       loading={false}
@@ -40,7 +39,6 @@ exports[`should render correctly: active facet 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="TEST"
       loading={false}
@@ -97,7 +95,6 @@ exports[`should render correctly: disabled facet 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="MAIN"
       loading={false}
@@ -119,7 +116,6 @@ exports[`should render correctly: disabled facet 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="TEST"
       loading={false}
@@ -161,7 +157,6 @@ exports[`should render correctly: open 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="MAIN"
       loading={false}
@@ -182,7 +177,6 @@ exports[`should render correctly: open 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="TEST"
       loading={false}

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StandardFacet-test.tsx.snap

@@ -74,7 +74,6 @@ exports[`should render sub-facets 1`] = `
     <FacetItemsList>
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         key="sql-injection"
         loading={false}
@@ -120,7 +119,6 @@ exports[`should render sub-facets 1`] = `
     <FacetItemsList>
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         key="a1"
         loading={false}
@@ -132,7 +130,6 @@ exports[`should render sub-facets 1`] = `
       />
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         key="a3"
         loading={false}
@@ -166,7 +163,6 @@ exports[`should render sub-facets 1`] = `
     <FacetItemsList>
       <FacetItem
         active={false}
-        disabled={false}
         halfWidth={false}
         key="foo"
         loading={false}
@@ -178,7 +174,6 @@ exports[`should render sub-facets 1`] = `
       />
       <FacetItem
         active={true}
-        disabled={false}
         halfWidth={false}
         key="risky-resource"
         loading={false}

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StatusFacet-test.tsx.snap

@@ -15,7 +15,6 @@ exports[`should render correctly 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={true}
       key="OPEN"
       loading={false}
@@ -31,7 +30,6 @@ exports[`should render correctly 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={true}
       key="CONFIRMED"
       loading={false}
@@ -47,7 +45,6 @@ exports[`should render correctly 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={true}
       key="REOPENED"
       loading={false}
@@ -63,7 +60,6 @@ exports[`should render correctly 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={true}
       key="RESOLVED"
       loading={false}
@@ -79,7 +75,6 @@ exports[`should render correctly 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={true}
       key="CLOSED"
       loading={false}

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/TypeFacet-test.tsx.snap

@@ -20,7 +20,6 @@ exports[`should render open by default 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="BUG"
       loading={false}
@@ -42,7 +41,6 @@ exports[`should render open by default 1`] = `
     />
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="VULNERABILITY"
       loading={false}
@@ -64,7 +62,6 @@ exports[`should render open by default 1`] = `
     />
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="CODE_SMELL"
       loading={false}

server/sonar-web/src/main/js/components/facet/FacetItem.tsx

@@ -23,7 +23,6 @@ import * as React from 'react';
 export interface Props {
   active?: boolean;
   className?: string;
-  disabled?: boolean;
   halfWidth?: boolean;
   name: React.ReactNode;
   onClick: (x: string, multiple?: boolean) => void;
@@ -35,7 +34,6 @@ export interface Props {
 
 export default class FacetItem extends React.PureComponent<Props> {
   static defaultProps = {
-    disabled: false,
     halfWidth: false,
     loading: false
   };
@@ -54,28 +52,26 @@ export default class FacetItem extends React.PureComponent<Props> {
   }
 
   render() {
-    const { name } = this.props;
+    const { name, halfWidth, active, value, tooltip } = this.props;
     const className = classNames('search-navigator-facet button-link', this.props.className, {
-      active: this.props.active,
-      'search-navigator-facet-half': this.props.halfWidth
+      active
     });
 
-    return this.props.disabled ? (
-      <span className={className} data-facet={this.props.value} title={this.props.tooltip}>
-        <span className="facet-name">{name}</span>
-        {this.renderValue()}
+    return (
+      <span role="listitem" className={classNames({ 'search-navigator-facet-half': halfWidth })}>
+        <button
+          aria-checked={active}
+          className={className}
+          data-facet={value}
+          onClick={this.handleClick}
+          tabIndex={0}
+          title={tooltip}
+          role="checkbox"
+          type="button">
+          <span className="facet-name">{name}</span>
+          {this.renderValue()}
+        </button>
       </span>
-    ) : (
-      <button
-        className={className}
-        data-facet={this.props.value}
-        onClick={this.handleClick}
-        tabIndex={0}
-        title={this.props.tooltip}
-        type="button">
-        <span className="facet-name">{name}</span>
-        {this.renderValue()}
-      </button>
     );
   }
 }

server/sonar-web/src/main/js/components/facet/FacetItemsList.tsx

@@ -26,8 +26,12 @@ export interface FacetItemsListProps {
 
 export default function FacetItemsList({ children, title }: FacetItemsListProps) {
   return (
-    <div className="search-navigator-facet-list">
-      {title && <div className="search-navigator-facet-list-title">{title}</div>}
+    <div className="search-navigator-facet-list" role="list">
+      {title && (
+        <div className="search-navigator-facet-list-title" role="presentation">
+          {title}
+        </div>
+      )}
       {children}
     </div>
   );

server/sonar-web/src/main/js/components/facet/__tests__/Facet-it.tsx

@@ -42,17 +42,14 @@ it('should render and function correctly', () => {
   expect(screen.getByText('Foo/Bar')).toBeInTheDocument();
 
   // Interact with facets.
-  const facet1 = screen.getByRole('button', { name: 'Foo/Bar 10' });
+  const facet1 = screen.getByRole('checkbox', { name: 'Foo/Bar 10' });
   expect(facet1).toHaveClass('active');
   facet1.click();
   expect(onFacetClick).toBeCalledWith('bar', false);
 
-  const facet2 = screen.getByRole('button', { name: 'Foo/Baz' });
+  const facet2 = screen.getByRole('checkbox', { name: 'Foo/Baz' });
   expect(facet2).not.toHaveClass('active');
 
-  expect(screen.queryByRole('button', { name: 'Foo/Bat' })).not.toBeInTheDocument();
-  expect(screen.getByText('Foo/Bat')).toBeInTheDocument();
-
   // Collapse again.
   facetHeader.click();
   expect(screen.getByRole('button', { name: 'foo', expanded: false })).toBeInTheDocument();
@@ -75,7 +72,7 @@ it('should correctly render a header with value data', () => {
 
 it('should correctly render a disabled header', () => {
   renderFacet(undefined, { onClick: undefined });
-  expect(screen.queryByRole('button', { name: 'foo' })).not.toBeInTheDocument();
+  expect(screen.queryByRole('checkbox', { name: 'foo' })).not.toBeInTheDocument();
 });
 
 it('should correctly render a facet item list with title', () => {
@@ -119,14 +116,6 @@ function renderFacet(
               value="baz"
               {...facetItemProps}
             />
-            <FacetItem
-              halfWidth={true}
-              name="Foo/Bat"
-              onClick={jest.fn()}
-              value="bat"
-              disabled={true}
-              {...facetItemProps}
-            />
           </FacetItemsList>
         )}
       </FacetBox>

server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap

@@ -60,7 +60,6 @@ exports[`should display all selected items 1`] = `
   <FacetItemsList>
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="a"
       loading={false}
@@ -72,7 +71,6 @@ exports[`should display all selected items 1`] = `
     />
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="b"
       loading={false}
@@ -91,7 +89,6 @@ exports[`should display all selected items 1`] = `
   <FacetItemsList>
     <FacetItem
       active={true}
-      disabled={false}
       halfWidth={false}
       key="c"
       loading={false}
@@ -145,7 +142,6 @@ exports[`should render 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="a"
       loading={false}
@@ -157,7 +153,6 @@ exports[`should render 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="b"
       loading={false}
@@ -169,7 +164,6 @@ exports[`should render 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="c"
       loading={false}
@@ -223,7 +217,6 @@ exports[`should search 1`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="d"
       loading={false}
@@ -235,7 +228,6 @@ exports[`should search 1`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="e"
       loading={false}
@@ -291,7 +283,6 @@ exports[`should search 2`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="d"
       loading={false}
@@ -303,7 +294,6 @@ exports[`should search 2`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="e"
       loading={false}
@@ -315,7 +305,6 @@ exports[`should search 2`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="f"
       loading={false}
@@ -371,7 +360,6 @@ exports[`should search 3`] = `
   <FacetItemsList>
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="a"
       loading={false}
@@ -383,7 +371,6 @@ exports[`should search 3`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="b"
       loading={false}
@@ -395,7 +382,6 @@ exports[`should search 3`] = `
     />
     <FacetItem
       active={false}
-      disabled={false}
       halfWidth={false}
       key="c"
       loading={false}

server/sonar-web/src/main/js/components/search-navigator.css

@@ -209,6 +209,7 @@ button.search-navigator-facet:focus,
 }
 
 .search-navigator-facet-half {
+  display: inline-flex;
   width: 45%;
 }