mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-18 03:01:05 +01:00
Clean up html structure (#1869)
Fix different html syntax errors to improve a11y.
This commit is contained in:
@@ -119,10 +119,10 @@ const HitsList: FC<HitsProps> = ({ hits, index, clear, gotoDetailSearch }) => {
|
||||
return (
|
||||
<>
|
||||
{hits.map((hit, idx) => (
|
||||
<div key={id(hit)} onMouseDown={(e) => e.preventDefault()} onClick={clear}>
|
||||
<div key={id(hit)} onMouseDown={e => e.preventDefault()} onClick={clear}>
|
||||
<Link
|
||||
className={classNames("is-flex", "dropdown-item", "has-text-weight-medium", "is-ellipsis-overflow", {
|
||||
"is-active": idx === index,
|
||||
"is-active": idx === index
|
||||
})}
|
||||
title={id(hit)}
|
||||
to={`/repo/${id(hit)}`}
|
||||
@@ -179,7 +179,7 @@ const useKeyBoardNavigation = (gotoDetailSearch: () => void, clear: () => void,
|
||||
switch (e.which) {
|
||||
case 40: // e.code: ArrowDown
|
||||
if (hits) {
|
||||
setIndex((idx) => {
|
||||
setIndex(idx => {
|
||||
if (idx + 1 < hits.length) {
|
||||
return idx + 1;
|
||||
}
|
||||
@@ -189,7 +189,7 @@ const useKeyBoardNavigation = (gotoDetailSearch: () => void, clear: () => void,
|
||||
break;
|
||||
case 38: // e.code: ArrowUp
|
||||
if (hits) {
|
||||
setIndex((idx) => {
|
||||
setIndex(idx => {
|
||||
if (idx > 0) {
|
||||
return idx - 1;
|
||||
}
|
||||
@@ -219,7 +219,7 @@ const useKeyBoardNavigation = (gotoDetailSearch: () => void, clear: () => void,
|
||||
|
||||
return {
|
||||
onKeyDown,
|
||||
index,
|
||||
index
|
||||
};
|
||||
};
|
||||
|
||||
@@ -278,7 +278,7 @@ const useShowResultsOnFocus = () => {
|
||||
},
|
||||
onKeyPress: () => setShowResults(true),
|
||||
onFocus: () => setShowResults(true),
|
||||
hideResults: () => setShowResults(false),
|
||||
hideResults: () => setShowResults(false)
|
||||
};
|
||||
};
|
||||
|
||||
@@ -303,11 +303,12 @@ const useSearchParams = () => {
|
||||
|
||||
return {
|
||||
searchType,
|
||||
initialQuery,
|
||||
initialQuery
|
||||
};
|
||||
};
|
||||
|
||||
const OmniSearch: FC = () => {
|
||||
const [t] = useTranslation("commons");
|
||||
const { searchType, initialQuery } = useSearchParams();
|
||||
const [query, setQuery] = useState(initialQuery);
|
||||
const debouncedQuery = useDebounce(query, 250);
|
||||
@@ -334,7 +335,7 @@ const OmniSearch: FC = () => {
|
||||
{showHelp ? <SyntaxModal close={closeHelp} /> : null}
|
||||
<div
|
||||
className={classNames("control", "has-icons-right", {
|
||||
"is-loading": isLoading,
|
||||
"is-loading": isLoading
|
||||
})}
|
||||
>
|
||||
<div className={classNames("dropdown", { "is-active": (!!data || error) && showResults })}>
|
||||
@@ -342,13 +343,15 @@ const OmniSearch: FC = () => {
|
||||
<Input
|
||||
className="input is-small"
|
||||
type="text"
|
||||
placeholder="Search ..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t("search.placeholder")}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
value={query}
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
data-omnisearch="true"
|
||||
aria-expanded={query.length > 2}
|
||||
aria-label={t("search.ariaLabel")}
|
||||
{...handlers}
|
||||
/>
|
||||
{isLoading ? null : (
|
||||
@@ -357,7 +360,7 @@ const OmniSearch: FC = () => {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<DropdownMenu className="dropdown-menu" onMouseDown={(e) => e.preventDefault()}>
|
||||
<DropdownMenu className="dropdown-menu" onMouseDown={e => e.preventDefault()}>
|
||||
{error ? (
|
||||
<QuickSearchNotification>
|
||||
<SearchErrorNotification error={error} showHelp={openHelp} />
|
||||
|
||||
Reference in New Issue
Block a user