# Pragma Notification Detail Component

This document describes the required features for the pragma-notification-detail component.

## Component

Name: pragma-notification-detail

A panel that will transition into view from the bottom of the screen. This panel will contain a visualisation
which will hold Notification Item detail. 

## Accessibility

Below all on custom element:
1. 'aria = labelledby'
1. 'role' = region
1. 'aria-live' = polite
1. 'aria-hidden' when closed

## Keyboard and Focus Behaviour

1. Prevent tab outside of dialog. (use dialog-navigation instance)
1. ESC to close.
1. Ensure first element is focused.

## Usage

The component is used in the HTML markup. The following is a example of how it is used.

```html
<pragma-notification-detail></pragma-notification-detail>
```

## Features

#### Add items

Listens for "load-Notification-Items" events. Takes a list of notification items as well as the target context.
Target context consists of the resource name, view name, record id and context info. Required by pragma-navigator
so user is redirected on viewing more information. 

#### Close panel

The component will clear self and set relevant style rules so it is closed/hidden.

#### Selection

When row in notification detail item list is selected the related record needs to be focused/selected.

#### State Management

Close component when user clicks close button. Close component when navigating away to another context.
Open component when user clicks on "more info" on summary notification. Redirect to target context if required.