diff --git a/css/wetkit_bootstrap.styles.css b/css/wetkit_bootstrap.styles.css index fd9c5b8..bfc4947 100644 --- a/css/wetkit_bootstrap.styles.css +++ b/css/wetkit_bootstrap.styles.css @@ -339,6 +339,11 @@ ul.pagination > li > a.progress-disabled { height: inherit; } +.composite-form-label { + font-weight: 700; + margin-bottom: 5px; +} + /* ============================================================================= Webform ========================================================================== */ diff --git a/sass/components/system/_system.scss b/sass/components/system/_system.scss index 27b46af..d8fed5a 100644 --- a/sass/components/system/_system.scss +++ b/sass/components/system/_system.scss @@ -36,3 +36,8 @@ ul.pagination >li>a.progress-disabled { #edit-log-wrapper { height: inherit; } + +.composite-form-label { + font-weight: 700; + margin-bottom: 5px; +} \ No newline at end of file diff --git a/templates/system/form/checkbox.func.php b/templates/system/form/checkbox.func.php new file mode 100644 index 0000000..d9759ed --- /dev/null +++ b/templates/system/form/checkbox.func.php @@ -0,0 +1,33 @@ + 'value')); + + // Add aria-labelledby for better accessibility + if (!empty($variables['element']['#parents'])) { + $element['#attributes']['aria-labelledby'] = "edit-" . strtr(implode('-', $variables['element']['#parents']), '_', '-') . "-label " . $element['#attributes']['id'] . "-label"; + } + // Unchecked checkbox has #value of integer 0. + if (!empty($element['#checked'])) { + $element['#attributes']['checked'] = 'checked'; + } + _form_set_class($element, array('form-checkbox')); + + return ''; +} \ No newline at end of file diff --git a/templates/system/form/form-element-label.func.php b/templates/system/form/form-element-label.func.php index 4cce5b0..a3b1059 100644 --- a/templates/system/form/form-element-label.func.php +++ b/templates/system/form/form-element-label.func.php @@ -88,6 +88,25 @@ function wetkit_bootstrap_form_element_label(&$variables) { $output .= $title; } + // Accessibility fix + // See: https://www.drupal.org/node/2279111 + // and https://www.drupal.org/node/504962 + // - Removes 'for' attribute from known drupal-specific un-labelable elements. + // - Transform the group label into a div element. + // - Adds IDs to labels for aria-labelledby usage. + $label_type = 'label'; + if (!empty($element['#id'])) { + if ($type == 'radios' || $type == 'checkboxes' || $type == 'date') { + // label this element as a composite form + $variables['#composite'] = TRUE; + $label_type = 'div'; + $attributes['class'][] = 'composite-form-label'; + unset($attributes['for']); + } + // labelable element: add an id to allow the use of aria-labelledby + $attributes['id'] = $element['#id'] . '-label'; + } + // The leading whitespace helps visually separate fields from inline labels. - return ' ' . $output . "\n"; + return " <$label_type" . drupal_attributes($attributes) . '>' . $output . "\n"; } diff --git a/templates/system/form/radio.func.php b/templates/system/form/radio.func.php new file mode 100644 index 0000000..7ed11be --- /dev/null +++ b/templates/system/form/radio.func.php @@ -0,0 +1,37 @@ + 'value')); + +// Add aria-labelledby for better accessibility + if (!empty($variables['element']['#parents'])) { + $element['#attributes']['aria-labelledby'] = "edit-" . strtr(implode('-', $variables['element']['#parents']), '_', '-') . "-label " . $element['#attributes']['id'] . "-label"; + } + + if (isset($element['#return_value']) && $element['#value'] !== FALSE && $element['#value'] == $element['#return_value']) { + $element['#attributes']['checked'] = 'checked'; + } + _form_set_class($element, array('form-radio')); + + return ''; +} \ No newline at end of file