Updates to module

bluecadet · Jan 30, 2024 · 3398325 · 3398325
1 parent 8171a91
commit 3398325
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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) `<h2 class="u-sr-only view-content__header" tabIndex="0">Results</h2>` default is before ul and a child of “view-content”
+- Need a header, which is usually an h2, before filters and before results ideally `<h2 class="u-sr-only view-filters__header">Filter Results</h2>` and `<h2 class="u-sr-only view-content__header">Results</h2>` 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
+<button type="submit" data-announce-text="Searching the site" class="c-search-header__search-submit"{{ attributes }}>
+	Search
+</button>
+
+OR
+
+<button type="submit" data-announce-text="Filter the results" class="c-search-header__search-submit"{{ attributes }}>
+	Filter
+</button>
+
+```
+
+### Pager elements
+
+```php
+...
+
+{% for key, item in items.pages %}
+  <li class="c-pagination__item{{ current == key ? ' is-active' : '' }}">
+    <a href="{{ item.href }}" data-announce-text="Navigating to Page {{ key }}" {{ item.attributes|without('href', 'title') }} {{current == key ? 'aria-current="page"' : null}}>
+      <span class="u-sr-only">Page&nbsp;</span>
+      {{- key -}}
+    </a>
+  </li>
+{% endfor %}
+
+...
+```
+
+## Optional CSS for smooth scrolling
+
+```CSS
+html {
+  scroll-behavior: smooth;
+}
+```
 
 MAINTAINERS
 -----------
@@ -67,5 +112,5 @@ CHANGELOG
 ## Proudly developed @ Bluecadet
 
 <p style="background-color: white; padding: 20px">
-  <a href="https://www.bluecadet.com/"><img style="max-width: 50%; min-width: 300px;" src="https://www.bluecadet.com/wp-content/themes/bluecadet-2018/images/logo/logo-bluecadet-black.svg" alt="Bluecadet"></a>
+  <a href="https://www.bluecadet.com/"><img style="max-width: 50%; min-width: 300px; background: white; padding: 20px;" src="https://www.bluecadet.com/wp-content/themes/bluecadet-2018/images/logo/logo-bluecadet-black.svg" alt="Bluecadet"></a>
 </p>
diff --git 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
@@ -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
@@ -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
@@ -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();