Merge pull request #11014 from MrPetovan/task/10978-settings-keyboard-actionable

[frio] Make accordions keyboard actionable

doc/Addons.md

@@ -242,12 +242,118 @@ Called when the Settings pages are submitted.
 
 ### addon_settings
 Called when generating the HTML for the addon settings page.
-`$b` is the (string) HTML of the addon settings page before the final `</form>` tag.
+`$data` is an array containing:
+
+- **addon** (output): Required. The addon folder name.
+- **title** (output): Required. The addon settings panel title.
+- **href** (output): Optional. If set, will reduce the panel to a link pointing to this URL, can be relative. Incompatible with the following keys.
+- **html** (output): Optional. Raw HTML of the addon form elements. Both the `<form>` tags and the submit buttons are taken care of elsewhere.
+- **submit** (output): Optional. If unset, a default submit button with `name="<addon name>-submit"` will be generated.
+  Can take different value types:
+  - **string**: The label to replace the default one.
+  - **associative array**: A list of submit button, the key is the value of the `name` attribute, the value is the displayed label.
+    The first submit button in this list is considered the main one and themes might emphasize its display.
+
+#### Examples
+
+##### With link
+```php
+$data = [
+	'addon' => 'advancedcontentfilter',
+	'title' => DI::l10n()->t('Advanced Content Filter'),
+	'href'  => 'advancedcontentfilter',
+];
+```
+##### With default submit button
+```php
+$data = [
+	'addon' => 'fromapp',
+	'title' => DI::l10n()->t('FromApp Settings'),
+	'html'  => $html,
+];
+```
+##### With no HTML, just a submit button
+```php
+$data = [
+	'addon'  => 'opmlexport',
+	'title'  => DI::l10n()->t('OPML Export'),
+	'submit' => DI::l10n()->t('Export RSS/Atom contacts'),
+];
+```
+##### With multiple submit buttons
+```php
+$data = [
+	'addon'  => 'catavar',
+	'title'  => DI::l10n()->t('Cat Avatar Settings'),
+	'html'   => $html,
+	'submit' => [
+		'catavatar-usecat'   => DI::l10n()->t('Use Cat as Avatar'),
+		'catavatar-morecat'  => DI::l10n()->t('Another random Cat!'),
+		'catavatar-emailcat' => DI::pConfig()->get(local_user(), 'catavatar', 'seed', false) ? DI::l10n()->t('Reset to email Cat') : null,
+	],
+];
+```
 
 ### addon_settings_post
 Called when the Addon Settings pages are submitted.
 `$b` is the $_POST array.
 
+### connector_settings
+Called when generating the HTML for a connector addon settings page.
+`$data` is an array containing:
+
+- **connector** (output): Required. The addon folder name.
+- **title** (output): Required. The addon settings panel title.
+- **image** (output): Required. The relative path of the logo image of the platform/protocol this addon is connecting to, max size 48x48px.
+- **enabled** (output): Optional. If set to a falsy value, the connector image will be dimmed.
+- **html** (output): Optional. Raw HTML of the addon form elements. Both the `<form>` tags and the submit buttons are taken care of elsewhere.
+- **submit** (output): Optional. If unset, a default submit button with `name="<addon name>-submit"` will be generated.
+  Can take different value types:
+    - **string**: The label to replace the default one.
+      - **associative array**: A list of submit button, the key is the value of the `name` attribute, the value is the displayed label.
+        The first submit button in this list is considered the main one and themes might emphasize its display.
+
+#### Examples
+
+##### With default submit button
+```php
+$data = [
+	'connector' => 'diaspora',
+	'title'     => DI::l10n()->t('Diaspora Export'),
+	'image'     => 'images/diaspora-logo.png',
+	'enabled'   => $enabled,
+	'html'      => $html,
+];
+```
+
+##### With custom submit button label and no logo dim
+```php
+$data = [
+	'connector' => 'ifttt',
+	'title'     => DI::l10n()->t('IFTTT Mirror'),
+	'image'     => 'addon/ifttt/ifttt.png',
+	'html'      => $html,
+	'submit'    => DI::l10n()->t('Generate new key'),
+];
+```
+
+##### With conditional submit buttons
+```php
+$submit = ['pumpio-submit' => DI::l10n()->t('Save Settings')];
+if ($oauth_token && $oauth_token_secret) {
+	$submit['pumpio-delete'] = DI::l10n()->t('Delete this preset');
+}
+
+$data = [
+	'connector' => 'pumpio',
+	'title'     => DI::l10n()->t('Pump.io Import/Export/Mirror'),
+	'image'     => 'images/pumpio.png',
+	'enabled'   => $enabled,
+	'html'      => $html,
+	'submit'    => $submit,
+];
+```
+
 ### profile_post
 Called when posting a profile page.
 `$b` is the $_POST array.

mod/settings.php

@@ -62,16 +62,17 @@ function settings_post(App $a)
 	}
 
 	if ((DI::args()->getArgc() > 1) && (DI::args()->getArgv()[1] == 'addon')) {
-		BaseModule::checkFormSecurityTokenRedirectOnError('/settings/addon', 'settings_addon');
+		BaseModule::checkFormSecurityTokenRedirectOnError(DI::args()->getQueryString(), 'settings_addon');
 
 		Hook::callAll('addon_settings_post', $_POST);
+		DI::baseUrl()->redirect(DI::args()->getQueryString());
 		return;
 	}
 
 	$user = User::getById($a->getLoggedInUserId());
 
 	if ((DI::args()->getArgc() > 1) && (DI::args()->getArgv()[1] == 'connectors')) {
-		BaseModule::checkFormSecurityTokenRedirectOnError('/settings/connectors', 'settings_connectors');
+		BaseModule::checkFormSecurityTokenRedirectOnError(DI::args()->getQueryString(), 'settings_connectors');
 
 		if (!empty($_POST['general-submit'])) {
 			DI::pConfig()->set(local_user(), 'system', 'accept_only_sharer', intval($_POST['accept_only_sharer']));
@@ -80,7 +81,7 @@ function settings_post(App $a)
 			DI::pConfig()->set(local_user(), 'system', 'simple_shortening', intval($_POST['simple_shortening']));
 			DI::pConfig()->set(local_user(), 'system', 'attach_link_title', intval($_POST['attach_link_title']));
 			DI::pConfig()->set(local_user(), 'ostatus', 'legacy_contact', $_POST['legacy_contact']);
-		} elseif (!empty($_POST['imap-submit'])) {
+		} elseif (!empty($_POST['mail-submit'])) {
 			$mail_server       =                 $_POST['mail_server']       ?? '';
 			$mail_port         =                 $_POST['mail_port']         ?? '';
 			$mail_ssl          = strtolower(trim($_POST['mail_ssl']          ?? ''));
@@ -132,6 +133,7 @@ function settings_post(App $a)
 		}
 
 		Hook::callAll('connector_settings_post', $_POST);
+		DI::baseUrl()->redirect(DI::args()->getQueryString());
 		return;
 	}
 
@@ -438,11 +440,27 @@ function settings_content(App $a)
 
 	if ((DI::args()->getArgc() > 1) && (DI::args()->getArgv()[1] === 'addon')) {
 		$addon_settings_forms = [];
-
 		foreach (DI::dba()->selectToArray('hook', ['file', 'function'], ['hook' => 'addon_settings']) as $hook) {
-			$data = '';
+			$data = [];
 			Hook::callSingle(DI::app(), 'addon_settings', [$hook['file'], $hook['function']], $data);
-			$addon_settings_forms[] = $data;
+
+			if (!empty($data['href'])) {
+				$tpl = Renderer::getMarkupTemplate('settings/addon/link.tpl');
+				$addon_settings_forms[] = Renderer::replaceMacros($tpl, [
+					'$addon' => $data['addon'],
+					'$title' => $data['title'],
+					'$href'  => $data['href'],
+				]);
+			} elseif(!empty($data['addon'])) {
+				$tpl = Renderer::getMarkupTemplate('settings/addon/panel.tpl');
+				$addon_settings_forms[$data['addon']] = Renderer::replaceMacros($tpl, [
+					'$addon'  => $data['addon'],
+					'$title'  => $data['title'],
+					'$open'   => (DI::args()->getArgv()[2] ?? '') === $data['addon'],
+					'$html'   => $data['html'] ?? '',
+					'$submit' => $data['submit'] ?? DI::l10n()->t('Save Settings'),
+				]);
+			}
 		}
 
 		$tpl = Renderer::getMarkupTemplate('settings/addons.tpl');
@@ -490,8 +508,22 @@ function settings_content(App $a)
 			DI::page()['htmlhead'] = '<meta http-equiv="refresh" content="0; URL=' . DI::baseUrl().'/ostatus_subscribe?url=' . urlencode($legacy_contact) . '">';
 		}
 
-		$settings_connectors = '';
+		$connector_settings_forms = [];
-		Hook::callAll('connector_settings', $settings_connectors);
+		foreach (DI::dba()->selectToArray('hook', ['file', 'function'], ['hook' => 'connector_settings']) as $hook) {
+			$data = [];
+			Hook::callSingle(DI::app(), 'connector_settings', [$hook['file'], $hook['function']], $data);
+
+			$tpl = Renderer::getMarkupTemplate('settings/addon/connector.tpl');
+			$connector_settings_forms[$data['connector']] = Renderer::replaceMacros($tpl, [
+				'$connector' => $data['connector'],
+				'$title'     => $data['title'],
+				'$image'     => $data['image'] ?? '',
+				'$enabled'   => $data['enabled'] ?? true,
+				'$open'      => (DI::args()->getArgv()[2] ?? '') === $data['connector'],
+				'$html'      => $data['html'] ?? '',
+				'$submit'    => $data['submit'] ?? DI::l10n()->t('Save Settings'),
+			]);
+		}
 
 		if ($a->isSiteAdmin()) {
 			$diasp_enabled = DI::l10n()->t('Built-in support for %s connectivity is %s', DI::l10n()->t('Diaspora (Socialhome, Hubzilla)'), ((DI::config()->get('system', 'diaspora_enabled')) ? DI::l10n()->t('enabled') : DI::l10n()->t('disabled')));
@@ -548,11 +580,11 @@ function settings_content(App $a)
 			'$repair_ostatus_url' => DI::baseUrl() . '/repair_ostatus',
 			'$repair_ostatus_text' => DI::l10n()->t('Repair OStatus subscriptions'),
 
-			'$settings_connectors' => $settings_connectors,
+			'$connector_settings_forms' => $connector_settings_forms,
 
-			'$h_imap' => DI::l10n()->t('Email/Mailbox Setup'),
+			'$h_mail' => DI::l10n()->t('Email/Mailbox Setup'),
-			'$imap_desc' => DI::l10n()->t("If you wish to communicate with email contacts using this service \x28optional\x29, please specify how to connect to your mailbox."),
+			'$mail_desc' => DI::l10n()->t("If you wish to communicate with email contacts using this service \x28optional\x29, please specify how to connect to your mailbox."),
-			'$imap_lastcheck' => ['imap_lastcheck', DI::l10n()->t('Last successful email check:'), $mail_chk, ''],
+			'$mail_lastcheck' => ['mail_lastcheck', DI::l10n()->t('Last successful email check:'), $mail_chk, ''],
 			'$mail_disabled' => $mail_disabled_message,
 			'$mail_server'	=> ['mail_server',	DI::l10n()->t('IMAP server name:'), $mail_server, ''],
 			'$mail_port'	=> ['mail_port', 	DI::l10n()->t('IMAP port:'), $mail_port, ''],

view/templates/settings/addon/connector.tpl

@@ -0,0 +1,34 @@
+<span id="settings_{{$connector}}_inflated" class="settings-block fakelink" style="display: {{if $open}}none{{else}}block{{/if}};" onclick="openClose('settings_{{$connector}}_expanded'); openClose('settings_{{$connector}}_inflated');">
+	<img class="connector{{if !$enabled}}-disabled{{/if}}" src="{{$image}}" /><h3 class="connector">{{$title}}</h3>
+</span>
+<div id="settings_{{$connector}}_expanded" class="settings-block" style="display: {{if $open}}block{{else}}none{{/if}};">
+	<span class="fakelink" onclick="openClose('settings_{{$connector}}_expanded'); openClose('settings_{{$connector}}_inflated');">
+		<img class="connector{{if !$enabled}}-disabled{{/if}}" src="{{$image}}" /><h3 class="connector">{{$title}}</h3>
+	</span>
+	{{$html nofilter}}
+	<div class="clear"></div>
+{{if $submit}}
+	<div class="settings-submit-wrapper panel-footer">
+    {{if $submit|is_string}}
+		<button type="submit" name="{{$connector}}-submit" class="btn btn-primary settings-submit" value="{{$submit}}">{{$submit}}</button>
+    {{else}}
+        {{$count = 1}}
+		{{foreach $submit as $name => $label}}{{if $label}}
+			{{if $count == 1}}
+		<button type="submit" name="{{$name}}" class="btn btn-primary settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{if $count == 2}}
+		<div class="btn-group" role="group" aria-label="...">
+			{{/if}}
+            {{if $count != 1}}
+			<button type="submit" name="{{$name}}" class="btn btn-default settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{$count = $count + 1}}
+        {{/if}}{{/foreach}}
+		{{if $submit|count > 1}}
+		</div>
+		{{/if}}
+    {{/if}}
+	</div>
+{{/if}}
+</div>

view/templates/settings/addon/link.tpl

@@ -0,0 +1 @@
+<span class="settings-block fakelink" style="display: block;"><h3><a href="{{$href}}">{{$title}} <i class="glyphicon glyphicon-share"></i></a></h3></span>

view/templates/settings/addon/panel.tpl

@@ -0,0 +1,33 @@
+<span id="settings_{{$addon}}_inflated" class="settings-block fakelink" style="display: {{if $open}}none{{else}}block{{/if}};" onclick="openClose('settings_{{$addon}}_expanded'); openClose('settings_{{$addon}}_inflated');">
+	<h3>{{$title}}</h3>
+</span>
+<div id="settings_{{$addon}}_expanded" class="settings-block" style="display: {{if $open}}block{{else}}none{{/if}};">
+	<span class="fakelink" onclick="openClose('settings_{{$addon}}_expanded'); openClose('settings_{{$addon}}_inflated');">
+		<h3>{{$title}}</h3>
+	</span>
+	{{$html nofilter}}
+{{if $submit}}
+	<div class="settings-submit-wrapper panel-footer">
+    {{if $submit|is_string}}
+		<button type="submit" name="{{$addon}}-submit" class="btn btn-primary settings-submit" value="{{$submit}}">{{$submit}}</button>
+    {{else}}
+        {{$count = 1}}
+		{{foreach $submit as $name => $label}}{{if $label}}
+			{{if $count == 1}}
+		<button type="submit" name="{{$name}}" class="btn btn-primary settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{if $count == 2}}
+		<div class="btn-group" role="group" aria-label="...">
+			{{/if}}
+            {{if $count != 1}}
+			<button type="submit" name="{{$name}}" class="btn btn-default settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{$count = $count + 1}}
+        {{/if}}{{/foreach}}
+		{{if $submit|count > 1}}
+		</div>
+		{{/if}}
+    {{/if}}
+	</div>
+{{/if}}
+</div>

view/templates/settings/addons.tpl

@@ -1,8 +1,8 @@
 <h1>{{$title}}</h1>
 
-{{foreach $addon_settings_forms as $addon_settings_form}}
+{{foreach $addon_settings_forms as $addon => $addon_settings_form}}
 
-<form action="settings/addon" method="post" autocomplete="off">
+<form action="settings/addon/{{$addon}}" method="post" autocomplete="off">
 	<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 	{{$addon_settings_form nofilter}}
 </form>

view/templates/settings/connectors.tpl

@@ -24,23 +24,22 @@
 			<input type="submit" id="general-submit" name="general-submit" class="settings-submit" value="{{$submit}}"/>
 		</div>
 	</div>
+</form>
 <div class="clear"></div>
 
-	{{$settings_connectors nofilter}}
+{{if !$mail_disabled}}
-
+<form action="settings/connectors" method="post" autocomplete="off">
-	{{if $mail_disabled}}
+	<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
-
-	{{else}}
 	<span id="settings_mail_inflated" class="settings-block fakelink" style="display: block;"
 	      onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
-		<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_imap}}</h3>
+		<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_mail}}</h3>
 	</span>
 	<div id="settings_mail_expanded" class="settings-block" style="display: none;">
 		<span class="fakelink" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
-		<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_imap}}</h3>
+			<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_mail}}</h3>
 		</span>
-			<p>{{$imap_desc nofilter}}</p>
+		<p>{{$mail_desc nofilter}}</p>
-			{{include file="field_custom.tpl" field=$imap_lastcheck}}
+		{{include file="field_custom.tpl" field=$mail_lastcheck}}
 		{{include file="field_input.tpl" field=$mail_server}}
 		{{include file="field_input.tpl" field=$mail_port}}
 		{{include file="field_select.tpl" field=$mail_ssl}}
@@ -52,8 +51,16 @@
 		{{include file="field_input.tpl" field=$mail_movetofolder}}
 
 		<div class="settings-submit-wrapper">
-				<input type="submit" id="imap-submit" name="imap-submit" class="settings-submit" value="{{$submit}}"/>
+			<input type="submit" id="mail-submit" name="mail-submit" class="settings-submit" value="{{$submit}}"/>
 		</div>
 	</div>
-	{{/if}}
 </form>
+{{/if}}
+
+{{foreach $connector_settings_forms as $addon => $connector_settings_form}}
+<form action="settings/connectors/{{$addon}}" method="post" autocomplete="off">
+	<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+    {{$connector_settings_form nofilter}}
+	<div class="clear"></div>
+</form>
+{{/foreach}}

view/theme/frio/css/style.css

@@ -2901,13 +2901,13 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 	padding: 1px 10px;
 }
 details.profile-jot-net[open] summary:before,
-.panel .section-subtitle-wrapper a.accordion-toggle:before {
+.panel .section-subtitle-wrapper .accordion-toggle:before {
 	font-family: ForkAwesome;
 	content: "\f0d7";
 	padding-right: 5px;
 }
 details.profile-jot-net summary:before,
-.panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
+.panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
 	font-family: ForkAwesome;
 	content: "\f0da";
 }
@@ -2965,17 +2965,21 @@ details.profile-jot-net[open] summary:before {
 	margin-bottom: 10px;
 }
 
+.section-subtitle-wrapper > h3 {
+	font-size: 16px;
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
 .fakelink > h3:before {
 	padding-right: 10px;
 }
-.widget.fakelink > h3:before,
+.widget.fakelink > h3:before {
-.settings-block.fakelink > h3:before {
 	font-family: ForkAwesome;
 	content: "\f0da"; /* Right Plain Pointer */
 }
 .widget > .fakelink > h3:before,
-#sidebar-group-header > .fakelink > h3:before,
+#sidebar-group-header > .fakelink > h3:before {
-.settings-block > .fakelink > h3:before {
 	font-family: ForkAwesome;
 	content: "\f0d7"; /* Bottom Plain Pointer */
 }

view/theme/frio/templates/admin/blocklist/contact.tpl

@@ -11,9 +11,9 @@
 		<div class="panel">
 			<div class="panel-heading section-subtitle-wrapper" role="tab" id="admin-settings-contactblock-block">
 				<h4>
-					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contactblock-block-collapse" aria-expanded="false" aria-controls="admin-settings-contactblock-block-collapse">
+					<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contactblock-block-collapse" aria-expanded="false" aria-controls="admin-settings-contactblock-block-collapse">
 						{{$h_newblock}}
-					</a>
+					</button>
 				</h4>
 			</div>
 
@@ -37,9 +37,9 @@
 		<div class="panel">
 			<div class="panel-heading section-subtitle-wrapper" role="tab" id="admin-settings-contactblock-blocked">
 				<h4>
-					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contactblock-blocked-collapse" aria-expanded="{{if count($contacts) > 0}}true{{else}}false{{/if}}" aria-controls="admin-settings-contactblock-blocked-collapse">
+					<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contactblock-blocked-collapse" aria-expanded="{{if count($contacts) > 0}}true{{else}}false{{/if}}" aria-controls="admin-settings-contactblock-blocked-collapse">
 						{{$h_contacts}} ({{$total_contacts}})
-					</a>
+					</button>
 				</h4>
 			</div>
 

view/theme/frio/templates/admin/features.tpl

@@ -8,9 +8,9 @@
 				<div class="panel">
 					<div class="section-subtitle-wrapper panel-heading" role="tab" id="{{$g}}-settings-title">
 						<h2>
-							<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#{{$g}}-settings-content" aria-expanded="true" aria-controls="{{$g}}-settings-content">
+							<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#{{$g}}-settings-content" aria-expanded="true" aria-controls="{{$g}}-settings-content">
 								{{$f.0}}
-							</a>
+							</button>
 						</h2>
 					</div>
 					<div id="{{$g}}-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{$g}}-settings-title">

view/theme/frio/templates/admin/site.tpl

@@ -29,9 +29,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-general">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-general-collapse" aria-expanded="false" aria-controls="admin-settings-general-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-general-collapse" aria-expanded="false" aria-controls="admin-settings-general-collapse">
 							{{$general_info}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-general-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-general">
@@ -64,9 +64,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-registration">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-registration-collapse" aria-expanded="false" aria-controls="admin-settings-registration-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-registration-collapse" aria-expanded="false" aria-controls="admin-settings-registration-collapse">
 							{{$registration}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-registration-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-registration">
@@ -93,9 +93,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-upload">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-upload-collapse" aria-expanded="false" aria-controls="admin-settings-upload-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-upload-collapse" aria-expanded="false" aria-controls="admin-settings-upload-collapse">
 							{{$upload}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-upload-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-upload">
@@ -118,9 +118,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-corporate">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-corporate-collapse" aria-expanded="false" aria-controls="admin-settings-corporate-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-corporate-collapse" aria-expanded="false" aria-controls="admin-settings-corporate-collapse">
 							{{$corporate}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-corporate-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-corporate">
@@ -179,9 +179,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-$dvanced">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-advanced-collapse" aria-expanded="false" aria-controls="admin-settings-advanced-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-advanced-collapse" aria-expanded="false" aria-controls="admin-settings-advanced-collapse">
 							{{$advanced}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-advanced-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-advanced">
@@ -209,9 +209,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-contacts">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contacts-collapse" aria-expanded="false" aria-controls="admin-settings-contacts-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contacts-collapse" aria-expanded="false" aria-controls="admin-settings-contacts-collapse">
 							{{$portable_contacts}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-contacts-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-cocontactsrporate">
@@ -235,9 +235,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-performance">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-performance-collapse" aria-expanded="false" aria-controls="admin-settings-performance-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-performance-collapse" aria-expanded="false" aria-controls="admin-settings-performance-collapse">
 							{{$performance}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-performance-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-performance">
@@ -265,9 +265,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-worker">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-worker-collapse" aria-expanded="false" aria-controls="admin-settings-worker-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-worker-collapse" aria-expanded="false" aria-controls="admin-settings-worker-collapse">
 							{{$worker_title}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-worker-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-worker">
@@ -290,9 +290,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-relay-corporate">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-relay-collapse" aria-expanded="false" aria-controls="admin-settings-relay-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-relay-collapse" aria-expanded="false" aria-controls="admin-settings-relay-collapse">
 							{{$relay_title}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="admin-settings-relay-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-relay">
@@ -331,9 +331,9 @@
 			<input type="hidden" name="active_panel" value="admin-settings-relocate-collapse">
 			<div class="section-subtitle-wrapper panel-heading" role="tab" id="admin-settings-relocate">
 				<h2>
-					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-relocate-collapse" aria-expanded="false" aria-controls="admin-settings-relocate-collapse">
+					<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-relocate-collapse" aria-expanded="false" aria-controls="admin-settings-relocate-collapse">
 						{{$relocate}}
-					</a>
+					</button>
 				</h2>
 			</div>
 			<div id="admin-settings-relocate-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-relocate">

view/theme/frio/templates/admin/storage.tpl

@@ -15,9 +15,9 @@
 		<div class="panel">
 			<div class="section-subtitle-wrapper panel-title" role="tab" id="admin-settings-{{$storage.prefix}}">
 				<h3>
-					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-{{$storage.prefix}}-collapse" aria-expanded="false" aria-controls="admin-settings-{{$storage.prefix}}-collapse">
+					<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-{{$storage.prefix}}-collapse" aria-expanded="false" aria-controls="admin-settings-{{$storage.prefix}}-collapse">
 						{{$storage.name}}
-					</a>
+					</button>
 				</h3>
 			</div>
 			<div id="admin-settings-{{$storage.prefix}}-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-{{$storage.prefix}}">

view/theme/frio/templates/contact_edit.tpl

@@ -68,9 +68,9 @@
 					<div class="panel">
 						<div class="section-subtitle-wrapper panel-heading" role="tab" id="contact-edit-profile">
 							<h4>
-								<a class="accordion-toggle" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-profile-collapse" aria-expanded="true" aria-controls="contact-edit-profile-collapse">
+								<button class="btn-link accordion-toggle" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-profile-collapse" aria-expanded="true" aria-controls="contact-edit-profile-collapse">
 									{{$contact_profile_label}}
-								</a>
+								</button>
 							</h4>
 						</div>
 						<div id="contact-edit-profile-collapse" class="panel-body panel-collapse collapse in" role="tabpanel" aria-labelledby="contact-edit-profile">
@@ -127,9 +127,9 @@
 					<div class="panel">
 						<div class="section-subtitle-wrapper panel-heading" role="tab" id="contact-edit-settings">
 							<h4>
-								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-settings-collapse" aria-expanded="false" aria-controls="contact-edit-settings-collapse">
+								<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-settings-collapse" aria-expanded="false" aria-controls="contact-edit-settings-collapse">
 									{{$contact_settings_label}}
-								</a>
+								</button>
 							</h4>
 						</div>
 						<div id="contact-edit-settings-collapse" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="contact-edit-settings">
@@ -161,9 +161,9 @@
 					<div class="panel">
 						<div class="section-subtitle-wrapper panel-heading" role="tab" id="contact-edit-info">
 							<h4>
-								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-info-collapse" aria-expanded="false" aria-controls="contact-edit-info-collapse">
+								<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-info-collapse" aria-expanded="false" aria-controls="contact-edit-info-collapse">
 									{{$lbl_info1}}
-								</a>
+								</button>
 							</h4>
 						</div>
 						<div id="contact-edit-info-collapse" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="contact-edit-info">

view/theme/frio/templates/settings/addon/connector.tpl

@@ -0,0 +1,36 @@
+	<div class="section-subtitle-wrapper panel-heading" role="tab" id="{{$connector}}-settings-title">
+		<h2>
+			<button class="btn-link accordion-toggle{{if !$open}} collapsed{{/if}}" data-toggle="collapse" data-parent="#settings-connectors" href="#{{$connector}}-settings-content" aria-expanded="false" aria-controls="{{$connector}}-settings-content">
+				<img class="connector{{if !$enabled}}-disabled{{/if}}" src="{{$image}}" /> {{$title}}
+			</button>
+		</h2>
+	</div>
+	<div id="{{$connector}}-settings-content" class="panel-collapse collapse{{if $open}} in{{/if}}" role="tabpanel" aria-labelledby="{{$connector}}-settings-title">
+		<div class="panel-body">
+			{{$html nofilter}}
+		</div>
+		<div class="panel-footer">
+{{if $submit}}
+    {{if $submit|is_string}}
+			<button type="submit" name="{{$connector}}-submit" class="btn btn-primary settings-submit" value="{{$submit}}">{{$submit}}</button>
+    {{else}}
+        {{$count = 1}}
+        {{foreach $submit as $name => $label}}{{if $label}}
+            {{if $count == 1}}
+			<button type="submit" name="{{$name}}" class="btn btn-primary settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{if $count == 2}}
+			<div class="btn-group" role="group" aria-label="...">
+            {{/if}}
+            {{if $count != 1}}
+				<button type="submit" name="{{$name}}" class="btn btn-default settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{$count = $count + 1}}
+        {{/if}}{{/foreach}}
+        {{if $submit|count > 1}}
+			</div>
+        {{/if}}
+	{{/if}}
+{{/if}}
+		</div>
+	</div>

view/theme/frio/templates/settings/addon/link.tpl

@@ -0,0 +1 @@
+<div class="settings-block"><h3><a href="{{$href}}">{{$title}} <i class="glyphicon glyphicon-share"></i></a></h3></div>

view/theme/frio/templates/settings/addon/panel.tpl

@@ -0,0 +1,36 @@
+	<div class="section-subtitle-wrapper panel-heading" role="tab" id="{{$addon}}-settings-title">
+		<h2>
+			<button class="btn-link accordion-toggle{{if !$open}} collapsed{{/if}}" data-toggle="collapse" data-parent="#settings-addons" href="#{{$addon}}-settings-content" aria-expanded="false" aria-controls="{{$addon}}-settings-content">
+				{{$title}}
+			</button>
+		</h2>
+	</div>
+	<div id="{{$addon}}-settings-content" class="panel-collapse collapse{{if $open}} in{{/if}}" role="tabpanel" aria-labelledby="{{$addon}}-settings-title">
+		<div class="panel-body">
+            {{$html nofilter}}
+		</div>
+		<div class="panel-footer">
+{{if $submit}}
+    {{if $submit|is_string}}
+			<button type="submit" name="{{$addon}}-submit" class="btn btn-primary settings-submit" value="{{$submit}}">{{$submit}}</button>
+    {{else}}
+        {{$count = 1}}
+        {{foreach $submit as $name => $label}}{{if $label}}
+            {{if $count == 1}}
+			<button type="submit" name="{{$name}}" class="btn btn-primary settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{if $count == 2}}
+			<div class="btn-group" role="group" aria-label="...">
+            {{/if}}
+            {{if $count != 1}}
+				<button type="submit" name="{{$name}}" class="btn btn-default settings-submit" value="{{$label}}">{{$label}}</button>
+            {{/if}}
+            {{$count = $count + 1}}
+        {{/if}}{{/foreach}}
+        {{if $submit|count > 1}}
+			</div>
+        {{/if}}
+    {{/if}}
+{{/if}}
+		</div>
+	</div>

view/theme/frio/templates/settings/addons.tpl

@@ -2,17 +2,15 @@
 	{{* include the title template for the settings title *}}
 	{{include file="section_title.tpl" title=$title}}
 
-{{foreach $addon_settings_forms as $addon_settings_form}}
+	<div class="panel-group panel-group-settings" id="settings-addons" role="tablist" aria-multiselectable="true">
-
+{{foreach $addon_settings_forms as $addon => $addon_settings_form}}
-	<form action="settings/addon" method="post" autocomplete="off">
+		<form action="settings/addon/{{$addon}}" method="post" autocomplete="off" class="panel">
 			<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 			{{$addon_settings_form nofilter}}
 		</form>
-
 {{foreachelse}}
-
 		<div class="alert alert-info" role="alert">{{$no_addon_settings_configured}}</div>
-
 {{/foreach}}
+	</div>
 
 </div>

view/theme/frio/templates/settings/connectors.tpl

@@ -1,22 +1,22 @@
 <div class="generic-page-wrapper">
-	<h1>{{$title}}</h1>
+    {{include file="section_title.tpl" title=$title}}
 
 	<p class="connector_statusmsg">{{$diasp_enabled}}</p>
 	<p class="connector_statusmsg">{{$ostat_enabled}}</p>
 
-	<form action="settings/connectors" method="post" autocomplete="off">
+	<div class="panel-group panel-group-settings" id="settings-connectors" role="tablist" aria-multiselectable="true">
+
+		<form action="settings/connectors" method="post" autocomplete="off" class="panel">
 			<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 
-		<div class="panel-group panel-group-settings" id="settings" role="tablist" aria-multiselectable="true">
-			<div class="panel">
 			<div class="section-subtitle-wrapper panel-heading" role="tab" id="content-settings-title">
 				<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
+					<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings-connectors" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
 						{{$general_settings}}
-						</a>
+					</button>
 				</h2>
 			</div>
-				<div id="content-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="content-settings">
+			<div id="content-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="content-settings-title">
 				<div class="panel-body">
 					{{include file="field_checkbox.tpl" field=$accept_only_sharer}}
 
@@ -36,22 +36,26 @@
 					<button type="submit" id="general-submit" name="general-submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 				</div>
 			</div>
-			</div>
+		</form>
-		</div>
-
-		{{$settings_connectors nofilter}}
 
 {{if !$mail_disabled}}
-		<span id="settings_mail_inflated" class="settings-block fakelink" style="display: block;" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
-			<img class="connector" src="images/mail.png" /><h3 class="settings-heading connector">{{$h_imap}}</h3>
-		</span>
-		<div id="settings_mail_expanded" class="settings-block" style="display: none;">
-			<span class="fakelink" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
-				<img class="connector" src="images/mail.png" /><h3 class="settings-heading connector">{{$h_imap}}</h3>
-			</span>
-			<p>{{$imap_desc nofilter}}</p>
 
-			{{include file="field_custom.tpl" field=$imap_lastcheck}}
+		<form action="settings/connectors" method="post" autocomplete="off" class="panel">
+			<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+
+			<div class="section-subtitle-wrapper panel-heading" role="tab" id="mail-settings-title">
+				<h2>
+					<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings-connectors" href="#mail-settings-content" aria-expanded="false" aria-controls="mail-settings-content">
+						<img class="connector" src="images/mail.png" /> {{$h_mail}}
+					</button>
+				</h2>
+			</div>
+			<div id="mail-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="mail-settings-title">
+				<div class="panel-body">
+
+					<p>{{$mail_desc nofilter}}</p>
+
+					{{include file="field_custom.tpl" field=$mail_lastcheck}}
 					{{include file="field_input.tpl" field=$mail_server}}
 					{{include file="field_input.tpl" field=$mail_port}}
 					{{include file="field_select.tpl" field=$mail_ssl}}
@@ -61,12 +65,19 @@
 					{{include file="field_checkbox.tpl" field=$mail_pubmail}}
 					{{include file="field_select.tpl" field=$mail_action}}
 					{{include file="field_input.tpl" field=$mail_movetofolder}}
-
+				</div>
-			<div class="settings-submit-wrapper">
+				<div class="panel-footer">
-				<input type="submit" id="imap-submit" name="imap-submit" class="settings-submit" value="{{$submit}}" />
+					<button type="submit" id="mail-submit" name="mail-submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 				</div>
 			</div>
+		</form>
 {{/if}}
 
+{{foreach $connector_settings_forms as $addon => $connector_settings_form}}
+		<form action="settings/connectors/{{$addon}}" method="post" autocomplete="off" class="panel">
+			<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+	        {{$connector_settings_form nofilter}}
 		</form>
+{{/foreach}}
+	</div>
 </div>

view/theme/frio/templates/settings/display.tpl

@@ -7,9 +7,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="theme-settings-title">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#theme-settings-content" aria-expanded="true" aria-controls="theme-settings-content">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#theme-settings-content" aria-expanded="true" aria-controls="theme-settings-content">
 							{{$d_tset}}
-						</a>
+						</button>
 					</h2>
 				</div>
 
@@ -31,9 +31,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="custom-settings-title">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#custom-settings-content" aria-expanded="false" aria-controls="custom-settings-content">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#custom-settings-content" aria-expanded="false" aria-controls="custom-settings-content">
 							{{$d_ctset}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="custom-settings-content" class="panel-collapse collapse{{if !$theme && !$mobile_theme}} in{{/if}}" role="tabpanel" aria-labelledby="custom-settings">
@@ -50,9 +50,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="content-settings-title">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
 							{{$d_cset}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="content-settings-content" class="panel-collapse collapse{{if !$theme && !$mobile_theme && !$theme_config}} in{{/if}}" role="tabpanel" aria-labelledby="content-settings">
@@ -77,9 +77,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="calendar-settings-title">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#calendar-settings-content" aria-expanded="false" aria-controls="calendar-settings-content">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#calendar-settings-content" aria-expanded="false" aria-controls="calendar-settings-content">
 							{{$calendar_title}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="calendar-settings-content" class="panel-collapse collapse{{if !$theme && !$mobile_theme && !$theme_config}} in{{/if}}" role="tabpanel" aria-labelledby="calendar-settings">

view/theme/frio/templates/settings/features.tpl

@@ -8,9 +8,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="{{$g}}-settings-title">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#{{$g}}-settings-content" aria-expanded="true" aria-controls="{{$g}}-settings-content">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#{{$g}}-settings-content" aria-expanded="true" aria-controls="{{$g}}-settings-content">
 							{{$f.0}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="{{$g}}-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{$g}}-settings-title">

view/theme/frio/templates/settings/profile/index.tpl

@@ -52,9 +52,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="personal">
 					<h2>
-						<a class="accordion-toggle" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#personal-collapse" aria-expanded="true" aria-controls="personal-collapse">
+						<button class="btn-link accordion-toggle" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#personal-collapse" aria-expanded="true" aria-controls="personal-collapse">
 							{{$lbl_personal_section}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				{{* for the $detailed_profile we use bootstraps collapsable panel-groups to have expandable groups *}}
@@ -78,9 +78,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="location">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#location-collapse" aria-expanded="false" aria-controls="location-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#location-collapse" aria-expanded="false" aria-controls="location-collapse">
 							{{$lbl_location_section}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="location-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="location">
@@ -118,9 +118,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="miscellaneous">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#miscellaneous-collapse" aria-expanded="false" aria-controls="miscellaneous-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#miscellaneous-collapse" aria-expanded="false" aria-controls="miscellaneous-collapse">
 							{{$lbl_miscellaneous_section}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="miscellaneous-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="miscellaneous">
@@ -145,9 +145,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="custom-fields">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#custom-fields-collapse" aria-expanded="false" aria-controls="custom-fields-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#custom-fields-collapse" aria-expanded="false" aria-controls="custom-fields-collapse">
 							{{$lbl_custom_fields_section}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="custom-fields-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="custom-fields">

view/theme/frio/templates/settings/settings.tpl

@@ -12,9 +12,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="password-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#password-settings-collapse" aria-expanded="false" aria-controls="password-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#password-settings-collapse" aria-expanded="false" aria-controls="password-settings-collapse">
 							{{$h_pass}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="password-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="password-settings">
@@ -38,9 +38,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="basic-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#basic-settings-collapse" aria-expanded="false" aria-controls="basic-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#basic-settings-collapse" aria-expanded="false" aria-controls="basic-settings-collapse">
 							{{$h_basic}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="basic-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="basic-settings">
@@ -63,9 +63,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="privacy-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#privacy-settings-collapse" aria-expanded="false" aria-controls="privacy-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#privacy-settings-collapse" aria-expanded="false" aria-controls="privacy-settings-collapse">
 							{{$h_prv}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="privacy-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="privacy-settings">
@@ -102,9 +102,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="expire-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#expire-settings-collapse" aria-expanded="false" aria-controls="expire-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#expire-settings-collapse" aria-expanded="false" aria-controls="expire-settings-collapse">
 							{{$expire.label}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="expire-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="expire-settings">
@@ -126,9 +126,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="notification-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#notification-settings-collapse" aria-expanded="false" aria-controls="notification-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#notification-settings-collapse" aria-expanded="false" aria-controls="notification-settings-collapse">
 							{{$h_not}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="notification-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="notification-settings">
@@ -210,9 +210,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="additional-account-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#additional-account-settings-collapse" aria-expanded="false" aria-controls="additional-account-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#additional-account-settings-collapse" aria-expanded="false" aria-controls="additional-account-settings-collapse">
 							{{$h_advn}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="additional-account-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="additional-account-settings">
@@ -231,9 +231,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="importcontact-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#importcontact-settings-collapse" aria-expanded="false" aria-controls="importcontact-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#importcontact-settings-collapse" aria-expanded="false" aria-controls="importcontact-settings-collapse">
 							{{$importcontact}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="importcontact-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="importcontact-settings">
@@ -252,9 +252,9 @@
 			<div class="panel">
 				<div class="section-subtitle-wrapper panel-heading" role="tab" id="relocate-settings">
 					<h2>
-						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#relocate-settings-collapse" aria-expanded="false" aria-controls="relocate-settings-collapse">
+						<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#relocate-settings-collapse" aria-expanded="false" aria-controls="relocate-settings-collapse">
 							{{$relocate}}
-						</a>
+						</button>
 					</h2>
 				</div>
 				<div id="relocate-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="relocate-settings">