diff --git a/claro.libraries.yml b/claro.libraries.yml index 5ca7adb..a6814b0 100644 --- a/claro.libraries.yml +++ b/claro.libraries.yml @@ -51,9 +51,15 @@ global-styling: - system/admin - core/jquery - core/drupal - # Since we have small and extra small form elements, action links, buttons - # and we want to keep our touch target sizes big enought, we need - # Modernizr. + # 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). + # We use Modernizr for recognizing that the current device is a touch + # screen device or not. + # Since for some cases it seems to be impossible to attach Modernizr + # conditionally, we have to simply depend on it. - 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 9c3ff2f..04d3d27 100644 --- a/claro.theme +++ b/claro.theme @@ -273,7 +273,7 @@ function _claro_managed_file_prerender($element) { $element['upload_button']['#attributes']['class'][] = 'upload-button'; } - // We need to display even single-cardinality widgets wrapped in a details. + // Wrap single-cardinality widgets with a details element. if ($single_file_widget && empty($element['#single_wrapped'])) { $upload_is_accessible = empty($element['#default_value']['fids']) && (!isset($element['upload']['#access']) || $element['upload']['#access'] !== FALSE); @@ -290,12 +290,19 @@ function _claro_managed_file_prerender($element) { $element['#single_wrapped'] = TRUE; if ($upload_is_accessible) { - // Change widget title. + // Change widget title. This is the same title that is used by the + // multiple file widget. // @see https://git.drupalcode.org/project/drupal/blob/ade7b950a1/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php#L192 $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. $element['#title_display'] = 'invisible'; + // We remove the description of the managed file widget – this will be + // displayed by the wrapper details. $element['#description'] = NULL; } } @@ -1254,11 +1261,7 @@ function claro_preprocess_file_widget_multiple(&$variables) { if (is_array($last_cell['data'])) { foreach ($last_cell['data'] as $last_cell_item) { - if ( - isset($last_cell_item['#attributes']['class']) && - is_array($last_cell_item['#attributes']['class']) && - in_array('remove-button', $last_cell_item['#attributes']['class']) - ) { + if (isset($last_cell_item['#attributes']['class']) && is_array($last_cell_item['#attributes']['class']) && in_array('remove-button', $last_cell_item['#attributes']['class'])) { $variables['table']['#rows'][$row_key]['data'][$last_cell_key] += ['class' => []]; $variables['table']['#rows'][$row_key]['data'][$last_cell_key]['class'][] = 'file-operations-cell'; break 1;