[META] Assess Claro's conformance with WCAG Text spacing, Text resize, and Reflow.

@andrewmacpherson: I did the initial testing for "Targets for Beta stage (should-haves)" with the text spacing bookmarklet applied and a 2em bottom margin. Here's my findings:

1. Styleguide with text spacing applied and 2em bottom margin:
Online screenshot: https://monosnap.com/direct/Ahss7g34O2PH8eStN3Dq9cPzdzWvyu
Attached screenshot: styleguide-text-spacing-10102019.png

CSS added to page:

table,
.pager ul,
.breadcrumb ol,
.progress,
code {
	margin-bottom: 2em;
}

p,
.item-list ul,
.item-list ol,
.item-list dl,
ul.links,
ul.inline,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block-end: 2em;
}

2. Forms without errors
Online screenshot: https://monosnap.com/direct/tULfuCiNHI1WbN1QzEgDYyr6JRsTdp
Attached screenshot: errorfields-witherrors-text-spacing-10102019.png

3. Forms with errors
Online screenshot: https://monosnap.com/direct/vrgmaSEGShSvA3a9Z8E4ex0kt4pLnX
Attached screenshot: errorfields-withouterrors-text-spacing-10102019.png

CSS added to page:

.form-item {
	margin-bottom: 2em;
}

Test env:

1. Drupal 8.9.x [0fe72eb470]
2. Custom package in composer.json:
   

   {
       "type": "package",
       "package": {
           "name": "dmsmidt/errorstyle",
           "version": "0.1.0",
           "type": "drupal-module",
           "dist": {
               "url": "https://github.com/dmsmidt/errorstyle/archive/8354901446cbd473eadc82c9d6426d649998c32a.zip",
               "type": "zip"
           }
       }
   }
   

3. Drupal installed with Standard install profile
4. drush en errorstyle styleguide -y
5. drush [th]en claro -y
6. Frontend theme for Style Guide: drush config-set system.theme default claro
7. Admin theme for Error styles: drush config-set system.theme admin claro

I've updated the bookmarklet, it can be found here (repo). Changes:

1. li, h1, h2, h3, h4, h5, h6 also get the 2em bottom margin (as described)
2. Div with these classes also gets the 2em bottom margin

Scenarios runned (default state shots prefixed with 00):

1. 01: 200% browser zoom with bookmarklet; toolbar collapsed
2. 04: 960px canvas width; toolbar collapsed
3. 05: 300% browser zoom with 960 (CSS)px canvas width; toolbar collapsed

Missing scenarios (these should be specified first):
* 02: Viewport width somewhere in the middle of the portrait tablet breakpoint range
* 03: Viewport width in the mobile breakpoint range.
* All the test scenarios [1, 2, 3, 4, 5] with (vertical) toolbar.

Updated bookmarklet:
* Source code.
* GH page.

I forgot to add the partial resources.

Re #12:

First of all, thanks for highlighting the missing license! I just fixed that :)

I don't see vertical tabs on any screen shot.

Vertical tabs is there. This is that:

Actually, we are using a really big media breakpoint for displaying the real vertical tabs, that's why you cannot find the expected UI neither on the 1280(CSS)px wide screenshots I've made.

Which version of Claro was used?

The one that was merged into Drupal core 8.9.x [commit: 0fe72eb470].

Others:

I just noticed that the end of every screenshot is messed up. (No idea why, they look fine in Firefox browser.)
I think that I'll re-generate these screenshots manually tomorrow (I'm in CEST right now).

The ones I shared in #10 were taken in Firefox, with the built-in Firefox dialog.
In Chrome, I was unable to take page captures with lower or higher page zoom than 100%.

Steps to reproduce my test instance:

1. Get Drupal core codebase with commit hash 56f670c861 (8.9x):
   git clone --branch 8.9.x https://git.drupalcode.org/project/drupal.git
2. Add my errostyle fork [1]: composer config repositories.'zolhorvath/errorstyle' github https://github.com/zolhorvath/errorstyle.git
3. Require Style Guide and the Error Style modules: composer require drupal/styleguide zolhorvath/errorstyle This will trigger the installation of other required extensions as well.
4. drush si standard -y
5. drush en errorstyle styleguide -y
6. drush [th]en claro -y
7. drush cset system.themes default claro -y

Scenarios I've runned (on Chrome):

1. 1400px browser canvas width, zoom 200%, with bookmarket changes
2. 800px browser canvas width, default zoom, no bookmarket
3. 360px browser canvas width, default zoom, no bookmarket
4. 960px browser canvas width, default zoom, no bookmarket
5. 960px browser canvas width, zoom 300%, with bookmarket changes

Since the vertical toolbar is fixed for cases #3 and #5, I skipped these for the 'with-toolbar-vertical' screenshots.

The shots prefixed with 0 represent the default state, with 1400px browser canvas size.

Things I noticed during the test:

1. Inline lists are overflowing from the available space
2. On the Error style testform, the year input of Datelist also overflows with 700(CSS)px canvas width, with vertical toolbar.

[1]

I've three commits in my fork on the top of the referenced module:

• Add composer.json
• Fix coding standard
• Add config option for testing inputs with the front-end theme

@andrewmacpherson and @huzooka: Looks like you guys are on a roll. Let me know if you need any testing after you've finished everything.

-Kat

Should we postpone this until the designs and implementations of the "special" pages are ready? Because this is currently blocked on the design and implementation of the updated page designs.

As note of those who weren't involved: In Claro's development we first focused on the components rather than redesigning the pages. Some of the pages already are ready because they only consist of the already finished components or were curical that Claro can be added to Core. Some of the pages aren't out of the components we already finished and additionally they define special layout or components like the status report page, therefore this needs to be designed and implemented (which is in the process right now and a stable blocker).

I've done additional testing for the "Special Pages" with the text spacing bookmarklet applied, a browser screen set to a 1400px width, and a 2em bottom margin using the following code:

p,
card,
.item-list ul,
.item-list ol,
.item-list dl,
ul.links,
ul.inline,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-end: 2em;
}

table,
.pager ul,
.breadcrumb ol,
.progress,
code,
.form-item {
  margin-bottom: 2em;
}

My findings can be found in the attached zip file containing 16 before/after screenshots. I noticed that the arrows in the dropdown menus don't adjust properly when the text spacing is applied. You can see this in the Blocks, Image Style, and Views. The Edit Views page is also very scrunched up, but I believe that would be handled by the crew maintaining the Views module. I plan on working on the Scenarios pages next.

I'm adding child issues to this issue, and will continue to update this comment with the specifics as the issues are created.

Must haves:

• None added yet

Should haves:

• #3164806: Purpose of filters fieldset on admin pages is unclear when zoomed in, and for cognitive accessibility
• #3164587: Text resize on wide screen layout also causes reflow to single column, making the layout too wide

Could haves:

• #3164800: Accordions on content form are difficult to understand when using system or browser zoom preferences

Updated description with new link to Form Style module and marked this as a meta issue, since it will be used for ongoing tracking of related accessibility issues.

Posted comment in wrong issue. This can be deleted. Sorry.

As per Comment #25, I am moving this issue back to active as it is now a meta issue for tracking related accessibility issues.

Adding @rainbreaw's child issues to the summary for wider visibility.

Tagging Easy Out of the Box

I believe this issue should be considered as done. Marking as RTBC for visibility.

This has received significant testing by @katannshaw in #8 and #21, @huzooka in #9, #10, and #14, as well as @rainbreaw in #23. Issues have been filed for the bugs that have been discovered.