mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00

Files

Lorenz Hilpert 5fe85282e7 📝 docs(shell): update READMEs and library reference

Update documentation for shell-header, shell-layout, shell-notifications,
and shell-common libraries with API references, E2E attributes, and
accessibility documentation.

2025-12-03 21:18:34 +01:00

2.7 KiB

Raw Blame History

shell-header

Type: Feature Library Domain: Shell Path: libs/shell/header

Overview

Application header component providing navigation, accessibility controls, and user actions. Displays on tablet/desktop viewports as the primary toolbar.

Features

Navigation toggle button (tablet/desktop responsive)
Font size selector for accessibility
Logout button with authentication integration
Notifications toggle with overlay panel

Installation

import { ShellHeaderComponent } from '@isa/shell/header';

Usage

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [ShellHeaderComponent],
  template: `<shell-header />`
})
export class AppLayoutComponent {}

Components

ShellHeaderComponent

Selector: shell-header

Main header container that orchestrates sub-components based on viewport breakpoint.

Internal Components

Component	Selector	Purpose
`ShellNavigationToggleComponent`	`shell-navigation-toggle`	Toggles navigation drawer state
`ShellFontSizeSelectorComponent`	`shell-font-size-selector`	Accessibility font size control
`ShellLogoutButtonComponent`	`shell-logout-button`	Triggers user logout
`ShellNotificationsToggleComponent`	`shell-notifications-toggle`	Opens notifications panel overlay

E2E Testing

Element	data-what	data-which	Purpose
Header	`header`	`shell-header`	Main header container
Navigation toggle	`button`	`navigation-toggle`	Menu button
Font size selector	`fieldset`	`font-size-selector`	Font size controls
Logout button	`button`	`logout-button`	Logout action
Notifications toggle	`button`	`notifications-toggle`	Notifications trigger
Notifications panel	`panel`	`notifications-panel`	Notifications overlay

Accessibility

Semantic <header> with role="banner"
Dynamic aria-label and aria-expanded on toggle buttons
Font size selector uses role="radiogroup"
Notifications panel uses role="dialog" with aria-haspopup

Dependencies

Internal:

@isa/shell/common - Navigation, font size, notifications services
@isa/shell/notifications - Notifications panel component
@isa/ui/buttons - IconButtonComponent, InfoButtonComponent
@isa/ui/layout - Breakpoint utilities
@isa/core/auth - AuthService
@isa/core/logging - Logger factory
@isa/icons - Navigation icons

Testing

npx nx test shell-header

@isa/shell/layout - Parent layout component
@isa/shell/common - Shared shell services
@isa/shell/notifications - Notifications display

2.7 KiB Raw Blame History