From 33983259ea01b07fed68232b888d488ba3bdd8e4 Mon Sep 17 00:00:00 2001 From: Pete Inge Date: Tue, 30 Jan 2024 09:44:55 -0500 Subject: [PATCH] Updates to module --- .../workflows/drupal-tests-and-standards.yml | 12 +++- DEV_README.md | 2 +- README.md | 55 +++++++++++++++++-- assets/src/js/viewsAjaxA11y.js | 45 +++------------ bldrConfig.js | 20 +++---- bluecadet_accessibility.module | 23 +++++--- .../ViewsAjaxResponseSubscriber.php | 3 +- 7 files changed, 95 insertions(+), 65 deletions(-) diff --git a/.github/workflows/drupal-tests-and-standards.yml b/.github/workflows/drupal-tests-and-standards.yml index 41ffdda..aa7333b 100644 --- a/.github/workflows/drupal-tests-and-standards.yml +++ b/.github/workflows/drupal-tests-and-standards.yml @@ -13,7 +13,7 @@ jobs: strategy: fail-fast: false matrix: - drupal-core: ['9.4.x', '9.5.x', '10.0.x', '10.1.x'] + drupal-core: ['9.5.x', '10.0.x', '10.1.x', '10.2.x'] php-version: ['8.0', '8.1', '8.2'] mariadb-version: ['10.4', '10.6'] exclude: @@ -49,6 +49,14 @@ jobs: drupal-core: '10.1.x' php-version: '8.0' mariadb-version: '10.6' + - + drupal-core: '10.2.x' + php-version: '8.0' + mariadb-version: '10.4' + - + drupal-core: '10.2.x' + php-version: '8.0' + mariadb-version: '10.6' container: # See https://github.com/tuutti/docker-images/tree/main/drupal/ci @@ -125,7 +133,7 @@ jobs: # Drush is installed. - name: Install drush working-directory: ${{ env.DRUPAL_ROOT }} - run: composer require "drush/drush ^11.0" + run: composer require "drush/drush:^11|^12" - name: Install PHPCS working-directory: ${{ env.DRUPAL_ROOT }} diff --git a/DEV_README.md b/DEV_README.md index cd8438e..04ad175 100644 --- a/DEV_README.md +++ b/DEV_README.md @@ -9,4 +9,4 @@ `npm run build` - Runs a build of css and js files. `npm run watch` - Watches configured files for changes. `npm run clean` - Deletes all files from dist folders. -`npm run set-version 1.0.0-rc.1` - Sets all the modules to a specific version number and tags the commit. +`npx set-version -v 1.0.0-rc.1 -c` - Sets all the modules to a specific version number and tags the commit. diff --git a/README.md b/README.md index eca54c6..2630ae5 100644 --- a/README.md +++ b/README.md @@ -28,13 +28,58 @@ INSTALLATION CONFIGURATION ------------- -Configuration can be found at: +Configuration can be found on a view under the Display formatter. -## Assumptions abotu our view templates: +## Assumptions about our view templates: -- -- +- Maintain “views” class names, but can add pre-defined or custom class names. +- Assume basic top level template (views-view.html.twig) structure. +- Results should be in an unordered list (the list part is the important part) . Unordered lists help screen reader users navigate from the first item in a list to the end of the list or jump to the next list. It can also help them bypass groups of links if they choose to. ([W3C, H48: Using ol, ul and dl for lists or groups of links](https://www.w3.org/TR/WCAG20-TECHS/H48.html#:~:text=The%20list%20structure%20(%20ul%20%2F%20ol,links%20if%20they%20choose%20to.)) +- There should be a title (can be screen reader only) `

Results

` default is before ul and a child of “view-content” +- Need a header, which is usually an h2, before filters and before results ideally `

Filter Results

` and `

Results

` is visually hidden. +- Buttons and pagers can set a `data-announce-text` attr which will be announced rather than a generic string. +## How to add custom announce text to templates (exposed forms, pager templates). + +### Form elements + +```php + + +OR + + + +``` + +### Pager elements + +```php +... + +{% for key, item in items.pages %} +
  • + + Page  + {{- key -}} + +
    • +{% endfor %} + +... +``` + +## Optional CSS for smooth scrolling + +```CSS +html { + scroll-behavior: smooth; +} +``` MAINTAINERS ----------- @@ -67,5 +112,5 @@ CHANGELOG ## Proudly developed @ Bluecadet

    - Bluecadet + Bluecadet

    diff --git a/assets/src/js/viewsAjaxA11y.js b/assets/src/js/viewsAjaxA11y.js index ccaa030..4b3ce8d 100644 --- a/assets/src/js/viewsAjaxA11y.js +++ b/assets/src/js/viewsAjaxA11y.js @@ -7,44 +7,9 @@ Drupal.behaviors.viewsAjaxA11y = { // eslint-disable-next-line no-unused-vars attach: function(context, settings) { - // $(context).ajaxSuccess(function() { - // // Make Sure we are targeting the correct Ajax response. - // if (arguments[2].data) { - // const searchParams = new URLSearchParams(arguments[2].data); - - // // console.log(searchParams, searchParams.get('view_name')); - // let view_name = searchParams.get('view_name'); - - // if (view_name) { - // // We have a view. - // let view_id_class = 'view-id-' + searchParams.get('view_name'); - // let view_display_id_class = - // 'view-display-id-' + searchParams.get('view_display_id'); - - // let view_selector = - // '.view.' + view_id_class + '.' + view_display_id_class; - - // // Announce Results. - // let results = document.querySelectorAll( - // view_selector + ' .view-content ul li' - // ); - // _internalAnnounce(results.length + ' results loaded.', 'assertive'); - - // // Set focus. First result or no results msg. - // if (results.length > 0) { - // results[0].querySelector('a').focus(); - // } else { - // let no_result_msg = document.querySelectorAll( - // view_selector + ' .view-empty [tabindex="0"]' - // ); - // if (no_result_msg.length > 0) { - // no_result_msg[0].focus(); - // } - // } - // } - // } - // }); + // todo: how do we know these buttons should be under our control? + // Should we add a class to the main view? let btns = context.querySelectorAll(".view form button[type='submit']"); btns.forEach(el => { el.addEventListener( @@ -61,6 +26,8 @@ ); }); + // todo: how do we know these inputs should be under our control? + // Should we add a class to the main view? let inputs = context.querySelectorAll(".view form input[type='submit']"); inputs.forEach(el => { el.addEventListener( @@ -78,6 +45,7 @@ }); // Pagination. + // todo: these queries need to be variablezed, I think. let pages = context.querySelectorAll( '.view .c-pagination li.c-pagination__item a' ); @@ -96,5 +64,6 @@ }); }, }; - // eslint-disable-next-line no-undef + +// eslint-disable-next-line no-undef })(jQuery, Drupal); diff --git a/bldrConfig.js b/bldrConfig.js index 4d25e30..93996ce 100644 --- a/bldrConfig.js +++ b/bldrConfig.js @@ -10,11 +10,11 @@ let js_config = []; let images_config = []; drupal_modules.forEach((val, i) => { - // css_config.push({ - // src: val + 'assets/src/css/**/*.css', - // dest: val + 'assets/dist/css', - // watch: [val + 'assets/src/css/**/*.css'], - // }); + css_config.push({ + src: val + 'assets/src/css/**/*.css', + dest: val + 'assets/dist/css', + watch: [val + 'assets/src/css/**/*.css'], + }); sass_config.push({ src: val + 'assets/src/scss/*.scss', @@ -28,11 +28,11 @@ drupal_modules.forEach((val, i) => { watch: [val + 'assets/src/js/**/*.js'], }); - // images_config.push({ - // src: val + 'assets/src/images/*.{jpg,JPG,jpeg,JPEG,gif,png,svg}', - // dest: val + 'assets/dist/images', - // watch: [val + 'assets/src/images/**/*'], - // }); + images_config.push({ + src: val + 'assets/src/images/*.{jpg,JPG,jpeg,JPEG,gif,png,svg}', + dest: val + 'assets/dist/images', + watch: [val + 'assets/src/images/**/*'], + }); }); module.exports = { diff --git a/bluecadet_accessibility.module b/bluecadet_accessibility.module index 1a07358..51b519d 100644 --- a/bluecadet_accessibility.module +++ b/bluecadet_accessibility.module @@ -20,16 +20,23 @@ use Drupal\views\ViewExecutable; * Add instance dates to view results. */ function bluecadet_accessibility_views_pre_render(ViewExecutable $view) { - + // Grab the current view display. $display = $view->getDisplay(); - // Add library to views with exposed forms. - // if (!empty($view->exposed_widgets)) { - // $view->element['#attached']['library'][] = 'bluecadet_accessibility/views-exposed-forms'; - // } - + // Grab the options set on the view display. $display_extenders_options = $view->display_handler->getOption('display_extenders'); - if (($view->ajaxEnabled() && (isset($display_extenders_options['ajax_ally_option']['enable_ally']) && $display_extenders_options['ajax_ally_option']['enable_ally'] == TRUE)) && empty($view->is_attachment) && empty($view->live_preview)) { - $view->element['#attached']['library'][] = 'bluecadet_accessibility/viewsAjaxA11y'; + if ( + ( + $view->ajaxEnabled() && + ( + isset($display_extenders_options['ajax_ally_option']['enable_ally']) && + $display_extenders_options['ajax_ally_option']['enable_ally'] == TRUE + ) + ) && + empty($view->is_attachment) && empty($view->live_preview) + ) { + + // Attach the library. + $view->element['#attached']['library'][] = 'bluecadet_accessibility/viewsAjaxA11y'; } } diff --git a/src/EventSubscriber/ViewsAjaxResponseSubscriber.php b/src/EventSubscriber/ViewsAjaxResponseSubscriber.php index e1584a9..ce37003 100644 --- a/src/EventSubscriber/ViewsAjaxResponseSubscriber.php +++ b/src/EventSubscriber/ViewsAjaxResponseSubscriber.php @@ -3,9 +3,9 @@ namespace Drupal\bluecadet_accessibility\EventSubscriber; use Drupal\bluecadet_accessibility\Ajax\ViewsAjaxReFocusCommand; -use Drupal\views\Ajax\ViewAjaxResponse; use Drupal\Core\Ajax\AnnounceCommand; use Drupal\Core\Ajax\FocusFirstCommand; +use Drupal\views\Ajax\ViewAjaxResponse; use Symfony\Component\EventDispatcher\EventSubscriberInterface; use Symfony\Component\HttpKernel\Event\FilterResponseEvent; use Symfony\Component\HttpKernel\KernelEvents; @@ -35,6 +35,7 @@ public function onResponse(FilterResponseEvent $event) { // Only act on a Views Ajax Response. if ($response instanceof ViewAjaxResponse) { $view = $response->getView(); + // Assuming typical view classes here. $view_selector = '.view.view-id-' . $view->id() . '.view-display-id-' . $view->current_display; $commands = &$response->getCommands();