diff --git a/claro.libraries.yml b/claro.libraries.yml index ec47509..cbcbe27 100644 --- a/claro.libraries.yml +++ b/claro.libraries.yml @@ -51,16 +51,15 @@ global-styling: - system/admin - core/jquery - core/drupal - # Claro provides small and extra small variation for most of the control - # elements like inputs, action links, buttons, dropbuttons. - # For usability and accessibility reasons, we keep target sizes big enough - # on touch screen devices (and not making these elements smaller than - # their default size). + # Claro has small and extra small variation for most of the control elements + # such as inputs, action links, buttons, dropbuttons. For usability and + # accessibility reasons, we keep target sizes big enough on touch screen + # devices (by not making these elements smaller than their default size). # Modernizr is used for recognising whether user is using a touch device or # not. This allows conditionally rendering small variation of the control - # elements on non-touch devices. - # Since for some cases it seems to be impossible to attach Modernizr - # conditionally, we have to simply depend on it. + # elements on non-touch devices. In some cases, such as when rendering + # links, it is hard recognize when Modernizr should be attached, therefore + # it has to be always attached. - core/modernizr # @todo Remove 'claro/drupal-theme' from dependencies and add to core/drupal # extensions after https://www.drupal.org/node/3024975 is in. diff --git a/claro.theme b/claro.theme index 462167f..8e09370 100644 --- a/claro.theme +++ b/claro.theme @@ -260,8 +260,6 @@ function claro_element_info_alter(&$type) { * Prerender callback for managed_file. */ function _claro_managed_file_prerender($element) { - $single_file_widget = !empty($element['#cardinality']) && $element['#cardinality'] === 1; - if (!empty($element['remove_button']) && is_array($element['remove_button'])) { $element['remove_button']['#attributes']['class'][] = 'button--extrasmall'; $element['remove_button']['#attributes']['class'][] = 'remove-button'; @@ -272,6 +270,7 @@ function _claro_managed_file_prerender($element) { } // Wrap single-cardinality widgets with a details element. + $single_file_widget = !empty($element['#cardinality']) && $element['#cardinality'] === 1; if ($single_file_widget && empty($element['#single_wrapped'])) { $element['#theme_wrappers']['details'] = [ '#title' => $element['#title'], @@ -295,10 +294,10 @@ function _claro_managed_file_prerender($element) { $element['#title'] = t('Add a new file'); } else { - // If we have a value, we don't have the file upload input visible. - // The wrapper details will have the same title as the managed file - // widget. We don't want to display it twice, but we need it for - // accessibility reasons. + // If the field has a value, the file upload title doesn't have to be + // visible because the wrapper element will have the same title as the + // managed file widget. The title is kept in the markup as visually + // hidden for accessibility. $element['#title_display'] = 'invisible'; } } @@ -494,18 +493,16 @@ function claro_preprocess_details(&$variables) { } if (!empty($element['#theme']) && $element['#theme'] === 'file_widget_multiple') { - // Mark the details required if needed. - // If the file widget is multiple, the required state could be checked only - // by checking the $element's first children's state. - // If the widget is single, we will have the proper required state in - // $element['#required']. + // Mark the details required if needed. If the file widget allows uploading + // multiple files, the required state is checked by checking the state of + // the first child. $variables['required'] = isset($element[0]['#required']) ? $element[0]['#required'] : !empty($element['#required']); // If the error is the same as the one in the multiple field widget element, - // we have to avoid displaying it twice. - // Seven and even Stark do have this issue. + // we have to avoid displaying it twice. Seven and Stark have this issue + // as well. // @todo revisit when https://www.drupal.org/node/3084906 is fixed. if (isset($element['#errors']) && isset($variables['errors']) && $element['#errors'] === $variables['errors']) { unset($variables['errors']); diff --git a/templates/content-edit/file-widget-multiple.html.twig b/templates/content-edit/file-widget-multiple.html.twig index aa8dc81..606d983 100644 --- a/templates/content-edit/file-widget-multiple.html.twig +++ b/templates/content-edit/file-widget-multiple.html.twig @@ -1,7 +1,7 @@ {# /** * @file - * Theme override to display a multi file form widget. + * Theme override to display a multiple file upload form widget. * * Available variables: * - table: Table of previously uploaded files. diff --git a/templates/field/file-link.html.twig b/templates/field/file-link.html.twig index e962ec0..891c7a1 100644 --- a/templates/field/file-link.html.twig +++ b/templates/field/file-link.html.twig @@ -15,4 +15,4 @@ */ #} {{ attach_library('classy/file') }} -{{ link }} ({{ file_size}}) +{{ link }} ({{ file_size }})