panopoly_admin uses Javascript to clear out the label on the 'Body' field. However, this means there is now no label for screenreaders to find!

A better way to do this would be to use hook_form_alter() and set '#title_display' => 'invisible' on the field.

Then the field will still be present for screenreaders, but hidden in a standard web browser.

Comments

brandy.brown’s picture

are you sure that screen readers will still read it if it's set to invisible?

dsnopek’s picture

I haven't actually tested it, but that's exactly what '#title_display' => 'invisible' is for!

From the docs (emphasis added):

https://api.drupal.org/api/drupal/developer%21topics%21forms_api_referen...

invisible: #title is rendered as a label element before the form element in the page markup, and is made invisible with the Drupal 7 .element-invisible system CSS class (system.base.css). This makes #title remain available to screen-reader users, but hides it from being displayed visually in the browser.

brandy.brown’s picture

perfect, thanks.

brandy.brown’s picture

StatusFileSize
new1.31 KB

I think this covers it, but would love for others to check it.

brandy.brown’s picture

Title: Hide body label in a more accessible way » Hide field labels in a more accessible way
Status: Active » Needs review
brandy.brown’s picture

StatusFileSize
new1.47 KB

Sorry, missed one of the display nones ... fixed here.

dsnopek’s picture

StatusFileSize
new3.06 KB
new2.99 KB

Thanks for the patch! I tested and everything worked great except for the 'field_featured_categories' bit you added in #6:

+++ b/panopoly_admin.module
@@ -248,6 +248,11 @@ function panopoly_admin_form_alter(&$form, &$form_state, $form_id) {
+  $form['field_featured_categories']['und']['0']['#title_display'] = 'invisible';

This should actually be:

$form['field_featured_categories']['und']['#title_display'] = 'invisible';

Without the ['0'] bit.

So, I fixed that and also made a couple other changes to the patch:

  1. Since we're doing more fields here, I also hide the title field's label using '#title_display' rather than CSS.
  2. This hook_form_alter() is being run for all node edit forms, not just ones that definitely have these fields, so we always need to check if the field exists before changing it. We're already testing for the existance of all these fields, so I just moved the new bits inside the right if() statements.

Anyway, new patch and an interdiff showing my changes is attached! I'd appreciate some testing and review to make sure my changes are actually doing what they should. :-)

dsnopek’s picture

Issue tags: +sprint
mglaman’s picture

Status: Needs review » Reviewed & tested by the community

No regressions, works as expected to proper utilize element-invisible.

dsnopek’s picture

Status: Reviewed & tested by the community » Fixed

Thanks, @mglaman, for testing! And thanks again to @brandy.brown for pushing this forward! Committed. :-)

  • dsnopek committed fff96f1 on 7.x-1.x
    Update Panopoly Admin for Issue #2396241 by brandy.brown, dsnopek: Hide...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

dsnopek’s picture

Hrm, I just realized that this didn't remove the Javascript in panopoly-admin.js which clears out the Body label! So, the Body label is still not accessible. We can fix this over in #2461077: Hiding the Body field label breaks the summary toggle because that's already a follow-up to this issue.

EDIT: Copy & pasted wrong issue number. :-)