Improve accessibility compliance for links, form labels, and headings

.github/workflows/ci.yml

@@ -0,0 +1,90 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  quality:
+    name: Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: "8.1"
+          tools: composer:v2
+
+      - name: Validate Composer files
+        working-directory: src
+        run: composer validate --no-check-publish
+
+      - name: Lint PHP
+        run: git ls-files -z '*.php' | xargs -0 -n1 php -l
+
+      - name: Validate Docker Compose configuration
+        run: docker compose config --quiet
+
+  php-syntax:
+    name: PHP ${{ matrix.php }} syntax
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        php: ["7.4", "8.1"]
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php }}
+
+      - name: Lint PHP
+        run: git ls-files -z '*.php' | xargs -0 -n1 php -l
+
+  wordpress-tests:
+    name: WordPress ${{ matrix.wordpress }} tests
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        wordpress: ["6.7", "latest"]
+    services:
+      mariadb:
+        image: mariadb:10.11
+        env:
+          MYSQL_DATABASE: wordpress_test
+          MYSQL_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: >-
+          --health-cmd="healthcheck.sh --connect --innodb_initialized"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=5
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: "8.1"
+          extensions: mysqli
+          tools: composer:v2, phpunit:9.6
+
+      - name: Install Composer dependencies
+        working-directory: src
+        run: composer install --no-interaction --no-progress --prefer-dist
+
+      - name: Install WordPress test library
+        working-directory: src
+        run: bash tests/install-wp-tests.sh wordpress_test root root 127.0.0.1 ${{ matrix.wordpress }} true
+
+      - name: Run tests
+        working-directory: src
+        run: phpunit

src/assets/css/simply-rets-client.css

@@ -36,6 +36,24 @@ sizes with this class.
 ```
 
 */
+/*
+Accessibility: Text meant only for screen readers.
+Matches the standard WordPress screen-reader-text class.
+*/
+.screen-reader-text {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+}
+
 .sr-listing {
     position: relative;
     display: block;
@@ -187,6 +205,8 @@ div#sr-contact-form-error {
     background-color: #eee;
 }
 
+.sr-primary-data h2,
+.sr-primary-data h3,
 .sr-primary-data h4 {
     padding-left: 15px;
     margin-top: 10px !important;
@@ -615,6 +635,7 @@ Most of these elements also have id's for you to use specifically.
     clear: both;
 }
 
+#sr-search-wrapper h2,
 #sr-search-wrapper h3 {
     margin-top: 0px;
 }
@@ -938,6 +959,8 @@ elsewhere, this should be a breeze.
         clear: both;
     }
 
+    .sr-primary-data h2,
+    .sr-primary-data h3,
     .sr-primary-data h4 {
         padding-right: 15px;
     }

src/assets/js/simply-rets-client.js

@@ -133,6 +133,18 @@ var normalizeListingPhotoUrl = function (url) {
     }
 }
 
+var escapeHtml = function (value) {
+    return String(value).replace(/[&<>"']/g, function (character) {
+        return {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        }[character];
+    });
+}
+
 
 var genMarkerPopup = function (
     listing,
@@ -155,7 +167,7 @@ var genMarkerPopup = function (
     var sqft = listing.property.area || "n/a";
     var mlnum = listing.listingId || "n/a";
     var price = listing.listPrice || "Unknown";
-    var addr = listing.address.full || "Unknown";
+    var addr = escapeHtml(listing.address.full || "Unknown");
     var photo = listing.photos.length > 1
         ? normalizeListingPhotoUrl(listing.photos[0])
         : 'https://s3-us-west-2.amazonaws.com/simplyrets/trial/properties/defprop.jpg';
@@ -194,7 +206,7 @@ var genMarkerPopup = function (
         '  </div>' +
         '  <hr>' +
         '  <div class="sr-iw-inner__view-details">' +
-        '    <a class="sr-iw-inner__details-link" href="' + link + '">View Details</a>' +
+        '    <a class="sr-iw-inner__details-link" href="' + link + '" aria-label="View details for ' + addr + '">View Details<span class="screen-reader-text"> for ' + addr + '</span></a>' +
         '  </div>' +
         '</div>';
 

src/simply-rets-maps.php

@@ -164,8 +164,9 @@ public static function infoWindowMarkup(
             <div class="sr-iw-inner__view-details">
                 <a
                     href="<?php echo esc_url($link); ?>"
-                    class='sr-iw-inner__details-link'>
-                    View Details
+                    class='sr-iw-inner__details-link'
+                    aria-label="<?php echo esc_attr('View details for ' . $address); ?>">
+                    View Details<span class="screen-reader-text"> <?php echo esc_html('for ' . $address); ?></span>
                 </a>
             </div>
         </div>

src/simply-rets-openhouses.php

@@ -105,6 +105,18 @@ public static function openHousesSearchResults($search_response, $settings) {
             return SrMessages::noResultsMsg($res);
         } else {
 
+            $results_heading_raw = apply_filters('simplyrets_results_heading_tag', 'h2');
+            $results_heading = tag_escape($results_heading_raw);
+            if (empty($results_heading)) {
+                $results_heading = 'h2';
+            }
+            $show_results_heading = apply_filters('simplyrets_show_results_heading', false);
+            $results_heading_text = apply_filters('simplyrets_openhouses_heading_text', 'Open Houses');
+
+            if ($show_results_heading && !empty($res)) {
+                $markup .= "<{$results_heading} class='sr-listings-heading screen-reader-text'>" . esc_html($results_heading_text) . "</{$results_heading}>";
+            }
+
             // Generate markup for each open house result
             foreach ($res as $idx => $oh) {
                 $markup .= SimplyRetsOpenHouses::openHouseSearchResultMarkup(
@@ -191,6 +203,12 @@ public static function openHouseSearchResultMarkup($openhouse, $settings) {
 
         $sqft = !empty($living_area) ? "<strong>SqFt: </strong>{$living_area} sqft<br/>" : "";
 
+        $listing_heading_raw = apply_filters('simplyrets_listing_heading_tag', 'h4');
+        $listing_heading = tag_escape($listing_heading_raw);
+        if (empty($listing_heading)) {
+            $listing_heading = 'h4';
+        }
+
         ob_start();
 ?>
         <hr>
@@ -207,12 +225,12 @@ class="sr-photo"
             <div class="sr-listing-data-wrapper">
                 <div class="sr-primary-data">
                     <a href="<?php echo esc_url($details_link); ?>">
-                        <h4>
+                        <<?php echo $listing_heading; ?> class="sr-listing-address">
                             <?php echo esc_html($full_address); ?>
                             <small class="sr-price">
                                 <i> - <?php echo esc_html($list_price_fmtd); ?></i>
                             </small>
-                        </h4>
+                        </<?php echo $listing_heading; ?>>
                     </a>
                 </div>
                 <div class="sr-secondary-data">
@@ -231,7 +249,7 @@ class="sr-photo"
             <div class="more-details-wrapper">
                 <span style="visibility:hidden">clearfix</span>
                 <span class="more-details-link" style="float:right">
-                    <a href="<?php echo esc_url($details_link); ?>">More details</a>
+                    <a href="<?php echo esc_url($details_link); ?>" aria-label="<?php echo esc_attr('More details for ' . $full_address); ?>">More details<span class="screen-reader-text"> <?php echo esc_html('for ' . $full_address); ?></span></a>
                 </span>
                 <span class="result-compliance-markup">
                     <?php echo wp_kses_post($compliance_markup); ?>