Resolve WCAG2 accessibility errors on main settings page

Can you give an example of checkboxes in tables like this that are done correctly? I'm not actually sure what needs to be done to fix this.

Ahh okay.

This UI is somewhat abstracted so it can support most any entity with a plugin. You'll find it in PanelizerEntityDefault::settings_form which is in plugins/entity

They're using Drupal's core #states mechanism which controls their visibility based upon other checkboxes.

This is a good example:

        $form['entities'][$this->entity_type][$bundle][$view_mode]['default'] = array(
          '#type' => 'checkbox',
          '#default_value' => !empty($settings['default']),
          '#states' => array(
            'visible' => array(
              $bundle_id . '-status' => array('checked' => TRUE),
              $base_id . '-status' => array('checked' => TRUE),
            ),
          ),
        );

adding a note about ui advantages of this process.

@mgifford: Have you had any time to work on this any further?

Followed the example for the label on the permissions page of: Column Name: Row Name.

mgifford had already added the label/row name so I provided the column name....which is hard-coded because the column name is also hard-coded in the table header.

This should complete this ticket as it looks like the hidden checkboxes should be taken care of in #1966990: Forms API drupal_process_states() hidden content is not visible to screen readers.

Given that #1966990: Forms API drupal_process_states() hidden content is not visible to screen readers is for D8 core, and we're not sure it'll be backported, can more improvements go into Panelizer?

Also, I think it'd be better if the string included a placeholder for the label, e.g. 'Panelize: @label', which I believe would work better for translations.

Doh. Let's do this again. Here's another patch.

I'll take a closer look at 1966990 and see what I can do within Panelizer for the hidden checkboxes.

Alright, one step closer. I added a new state called 'show' that toggles the element-invisible class instead of the display:none that 'visible' toggles and changed the affected form elements to use the new 'show' state.

Still to do:
Add labels to the invisible form elements.

Could have sworn I attached the patch....

I've added the labels to the hidden form elements. Needs to be tested on a site that has a bunch of panelizer templates set up to make sure my labels hold out. They should always be labeled: Column name: Entity name, bundle name.

Would it make sense to move the new state into CTools instead?

Also, after applying the patch some of the checkboxes disappear:

This should fix the missing checkbox issue. Class was getting toggled incorrectly.

Let me know if the state needs to be moved to CTools.

@micnap: Could you please open a CTools issue and see how much could be moved over? Thanks.

I've split out the new 'show' state handler into a CTools issue: #2493041: Add 'show' state handler for hiding/showing form fields

This patch contains all of micnap's code, just updated to use the CTools functionality.

Silly testbot, a recurring problem reoccurred: #2490864: Testbot problems - ctools fails to download properly

This appears to work correctly for a regular page load, i.e. there are no more regressions.

I tested the admin/structure/panelizer page using HTML_CodeSniffer on Safari 8.0.6 on OSX 10.10.3.

Without the patch, WCAG2A:

• Errors: 180
• Warnings: 89
• Notices: 355

Without the patch, WCAG2AA:

• Errors: 192
• Warnings: 109
• Notices: 357

Without the patch, WCAG2AAA:

• Errors: 200
• Warnings: 106
• Notices: 358

With the patch, WCAG2A:

• Errors: 0
• Warnings: 89
• Notices: 355

With the patch, WCAG2AA:

• Errors: 12
• Warnings: 155
• Notices: 357

With the patch, WCAG2AAA:

• Errors: 66
• Warnings: 106
• Notices: 358

This is a tremendous improvement!

FYI all of the WCAG2AAA errors were related to the admin theme - the page title uses a H2 instead of H1, and there's a lack of color contrast on the text links.

The relevant warnings, i.e. ones not related to the admin theme, were:

• The tables should contain a summary.
• Select lists should always contain a default value.
• The "for" attribute of a label should not be used to reference a text link; this refers to the "save to access default panel" and "save to access display list" labels that are generated via '#type' => 'item' - if I change the type to 'markup' the text states logic doesn't work.

All of the notices were related to link 'title' values, etc, i.e. very granular details.

Committed! Thank mgifford for getting us started and micnap for great improvements!

FYI I've created another issue to do a general accessibility review of the entire module: #2493099: [meta] Accessibility review of Panelizer

+++ b/plugins/entity/PanelizerEntityDefault.class.php
@@ -3088,6 +3138,9 @@ abstract class PanelizerEntityDefault implements PanelizerEntityInterface {
     }
+    $form['#attached'] = array(
+      'js' => array(ctools_attach_js('states-show')),
+    );
   }

This adds states-show.js, but there is no such file, resulting in the warning:

file_get_contents(sites/all/modules/contrib/ctools/js/states-show.js): failed to open stream: No such file or directory in _locale_parse_js_file() (line 1488 of /home/dev/websites/example.dev/includes/locale.inc).

Edit: I found it here: #2493041: Add 'show' state handler for hiding/showing form fields. Not sure when the ctools stuff gets committed, until then there might be a check of file exists?

Yeah, this is will mean the next release of Panelizer will require v7.x-1.8 or newer.

(the patch will fail because CTools 1.8 isn't out yet)

It would appear that this patch has been committed to current 3.x-dev branch, which is unfortunate as the corresponding ctools change has not been committed.

http://cgit.drupalcode.org/panelizer/commit/?id=1c39a213eda19ecae24a1b08...

This was discovered because OpenAtrium has just released 2.42 based on panelizer-dev but using latest (i.e. 1.7) ctools :(

Yeah, I was hoping that japerry would have committed it by now. I'll ping him to see if he'd mind doing so.

The show.js file was finally added to CTools 1.9.

Committed.