diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css index 5c31593a3..5afe4b159 100644 --- a/packages/form-js-viewer/assets/form-js-base.css +++ b/packages/form-js-viewer/assets/form-js-base.css @@ -821,6 +821,26 @@ background-color: var(--color-background); } +.fjs-container .fjs-taglist-skip-link { + outline: none; + border: none; + background-color: transparent; + color: transparent; + height: 0px; + width: 0px; + position: absolute; + left: -100px; +} + +.fjs-container .fjs-taglist-skip-link:focus { + position: relative; + height: auto; + width: auto; + border: solid 1px var(--color-accent); + color: var(--color-accent); + left: 0; +} + .fjs-container .fjs-taglist .fjs-taglist-tag { display: flex; overflow: hidden; diff --git a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js index 692ea4da1..d9dad3c34 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js +++ b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js @@ -11,6 +11,7 @@ import DropdownList from './parts/DropdownList'; import Description from '../Description'; import Errors from '../Errors'; import Label from '../Label'; +import SkipLink from './parts/SkipLink'; import { sanitizeMultiSelectValue } from '../util/sanitizerUtil'; @@ -138,6 +139,10 @@ export default function Taglist(props) { } }; + const onSkipToSearch = () => { + searchbarRef.current.focus(); + }; + const shouldDisplayDropdown = useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [ disabled, isDropdownExpanded, isEscapeClosed, loadState ]); return
+ { (!disabled && !readonly && !!values.length) &&