Transform route titles into real h1's, for #1651

Use generic visually hidden, page title helper class, established in DS for #1651

Added v-text and changed selector for account page title

apps/files/src/components/FilesAppBar.vue

@@ -8,7 +8,10 @@
         </div>
         <span class="uk-flex uk-flex-middle" v-if="!showBreadcrumb">
           <oc-icon v-if="pageIcon" :name="pageIcon" class="uk-margin-small-right" />
-          <span class="uk-text-lead">{{pageTitle}}</span>
+          <h1 class="oc-page-title" v-text="pageTitle" />
+        </span>
+        <span v-else-if="showBreadcrumb">
+          <h1 class="oc-visually-hidden" v-text="pageTitle" />
         </span>
       </div>
       <div v-if="!publicPage()" class="uk-width-auto uk-visible@m">

src/pages/account.vue

@@ -3,7 +3,7 @@
     <oc-loader v-if="loading" />
     <div v-if="!loading" class="uk-width-3-4@m uk-container uk-padding">
       <div class="uk-flex uk-flex-between uk-flex-middle">
-        <span class="uk-text-lead" v-translate>Account</span>
+        <h1 id="account-page-title" class="oc-page-title" v-translate>Account</h1>
         <oc-button icon="exit_to_app" @click="$_oc_settingsAccount_logout"><translate>Logout</translate></oc-button>
       </div>
       <hr />

tests/acceptance/pageObjects/accountPage.js

@@ -58,8 +58,7 @@ module.exports = {
   },
   elements: {
     accountDisplay: {
-      selector: '//div//span[.="Account"]',
-      locateStrategy: 'xpath'
+      selector: '#account-page-title'
     },
     accountInformationElements: {
       selector: '//div/span[.="Account Information"]/../../div[@class="uk-flex uk-flex-wrap"]/div',