Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/search/searchBar/search-hits.tsx (TypeScript)

Code before:
          ? null
          : `${searchUrl}?query=${encodeURIComponent(searchQuery)}`,
        title: t('search.see-results', { searchQuery: searchQuery }),
        _highlightResult: {
          query: {
            value: `
              <ais-highlight-0000000000>
                ${t('search.see-results', { searchQuery: searchQuery })}
              </ais-highlight-0000000000>
            `
          }
        }
      }
    ];
    const allHits = hits.slice(0, 8).concat(footer);
    useEffect(() => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
      handleHits(allHits);
    });

    return (
      <div className='ais-Hits'>
        <ul className='ais-Hits-list' data-cy='ais-Hits-list'>
          {allHits.map((hit: Hit, i: number) => (
            <li
              className={
                !noHits && i === selectedIndex
                  ? 'ais-Hits-item selected'
                  : 'ais-Hits-item'
              }
              data-fccobjectid={hit.objectID}
              key={hit.objectID}
            >
              {noHits ? (
                <NoHitsSuggestion
                  handleMouseEnter={handleMouseEnter}
                  handleMouseLeave={handleMouseLeave}
                  title={noHitsTitle}
                />
              ) : (
                <Suggestion
                  handleMouseEnter={handleMouseEnter}
                  handleMouseLeave={handleMouseLeave}
                  hit={hit}
                />
              )}
            </li>
          ))}
        </ul>
      </div>
    );

Review comment (suggestion):
Added a name/label to make the list a little more friendly to non-sighted users. It's also helpful for the tests, since we can query the list by its label.

Note that it you're testing this PR locally, you'll need to run `pnpm clean:client` in order for the actual translation string to show up.

Code after:
          ? null
          : `${searchUrl}?query=${encodeURIComponent(searchQuery)}`,
        title: t('search.see-results', { searchQuery: searchQuery }),
        _highlightResult: {
          query: {
            value: `
              <ais-highlight-0000000000>
                ${t('search.see-results', { searchQuery: searchQuery })}
              </ais-highlight-0000000000>
            `
          }
        }
      }
    ];
    const allHits = hits.slice(0, 8).concat(footer);
    useEffect(() => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
      handleHits(allHits);
    });

    return (
      <div className='ais-Hits'>
        <ul
          className='ais-Hits-list'
          data-cy='ais-Hits-list'
          aria-label={t('search.result-list')}
        >
          {allHits.map((hit: Hit, i: number) => (
            <li
              className={
                !noHits && i === selectedIndex
                  ? 'ais-Hits-item selected'
                  : 'ais-Hits-item'
              }
              data-fccobjectid={hit.objectID}
              key={hit.objectID}
            >
              {noHits ? (
                <NoHitsSuggestion
                  handleMouseEnter={handleMouseEnter}
                  handleMouseLeave={handleMouseLeave}
                  title={noHitsTitle}
                />
              ) : (
                <Suggestion
                  handleMouseEnter={handleMouseEnter}
                  handleMouseLeave={handleMouseLeave}
                  hit={hit}
                />
              )}
            </li>