feat(description-list): Adding option and logic to hide/show items in lists - FRONT-3895 #2821
Conversation
… lists - FRONT-3895
…brary into FRONT-3895-Description-list-visible-items
planctus
added
process: review needed
process: business approval needed
and removed
process: WIP
labels
| this.lists.forEach((list) => { | ||
| if (list.children && list.children.length > this.visibleItems) { | ||
| this.showHide(list.children); | ||
| const button = document.createElement('a'); |
There was a problem hiding this comment.
wouldn't it be better to use a real button instead of a link (without href)?
There was a problem hiding this comment.
i changed this in the last commit, it is because of the styles that the buttons have, that were a bit problematic and would sure requiremore iterations on the design side to tweak it.
There was a problem hiding this comment.
Ok, to be seen if that doesn't raise accessibility issues later (having a link without href is usually a bad practice)
Also the css has to be updated in this case, to have the hand cursor on hover (it isn't added if there is no href)
There was a problem hiding this comment.
i added the href.. ;) a link is still valid without an href but without it we would not be able to make the keyboard navigation work as expected without additional coding, so i simply added it
src/implementations/twig/components/description-list/description-list.html.twig
Show resolved
Hide resolved
src/implementations/twig/components/description-list/description-list.html.twig
Outdated
Show resolved
Hide resolved
src/implementations/twig/components/description-list/description-list.html.twig
Outdated
Show resolved
Hide resolved
…on-list.html.twig Co-authored-by: Romain Emery <emery.romain@gmail.com>
…on-list.html.twig Co-authored-by: Romain Emery <emery.romain@gmail.com>
…m:ec-europa/europa-component-library into FRONT-3895-Description-list-visible-items
|
Now that we can focus the link, I noticed that it is displayed wrongly, with the click area going outside of the the text. |
|
thanks @emeryro, the focusable area should be ok now |
…m:ec-europa/europa-component-library into FRONT-3895-Description-list-visible-items
as requested standaone links, inline links, taxonomy list items can be limited by setting a common parameter when including the template.
.
A control has been added in the story as a range, by default the vertical example is having collapsed lists while the horizontal doesn't.