Family rebate
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Family rebate
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Family rebate
Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate.
Show code Hide code
The popover component is used to reveal additional content and functionalities.
Guidance
Do
- trigger a popover's visibility with a control element, for example, a button
- keep popovers actively open until a user dismisses them by pressing the Esc key, clicking outside the popover or performing another action that closes the popover.
Don't
- hide important information inside of a popover that the user may need in order to complete a task or workflow
- use on non-interactive elements (for example, div, span, p)
- use if the popover needs take up a large amount of the size of the screen
- have multiple popovers open at the same time
- nest one popover within another popover.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
Popover keyboard interaction and focus
- Opens via the
EnterorSpacekeys, or by clicking the trigger element. - On open, focus moves into the Popover container to navigate elements inside with the
Tabkey. - Dismissed by tabbing out of the Popover, pressing the
Escapekey, or clicking outside. - When dismissed, focus returns to the trigger element.
ARIA attributes
- The trigger element has
aria-expandedset totrueorfalsebased on the open state. - The trigger element has
aria-controlsset to theidof the Popover element. - The trigger element has
aria-haspopupset to the suitableroleattribute of the Popover, depending on the type of content.