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

marcus-herrmann · 2019-10-04T14:24:57Z

Description

Transformed spans the held the page title to actual h1 elements. In the case of the file list a h1 is existing for accessibility reasons, but can only be perceived via a screen reader (is "visually-hidden").

Related Issue

Fixes Document has no headline level one #1651

Motivation and Context

Screen reader users navigate by large extent by a documents or web apps headline structure. At least one level 1 headline should exist to make the pages (routes) purpose, content or function clear.

How Has This Been Tested?

work in progress

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Technical debt
Tests

Checklist:

Code changes
Unit tests added
Acceptance tests added
Documentation ticket raised:

Open tasks:

Tests

LukasHirt · 2019-10-04T15:43:29Z

src/Phoenix.vue

+    margin: 0;
+  }
+
+  .visually-hidden {


There is actually already in place visually-hidden mixin - https://github.com/owncloud/owncloud-design-system/blob/0db4c32de7fa12a03de7b6aa0d20f09f11aa9ebd/src/styles/_mixins.scss#L56

I see. Will create a utility class for this, using this mixin in the DS, then using mentioned class in phoenix if that's okay.

The corresponding DS PR: owncloud/owncloud-design-system#498
It will establish .oc-visually-hidden which I'll use here.

CLAassistant · 2019-10-04T16:13:45Z

All committers have signed the CLA.

DeepDiver1975 · 2019-10-07T09:09:04Z

src/Phoenix.vue

@@ -57,4 +57,18 @@ export default {
    height: 100vh;
    overflow: hidden;
  }
+
+  .oc-page-title {


this shall also go into the design system from my understanding

DeepDiver1975 · 2019-10-07T09:10:02Z

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 class="uk-text-lead oc-page-title" v-translate>Account</h1>


can we get rid of uk-text-lead here as well? The class oc-page-title shall hold all necessary styles for a page title.

DeepDiver1975 · 2019-10-07T09:10:29Z

And please squash your commits. THX

LukasHirt · 2019-10-07T09:22:27Z

And please squash your commits. THX

Could we get for this the setting in Github that when PR is merged commits are automatically squashed? @DeepDiver1975 @PVince81

marcus-herrmann · 2019-10-07T09:25:51Z

Manually squashed, and moved .oc-page-title to the DS: owncloud/owncloud-design-system#499

DeepDiver1975 · 2019-10-07T09:26:13Z

Could we get for this the setting in Github that when PR is merged commits are automatically squashed?

Manual squashing also forces devs to properly edit their commit messages. The squash button pushes this responsibility to the merger. Which I highly dislike - devs need to submit proper PRs 🤷‍♂️

PVince81 · 2019-10-21T08:43:29Z

@DeepDiver1975 @LukasHirt can you validate this PR ? the requested changes have been addressed

LukasHirt

Update pls ODS so the visually hidden and page-title classes are in place.

marcus-herrmann · 2019-10-22T05:57:47Z

@LukasHirt to whom this is addressed to?

…g users or groups

…ersOrGroups Acceptance test to assert autocompletion isnt present for non-existin…

Acceptance test to create hidden file

Moved few PRs to different sections Removed tests from changelog Removed last tests items Changed wording of ie 11 tests

Adjusted changelog and version to 0.2.5

Add skip to component, id attribute for <main>

…nal-storage Hide quota on external storage

Refactor filesPage page-object for assertion management

Bumps [owncloud-design-system](https://github.com/owncloud/owncloud-design-system) from 1.0.0-1007 to 1.0.0-1030. - [Release notes](https://github.com/owncloud/owncloud-design-system/releases) - [Commits](https://github.com/owncloud/owncloud-design-system/commits) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Add acceptance test to filter files and folders using keyword in the files page

…ud-design-system-1.0.0-1030 Bump owncloud-design-system from 1.0.0-1007 to 1.0.0-1030

…les-list Bugfix/no checkbox label in files list

PVince81 · 2019-12-12T17:06:11Z

@marcus-herrmann please rebase and I think all will already be up to date as the ODS was updated on master already a while ago. Then I think we can merge this. Thanks!

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

…:owncloud/phoenix into feature/headline-level-1-for-every-route

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

…:owncloud/phoenix into feature/headline-level-1-for-every-route

marcus-herrmann · 2019-12-12T17:20:23Z

Rebase went wrong, sorry. To not make it worse by trying to fix it, opening new PR: #2681

ownclouders · 2019-12-12T17:32:01Z

💥 Acceptance tests Account failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7144/

ownclouders · 2019-12-12T17:33:33Z

💥 Acceptance tests Account failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7143/

ownclouders · 2019-12-12T17:36:50Z

💥 Acceptance tests SharingPermissionsUsers failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7143/

ownclouders · 2019-12-12T17:37:11Z

💥 Acceptance tests iPhone failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7144/

ownclouders · 2019-12-12T17:39:03Z

💥 Acceptance tests SharingPermissionsUsers failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7144/

ownclouders · 2019-12-12T17:39:35Z

💥 Acceptance tests iPhone failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7143/

ownclouders · 2019-12-12T17:40:41Z

💥 Acceptance tests Trashbin failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7143/

ownclouders · 2019-12-12T17:43:35Z

💥 Acceptance tests SharingAutocompletion failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7144/

ownclouders · 2019-12-12T17:43:37Z

💥 Acceptance tests Resharing failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7143/

ownclouders · 2019-12-12T17:44:30Z

💥 Acceptance tests SharingAutocompletion failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7143/

ownclouders · 2019-12-12T17:48:22Z

💥 Acceptance tests Trashbin failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7144/

ownclouders · 2019-12-12T17:49:45Z

💥 Acceptance tests Resharing failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/phoenix/7144/

marcus-herrmann added the Status:In-Progress label Oct 4, 2019

marcus-herrmann requested review from DeepDiver1975, individual-it and LukasHirt October 4, 2019 14:24

marcus-herrmann self-assigned this Oct 4, 2019

LukasHirt reviewed Oct 4, 2019

View reviewed changes

marcus-herrmann closed this Oct 4, 2019

marcus-herrmann reopened this Oct 7, 2019

DeepDiver1975 requested changes Oct 7, 2019

View reviewed changes

marcus-herrmann mentioned this pull request Oct 7, 2019

Establishes .oc-page-title class owncloud/owncloud-design-system#499

Merged

marcus-herrmann force-pushed the feature/headline-level-1-for-every-route branch from 81d59f9 to 36d4978 Compare October 7, 2019 09:24

marcus-herrmann force-pushed the feature/headline-level-1-for-every-route branch from 36d4978 to daeef95 Compare October 7, 2019 09:27

LukasHirt requested changes Oct 21, 2019

View reviewed changes

jasson99 and others added 10 commits October 25, 2019 11:00

Add acceptance test to create hidden file

61039ee

Acceptance test to assert autocompletion isnt present for non-existin…

ce94f0f

…g users or groups

Merge pull request #2303 from jasson99/AutocompletionForNonExistingUs…

b6419a8

…ersOrGroups Acceptance test to assert autocompletion isnt present for non-existin…

Merge pull request #2153 from jasson99/create-file

dd459c8

Acceptance test to create hidden file

better waiting for the animations to finish before and after deletion

0015cff

increase UI test timeout on drone

096f5e9

Add skip to component, id attribute for <main>

19f8a28

Adjusted changelog and version to 0.2.5

c5fbed5

Moved few PRs to different sections Removed tests from changelog Removed last tests items Changed wording of ie 11 tests

Merge pull request #2325 from owncloud/release/25102019

65599b9

Adjusted changelog and version to 0.2.5

Merge pull request #2326 from owncloud/feature/skip-links

51fe4a1

Add skip to component, id attribute for <main>

Vincent Petry and others added 10 commits December 10, 2019 15:10

Merge pull request #2652 from owncloud/bugfix/hide-quota-bar-in-exter…

5f58d4d

…nal-storage Hide quota on external storage

Refactor filesPage page-object for assertion management

51cf9c0

Add acceptance test to filter files and folders using keyword

24bd2b9

Merge pull request #2619 from owncloud/assertion-refactor-files-page

3e987ef

Refactor filesPage page-object for assertion management

Merge pull request #2592 from owncloud/filterFilesFoldersUsingKeyword

f0774a1

Add acceptance test to filter files and folders using keyword in the files page

Merge pull request #2675 from owncloud/dependabot/npm_and_yarn/ownclo…

98d0f5f

…ud-design-system-1.0.0-1030 Bump owncloud-design-system from 1.0.0-1007 to 1.0.0-1030

Hide checkbox label in file list

9097738

Use owncloud-design-system 1.0.0-1041

65ee1fb

Merge pull request #2680 from owncloud/bugfix/no-checkbox-label-in-fi…

502aa9e

…les-list Bugfix/no checkbox label in files list

marcus-herrmann added 4 commits December 12, 2019 18:08

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

8114c48

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

Merge branch 'feature/headline-level-1-for-every-route' of github.com…

79ed1ec

…:owncloud/phoenix into feature/headline-level-1-for-every-route

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

77cb36c

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

Merge branch 'feature/headline-level-1-for-every-route' of github.com…

75c7419

…:owncloud/phoenix into feature/headline-level-1-for-every-route

marcus-herrmann closed this Dec 12, 2019

pascalwengerter deleted the feature/headline-level-1-for-every-route branch May 10, 2021 11:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

marcus-herrmann commented Oct 4, 2019 •

edited

Loading

LukasHirt Oct 4, 2019 •

edited

Loading

marcus-herrmann Oct 4, 2019

marcus-herrmann Oct 7, 2019

CLAassistant commented Oct 4, 2019 •

edited

Loading

DeepDiver1975 Oct 7, 2019

DeepDiver1975 Oct 7, 2019

DeepDiver1975 commented Oct 7, 2019

LukasHirt commented Oct 7, 2019 •

edited

Loading

marcus-herrmann commented Oct 7, 2019

DeepDiver1975 commented Oct 7, 2019

PVince81 commented Oct 21, 2019

LukasHirt left a comment •

edited

Loading

marcus-herrmann commented Oct 22, 2019

PVince81 commented Dec 12, 2019

marcus-herrmann commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

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

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

Conversation

marcus-herrmann commented Oct 4, 2019 • edited Loading

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Open tasks:

LukasHirt Oct 4, 2019 • edited Loading

Choose a reason for hiding this comment

marcus-herrmann Oct 4, 2019

Choose a reason for hiding this comment

marcus-herrmann Oct 7, 2019

Choose a reason for hiding this comment

CLAassistant commented Oct 4, 2019 • edited Loading

DeepDiver1975 Oct 7, 2019

Choose a reason for hiding this comment

DeepDiver1975 Oct 7, 2019

Choose a reason for hiding this comment

DeepDiver1975 commented Oct 7, 2019

LukasHirt commented Oct 7, 2019 • edited Loading

marcus-herrmann commented Oct 7, 2019

DeepDiver1975 commented Oct 7, 2019

PVince81 commented Oct 21, 2019

LukasHirt left a comment • edited Loading

Choose a reason for hiding this comment

marcus-herrmann commented Oct 22, 2019

PVince81 commented Dec 12, 2019

marcus-herrmann commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

ownclouders commented Dec 12, 2019

marcus-herrmann commented Oct 4, 2019 •

edited

Loading

LukasHirt Oct 4, 2019 •

edited

Loading

CLAassistant commented Oct 4, 2019 •

edited

Loading

LukasHirt commented Oct 7, 2019 •

edited

Loading

LukasHirt left a comment •

edited

Loading