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) && }
{ loadState === LOAD_STATES.LOADED &&
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SkipLink.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SkipLink.js new file mode 100644 index 000000000..5ffe537f6 --- /dev/null +++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SkipLink.js @@ -0,0 +1,29 @@ +import classNames from 'classnames'; + +import { useCallback } from 'preact/hooks'; + +export default function SkipLink(props) { + + const { + className, + label, + onSkip + } = props; + + const onKeyDown = useCallback(event => { + if (event.key === 'Enter') { + event.preventDefault(); + event.stopPropagation(); + onSkip(); + } + }, [ onSkip ]); + + + return ( + { label } + ); +} \ No newline at end of file diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js index 607612b49..15f994053 100644 --- a/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js +++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Taglist.spec.js @@ -308,6 +308,23 @@ describe('Taglist', function() { }); + it('should render skip to search link', function() { + + // when + const { container } = createTaglist({ + field: { + ...defaultField + }, + value: [ 'tag1', 'tag2', 'tag3' ] + }); + + // then + const skipLink = container.querySelector('.fjs-taglist-skip-link'); + + expect(skipLink).to.exist; + }); + + describe('interaction', function() { describe('tag deletion', function() {