Version 5.0.0 beta 5

applications/blog/data/theme.xml

@@ -670,21 +670,17 @@
 		{{endif}}
 		{{if \count( $elements ) > 1}}
 			<h2 class='ipsBox__header'>{lang="entry_information"}</h2>
-			<div class='ipsTabs ipsJS_show' id='tabs_{$id}' data-ipsTabBar data-ipsTabBar-contentArea='#ipsTabs_content_{$id}'>
-				<ul role='tablist'>
+			<i-tabs class='ipsTabs' id='ipsTabs_{$id}' data-ipsTabBar data-ipsTabBar-contentArea='#ipsTabs_{$id}_content'>
+				<div role='tablist'>
 					{{foreach $elements as $name => $content}}
-						<li>
-							<a href='#ipsTabs_tabs_{$id}_{$id}_tab_{$name}_panel' id='{$id}_tab_{$name}' class="ipsTabs__tab" role="tab">
-								{lang="$name"}
-							</a>
-						</li>
+						<button type="button" id='ipsTabs_{$id}_{$name}' class="ipsTabs__tab" role="tab" aria-controls='ipsTabs_{$id}_{$name}_panel' aria-selected="{{if $name == 'blog_entry_mainTab'}}true{{else}}false{{endif}}">{lang="$name"}</button>
 					{{endforeach}}
-				</ul>
+					</div>
 				{template="tabScrollers" app="core" group="global" location="global"}
-			</div>
-			<div id='ipsTabs_content_{$id}' class='ipsTabs__panels'>
+			</i-tabs>
+			<div id='ipsTabs_{$id}_content' class='ipsTabs__panels'>
 				{{foreach $elements as $name => $contents}}
-					<div id='ipsTabs_tabs_{$id}_{$id}_tab_{$name}_panel' class="ipsTabs__panel ipsTabs__panel--{$name}" aria-labelledby="{$id}_tab_{$name}" aria-hidden="false">
+					<div id='ipsTabs_{$id}_{$name}_panel' class="ipsTabs__panel ipsTabs__panel--{$name}" role="tabpanel" aria-labelledby="ipsTabs_{$id}_{$name}" {{if $name != 'blog_entry_mainTab'}}hidden{{endif}}>
 						<ul class='ipsForm ipsForm--blog-submit-content ipsForm--vertical'>
 							{{foreach $contents as $inputName => $input}}
 								{$input|raw}