Class HyloAccordionItem

An accordion item.

Builds an accordion. Place it inside an hylo-accordion component. Consists of an hylo-accordion-item-header and an hylo-accordion-item-body component.

The class "open" is added/removed to this element depending on its status.

Listens for hyloImageLoaded events from hylo-responsive-image components to reset its height.

Properties

announcementClosed announcementDelay announcementOpened announcementReset closeOnBlur headerToBody isOpen openOnFocus scrollHeaderIntoView

Methods

close open toggle update

Events

hyloClosing hyloOpening

Properties

announcementClosed

announcementClosed: string

Text announced by screen readers when the area got closed.

Its hylo-page-root translations object key is "accordionAnnouncementClosed".

announcementDelay

announcementDelay: number = 500

The delay of the announcement in millisecond.

announcementOpened

announcementOpened: string

Text announced by screen readers when the area got opened.

Its hylo-page-root translations object key is "accordionAnnouncementOpened".

announcementReset

announcementReset: number = 10000

The time in milliseconds it takes, until the announcement text is removed from the hylo-accessibility-announcement component included in this component. The announcement is automaticly removed when a keydown or click event occurs. If none is triggered a screen reader might reach the announcement component and read the text.

Set to 0 to disable this functionality.

closeOnBlur

closeOnBlur: boolean = false

Closes the accordion item when it looses focus by a key press. Can also be achieved by giving the class "hylo-accordion-close-on-blur" to the element or one of its ancestor elements.

headerToBody

headerToBody: boolean = false

Copies the header's text content in front of the items body in a hylo-sr-only component and sets the header itself to aria-hidden="true". Sets always the tabIndex of the body to 0 when "openOnFocus" when it is not already >= 0 or is not set through the element attribute "tabindex". Can also be achieved by giving the class "hylo-accordion-header-to-body" to the element or one of its ancestor elements.

Happens when the component got initialised.

isOpen

isOpen: boolean = false

Is the accordion item open? Can be used to set an initial state.

openOnFocus

openOnFocus: boolean = false

Opens the accordion item when it gains focus by a key press. Can also be achieved by giving the class "hylo-accordion-open-on-focus" to the element or one of its ancestor elements.

Sets the tabIndex of the hylo-accordion-body to 0 if no child element can gain the focus and it is not already >= 0 or is not set through the element attribute "tabindex".

Adds the class "hylo-focused".

scrollHeaderIntoView

scrollHeaderIntoView: boolean = false

Scrolls the accordion item header into view when the accordion item gets opened. Can also be set for the whole hylo-accordion component.

Methods

close

  • close(): Promise<void>

  • Closes the accordion item.

    Returns Promise<void>

open

  • open(): Promise<void>

  • Opens the accordion item.

    Returns Promise<void>

toggle

  • toggle(): Promise<void>

  • Toggles the accordion item between being open or closed.

    Returns Promise<void>

update

  • update(): Promise<void>

  • Updates the height of the item.

    Returns Promise<void>

Events

hyloClosing

hyloClosing: EventEmitter<any>

Fires when the accordion item gets closed.

hyloOpening

hyloOpening: EventEmitter<any>

Fires when the accordion item gets opened.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc