diff --git a/src/app/expandable-div/expandable-div.component.html b/src/app/expandable-div/expandable-div.component.html index 4e06340b..ac3a9cba 100644 --- a/src/app/expandable-div/expandable-div.component.html +++ b/src/app/expandable-div/expandable-div.component.html @@ -15,32 +15,45 @@

-

HTML

-
-

Resultat

- +
+ - - Denna div är collapsed från början - - -

Lite innehåll

-

Mer innehåll

-
-
-
-
- Fokusera på tvåan -
-
- - - {{ item.id }} {{ item.title }} - - -

{{ item.text }}

-
-
+

Expandable div med ett underliggande expandable div

+ + +
+ + +

Expandable div nivå 2

+
+ +

Kan innehålla både text, tabeller eller interaktiva element

+
+
+
+
+ + + + +

En annan expandable div

+
+ +

Lite innehåll

+
+
+ + + +

Ytterligare en expandable div

+
+ +

Mer innehåll

+
+
+
+

HTML

+
@@ -77,6 +90,11 @@

Templatestruktur

- Under utveckling +
    +
  1. rubrik läsas upp av skärmläsaren, sedan om den är expanded eller inte
  2. +
  3. Både enter och mellanslag triggar om den expanderas eller stängas
  4. +
  5. Om [expanded]="false" ska tabb flytta fokus till nästa synlig
  6. +
  7. Om [expanded]="true" ska tabb flytta fokus till nästa underliggande rad
  8. +
diff --git a/src/app/expandable-div/expandable-div.component.ts b/src/app/expandable-div/expandable-div.component.ts index e0ba6ed0..5aa43247 100644 --- a/src/app/expandable-div/expandable-div.component.ts +++ b/src/app/expandable-div/expandable-div.component.ts @@ -56,4 +56,6 @@ export class ExpandableDivComponent implements OnInit { } onExpandedChanged(flag: Boolean) { } + onExpandedChanged1(flag: Boolean) { } + onExpandedChanged2(flag: Boolean) { } }