diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 81c854a3ec0..a19d73441da 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -19,7 +19,7 @@ import { DialogNeptuneIFrameDialog, DialogWelcomeExampleDialog } from './dialog/dialog-a11y'; - +import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y'; import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y'; import {RadioAccessibilityDemo} from './radio/radio-a11y'; import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y'; @@ -76,6 +76,7 @@ export class AccessibilityRoutingModule {} DialogNeptuneExampleDialog, DialogNeptuneIFrameDialog, DialogWelcomeExampleDialog, + ExpansionPanelAccessibilityDemo, GridListAccessibilityDemo, IconAccessibilityDemo, InputAccessibilityDemo, diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index 63f6c7c6341..d6dd7063b52 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -32,6 +32,7 @@ export class AccessibilityDemo { {name: 'Chips', route: 'chips'}, {name: 'Datepicker', route: 'datepicker'}, {name: 'Dialog', route: 'dialog'}, + {name: 'Expansion panel', route: 'expansion'}, {name: 'Grid list', route: 'grid-list'}, {name: 'Icon', route: 'icon'}, {name: 'Input', route: 'input'}, diff --git a/src/demo-app/a11y/expansion/expansion-a11y.html b/src/demo-app/a11y/expansion/expansion-a11y.html new file mode 100644 index 00000000000..3d50dec3273 --- /dev/null +++ b/src/demo-app/a11y/expansion/expansion-a11y.html @@ -0,0 +1,53 @@ +
+

Siberian Husky

+

Single expansion panel

+ + + + Dog breed + + Siberian Husky + + The Siberian Husky is a medium size working dog breed that originated + in north-eastern Siberia, Russia. The breed belongs to the Spitz genetic family. + + + Wikipedia + + +
+ +
+

Dog breeds

+

Multiple expansion panel

+ + + Golden Retriever +

+ The Golden Retriever is a large-sized breed of dog bred as gun dogs to retrieve shot + waterfowl such as ducks and upland game birds during hunting and shooting parties, and + were named 'retriever' because of their ability to retrieve shot game undamaged. + Golden Retrievers have an instinctive love of water, and are easy to train to basic + or advanced obedience standards. +

+
+ + Beagle +

+ The Beagle is a breed of small hound, similar in appearance to the much larger foxhound. + The beagle is a scent hound, developed primarily for hunting hare. +

+
+ + Dachshund +

+ The dachshund is a short-legged, long-bodied, hound-type dog breed. The standard size + dachshund was developed to scent, chase, and flush out badgers and other burrow-dwelling + animals, while the miniature ... +

+ + + +
+
+
diff --git a/src/demo-app/a11y/expansion/expansion-a11y.scss b/src/demo-app/a11y/expansion/expansion-a11y.scss new file mode 100644 index 00000000000..d150f2dddcd --- /dev/null +++ b/src/demo-app/a11y/expansion/expansion-a11y.scss @@ -0,0 +1,6 @@ +.demo-expansion { + button, a { + margin: 8px; + text-transform: uppercase; + } +} diff --git a/src/demo-app/a11y/expansion/expansion-a11y.ts b/src/demo-app/a11y/expansion/expansion-a11y.ts new file mode 100644 index 00000000000..19d2f9b1e0a --- /dev/null +++ b/src/demo-app/a11y/expansion/expansion-a11y.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'expansion-a11y', + templateUrl: 'expansion-a11y.html', + styleUrls: ['expansion-a11y.css'] +}) +export class ExpansionPanelAccessibilityDemo { +} diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index a9d82c0e668..6f4af2c023e 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -6,6 +6,7 @@ import {CardAccessibilityDemo} from './card/card-a11y'; import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; import {ChipsAccessibilityDemo} from './chips/chips-a11y'; import {DialogAccessibilityDemo} from './dialog/dialog-a11y'; +import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y'; import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y'; import {RadioAccessibilityDemo} from './radio/radio-a11y'; import {AccessibilityHome} from './a11y'; @@ -34,6 +35,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: 'chips', component: ChipsAccessibilityDemo}, {path: 'datepicker', component: DatepickerAccessibilityDemo}, {path: 'dialog', component: DialogAccessibilityDemo}, + {path: 'expansion', component: ExpansionPanelAccessibilityDemo}, {path: 'grid-list', component: GridListAccessibilityDemo}, {path: 'icon', component: IconAccessibilityDemo}, {path: 'input', component: InputAccessibilityDemo},