You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The AccordionContainer and related components were built for enhanced quiz management feature and while putting the last touches on it. Currently the solution that manages the header has some complicated functions and scope by using the slot-props.
During review @rtibbles noted that the Expand/Collapse All should probably be built into the AccordionContainer which would result in a simplified slots-and-their-props situation.
Acceptance criteria
The templates as they are should work visually / structurally when moved from the CreateQuizSection component into the AccordionContainer component.
The <KGrid key="top-bar"....> line is where the structure starts (~L193) and you'll see there are two columns in this one row. With this in mind, we can think of the "top bar" as two distinct sections.
This means that we will need to expose two slots #left-actions and #right-actions where the user can put their own template code.
For example:
<AccordionContainer /* ... */>
<template #left-actions>
<!-- Everything here will be rendered to the left --->
<KCheckbox /* (De)select all */ />
</template>
<template #right-actions>
<!-- Everything here will be rendered to the right of the
baked-in Expand & Collapse all buttons -->
<KIconButton /* delete selection */ />
<KIconButton /* replace selection */ />
</template>
</AccordionContainer>
With this, the existing #top slot can be removed and the Expand and Collapse all icons should be baked into the component. The same functions that are there can be used, but since you'll render the buttons within the AccordionContainer you won't have to pass them down to the child slots.
All functionality and design should remain the same.
Accessibility considerations
Ensure that the user's focus enters the accordion panel when Expanding and the heading/title area when Collapsing
The text was updated successfully, but these errors were encountered:
Overview
The
AccordionContainer
and related components were built for enhanced quiz management feature and while putting the last touches on it. Currently the solution that manages the header has some complicated functions and scope by using the slot-props.During review @rtibbles noted that the
Expand/Collapse All
should probably be built into theAccordionContainer
which would result in a simplified slots-and-their-props situation.Acceptance criteria
CreateQuizSection
component into theAccordionContainer
component.<KGrid key="top-bar"....>
line is where the structure starts (~L193) and you'll see there are two columns in this one row. With this in mind, we can think of the "top bar" as two distinct sections.This means that we will need to expose two slots
#left-actions
and#right-actions
where the user can put their own template code.For example:
With this, the existing
#top
slot can be removed and the Expand and Collapse all icons should be baked into the component. The same functions that are there can be used, but since you'll render the buttons within theAccordionContainer
you won't have to pass them down to the child slots.Accessibility considerations
The text was updated successfully, but these errors were encountered: