Fixed issue WCAG compatible. Finish Article Widget

templaza · Jan 17, 2024 · 0739dab · 0739dab
1 parent 845cb1a
commit 0739dab
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 36 deletions.
diff --git a/assets/vendor/astroid/scss/widgets/_articles.scss b/assets/vendor/astroid/scss/widgets/_articles.scss
@@ -0,0 +1,9 @@
+.astroid-articles {
+  .astroid-article-info {
+    font-size: 0.895rem;
+    opacity: 0.7;
+    dd {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/assets/vendor/astroid/scss/widgets/_widgets.scss b/assets/vendor/astroid/scss/widgets/_widgets.scss
@@ -1,2 +1,3 @@
 @import "grid";
-@import "video_button";
+@import "video_button";
+@import "articles";
diff --git a/framework/elements/articles/articles.php b/framework/elements/articles/articles.php
@@ -16,7 +16,11 @@
 use Astroid\Helper\Style;
 use Astroid\Component\Article;
 use Joomla\CMS\Layout\LayoutHelper;
+use Joomla\CMS\Layout\FileLayout;
 use Joomla\CMS\Factory;
+use Joomla\CMS\Language\Text;
+use Joomla\CMS\Router\Route;
+use Joomla\Component\Content\Site\Helper\RouteHelper;
 
 extract($displayData);
 $catids         = json_decode($params->get('catids', '[]'), true);
@@ -109,23 +113,31 @@
     Style::renderTypography('#'.$element->id.' .astroid-article-introtext', $content_font_style);
 }
 
+$readmore           =   $params->get('enable_readmore', 0);
+$button_style       =   $params->get('button_style', 'primary');
 $button_size        =   $params->get('button_size', '');
 $button_size        =   $button_size ? ' '. $button_size : '';
+$button_outline     =   $params->get('button_outline', 0);
+$button_radius      =   $params->get('button_border_radius', '');
+$button_radius      =   $button_radius ? ' ' . $button_radius : '';
 
-$mainframe = Factory::getApplication();
-$wa = $mainframe->getDocument()->getWebAssetManager();
-$wa->useScript('bootstrap.carousel');
+$has_gallery        =   false;
 echo '<div class="row'.$row_column_cls.'">';
 foreach ($items as $key => $item) {
+    $link           =   RouteHelper::getArticleRoute($item->slug, $item->catid, $item->language);
     $media          =   '';
     switch ($item->post_format) {
         case 'regular':
-            $media      =   '<img class="'. ($media_position == 'bottom' ? 'order-2 ' : '') . ($media_position == 'left' || $media_position == 'right' ? 'object-fit-cover w-100 h-100 ' : '') . ($params->get('card_style', '') == 'none' ? '' : 'card-img-'. $media_position) .'" src="'. $item->image_thumbnail .'" alt="'.$item->title.'">';
+        case 'review':
+            if (!empty($item->image_thumbnail)) {
+                $media      =   '<img class="'. ($media_position == 'bottom' ? 'order-2 ' : '') . ($media_position == 'left' || $media_position == 'right' ? 'object-fit-cover w-100 h-100 ' : '') . ($params->get('card_style', '') == 'none' ? '' : 'card-img-'. $media_position) .'" src="'. $item->image_thumbnail .'" alt="'.$item->title.'">';
+            }
             break;
         case 'gallery':
             $gallery    =   (array) $item->params->get('astroid_article_gallery_items', array());
             if (count($gallery)) {
-                $media  .=  '<div id="astroid-articles-'.$item->id.'" class="carousel slide">';
+                $has_gallery    =   true;
+                $media  =   '<div id="astroid-articles-'.$item->id.'" class="carousel slide carousel-fade" data-bs-ride="carousel">';
                 $media  .=  '<div class="carousel-inner">';
                 $active =   true;
                 foreach ($gallery as $gallery_item) {
@@ -140,13 +152,21 @@
             break;
         case 'video':
             $video_url  =   $item->params->get('astroid_article_video_url', '');
+            $video_type =   $item->params->get('astroid_article_video_type', '');
             $video_src  =   Article::getVideoSrc($video_url);
             if ($video_src) {
-                $media .= '<div class="entry-video ratio ratio-16x9">';
-                $media .= '<iframe src="' . $video_src . '" title="'.$item->title.'" allowfullscreen></iframe>';
-                $media .= '</div>';
+                if ($video_type == 'vimeo') {
+                    $video_src  .=  '?autoplay=1&loop=1&muted=1&autopause=0&title=0&byline=0&portrait=0&controls=0';
+                }
+                $media =    '<div class="entry-video ratio ratio-16x9">';
+                $media .=   '<iframe src="' . $video_src . '" title="'.$item->title.'" allowfullscreen></iframe>';
+                $media .=   '</div>';
             }
             break;
+        case 'audio':
+            $renderer   =   new FileLayout('blog.audio', JPATH_LIBRARIES . '/astroid/framework/frontend');
+            $media      =   $renderer->render(['article' => $item]);
+            break;
     }
     echo '<div id="article-'. $item -> id .'" class="astroid-article-item astroid-grid '.$item->post_format.'"><div class="card' . $card_style . ($enable_grid_match ? ' h-100' : '') . '">';
     if ($media_position == 'left' || $media_position == 'right') {
@@ -175,7 +195,7 @@
         echo '</div>';
     }
     if (!empty($item->title)) {
-        echo '<'.$title_html_element.' class="astroid-article-heading">'. $item->title . '</'.$title_html_element.'>';
+        echo '<'.$title_html_element.' class="astroid-article-heading"><a href="'.Route::_($link).'" title="'. $item->title . '">'. $item->title . '</a></'.$title_html_element.'>';
     }
     if (count($info_after_title)) {
         echo '<div class="astroid-article-info after-title as-gutter-lg">';
@@ -187,13 +207,17 @@
     if (!empty($item->introtext)) {
         echo '<div class="astroid-article-introtext">' . $item->introtext . '</div>';
     }
+
     if (count($info_after_intro)) {
         echo '<div class="astroid-article-info as-gutter-lg">';
         foreach ($info_after_intro as $info_item) {
             echo '<div class="d-inline-block">' . LayoutHelper::render('joomla.content.info_block.' . $info_item['value'], array('item' => $item, 'params' => $item->params)) .'</div>';
         }
         echo '</div>';
     }
+    if ($readmore) {
+        echo '<a id="btn-'.$item->id.'" href="'.Route::_($link).'" class="mt-3 btn btn-' .(intval($button_outline) ? 'outline-' : ''). $button_style . $button_size . $button_radius . '">'.Text::_('JGLOBAL_READ_MORE').'</a>';
+    }
 
     echo '</div>'; // End Card-Body
 
@@ -206,6 +230,11 @@
 }
 echo '</div>';
 
+if ($has_gallery) {
+    $mainframe = Factory::getApplication();
+    $wa = $mainframe->getDocument()->getWebAssetManager();
+    $wa->useScript('bootstrap.carousel');
+}
 if ($params->get('card_size', '') == 'custom') {
     $card_padding   =   $params->get('card_padding', '');
     if (!empty($card_padding)) {

diff --git a/framework/elements/articles/articles.xml b/framework/elements/articles/articles.xml
@@ -243,7 +243,6 @@
                     <option value="create_date">Create Date</option>
                     <option value="modify_date">Modify Date</option>
                     <option value="hits">Hits</option>
-                    <option value="readtime">Read Time</option>
                 </field>
                 <field astroidgroup="info_options" name="info_after_title" type="astroidmultiselect" label="ASTROID_WIDGET_INFO_AFTER_TITLE" default="[]" description="ASTROID_WIDGET_INFO_AFTER_TITLE_DESC" hint="ASTROID_WIDGET_INFO_SELECT">
                     <option value="author">Author</option>
@@ -252,7 +251,6 @@
                     <option value="create_date">Create Date</option>
                     <option value="modify_date">Modify Date</option>
                     <option value="hits">Hits</option>
-                    <option value="readtime">Read Time</option>
                 </field>
                 <field astroidgroup="info_options" name="info_after_intro" type="astroidmultiselect" label="ASTROID_WIDGET_INFO_AFTER_INTRO" default="[]" description="ASTROID_WIDGET_INFO_AFTER_INTRO_DESC" hint="ASTROID_WIDGET_INFO_SELECT">
                     <option value="author">Author</option>
@@ -261,7 +259,6 @@
                     <option value="create_date">Create Date</option>
                     <option value="modify_date">Modify Date</option>
                     <option value="hits">Hits</option>
-                    <option value="readtime">Read Time</option>
                 </field>
                 <field astroidgroup="info_options" ngShow="([info_before_title]!='[]') OR ([info_after_title]!='[]') OR ([info_after_intro]!='[]')" name="info_font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false"/>
                 <field astroidgroup="info_options" ngShow="([info_before_title]!='[]') OR ([info_after_title]!='[]') OR ([info_after_intro]!='[]')" name="info_margin" type="astroidspacing" label="ASTROID_WIDGET_MARGIN_LABEL" description="ASTROID_WIDGET_INFO_MARGIN_LABEL" />
@@ -289,7 +286,7 @@
                     <option value="btn-lg">Large</option>
                     <option value="btn-sm">Small</option>
                 </field>
-                <field astroidgroup="readmore_options" ngShow="[enable_readmore]==1" type="astroidlist" name="border_radius" label="ASTROID_WIDGET_GLOBAL_BORDER_RADIUS_LABEL" default="">
+                <field astroidgroup="readmore_options" ngShow="[enable_readmore]==1" type="astroidlist" name="button_border_radius" label="ASTROID_WIDGET_GLOBAL_BORDER_RADIUS_LABEL" default="">
                     <option value="">Rounded</option>
                     <option value="rounded-0">Square</option>
                     <option value="rounded-pill">Circle</option>

diff --git a/framework/frontend/blog/audio.php b/framework/frontend/blog/audio.php
@@ -18,13 +18,13 @@
 $spotify = $params->get('astroid_article_audio_spotify', '');
 ?>
 <?php if ($source == 'soundcloud' && !empty($soundcloud)) { ?>
-   <div class="mb-3">
+   <div class="soundcloud">
       <?php echo $soundcloud; ?>
    </div>
 <?php }
 ?>
 <?php if ($source == 'spotify' && !empty($spotify)) { ?>
-   <div class="mb-3">
+   <div class="spotify">
       <iframe src="https://embed.spotify.com/?uri=<?php echo $spotify; ?>" width="100%" height="80" style="border:0" allowtransparency="true"></iframe>
    </div>
    <?php

diff --git a/framework/frontend/blog/modules/related.php b/framework/frontend/blog/modules/related.php
@@ -36,19 +36,18 @@
                   </a>
                <?php } ?>
                <div class="card-body">
-                  <?php
-                  if ($display_posttypeicon) {
-                      $document->include('blog.modules.posttype', ['article' => $astroidArticle]);
-                  }
-                  if ($display_badge) {
-                      $document->include('blog.modules.badge', ['article' => $astroidArticle]);
-                  }
-                  ?>
-                  <small class="text-muted"> <?php echo $item->category_title; ?></small>
                   <h3 class="related-article-title">
                      <a href="<?php echo $item->route; ?>"><?php echo $item->title; ?></a>
                   </h3>
                   <?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $item, 'params' => $item->params, 'astroidArticle' => $astroidArticle, 'position' => 'above']); ?>
+                   <?php
+                   if ($display_posttypeicon) {
+                       $document->include('blog.modules.posttype', ['article' => $astroidArticle]);
+                   }
+                   if ($display_badge) {
+                       $document->include('blog.modules.badge', ['article' => $astroidArticle]);
+                   }
+                   ?>
                </div>
             </div>
          </div>

diff --git a/framework/frontend/header/horizontal.php b/framework/frontend/header/horizontal.php
@@ -44,7 +44,7 @@
       <?php if (!empty($header_mobile_menu)) { ?>
          <div class="d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
             <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-               <button aria-label="Mobile Menu Toggle" class="button" type="button"><span class="box"><span class="inner"></span></span></button>
+               <button aria-label="Mobile Menu Toggle" class="button" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
             </div>
          </div>
       <?php } ?>

diff --git a/framework/frontend/header/sidebar.php b/framework/frontend/header/sidebar.php
@@ -54,7 +54,7 @@
             <?php if (!empty($header_mobile_menu)) { ?>
                 <div class="justify-content-start astroid-sidebar-mobile-menu">
                     <div class="header-mobilemenu-trigger burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-                        <button aria-label="Mobile Menu Toggle" class="button" type="button"><span class="box"><span class="inner"></span></span></button>
+                        <button aria-label="Mobile Menu Toggle" class="button" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
                     </div>
                 </div>
             <?php } ?>

diff --git a/framework/frontend/header/stacked.php b/framework/frontend/header/stacked.php
@@ -85,7 +85,7 @@
              <?php if (!empty($header_mobile_menu)) { ?>
                  <div class="w-100 d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
                      <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-                         <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"></span></span></button>
+                         <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
                      </div>
                  </div>
              <?php } ?>
@@ -161,7 +161,7 @@
             <?php if (!empty($header_mobile_menu)) { ?>
                <div class="d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
                   <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-                     <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"></span></span></button>
+                     <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
                   </div>
                </div>
             <?php } ?>
@@ -224,7 +224,7 @@
                <?php if (!empty($header_mobile_menu)) { ?>
                   <div class="d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
                      <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-                        <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"></span></span></button>
+                        <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
                      </div>
                   </div>
                <?php
@@ -271,7 +271,7 @@
             <?php if (!empty($header_mobile_menu)) { ?>
                <div class="d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
                   <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-                     <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"></span></span></button>
+                     <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
                   </div>
                </div>
             <?php
@@ -346,7 +346,7 @@
              <?php if (!empty($header_mobile_menu)) { ?>
                  <div class="d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
                      <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-                         <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"></span></span></button>
+                         <button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
                      </div>
                  </div>
                  <?php

diff --git a/framework/frontend/header/sticky.php b/framework/frontend/header/sticky.php
@@ -58,7 +58,7 @@
       <?php if (!empty($header_mobile_menu)) { ?>
          <div class="d-flex d-<?php echo $header_breakpoint; ?>-none justify-content-start">
             <div class="header-mobilemenu-trigger d-<?php echo $header_breakpoint; ?>-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
-               <button class="button" type="button" aria-label="Mobile Menu Toggle"><span class="box"><span class="inner"></span></span></button>
+               <button class="button" type="button" aria-label="Mobile Menu Toggle"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
             </div>
          </div>
       <?php } ?>

diff --git a/framework/frontend/mobilemenu.php b/framework/frontend/mobilemenu.php
@@ -40,7 +40,7 @@
    <div class="burger-menu-button active">
       <button aria-label="Mobile Menu Toggle" type="button" class="button close-offcanvas offcanvas-close-btn">
          <span class="box">
-            <span class="inner"></span>
+            <span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span>
          </span>
       </button>
    </div>

diff --git a/framework/frontend/offcanvas/close.php b/framework/frontend/offcanvas/close.php
@@ -19,7 +19,7 @@
 <div class="burger-menu-button active">
     <button aria-label="Off-Canvas Toggle" type="button" class="button close-offcanvas offcanvas-close-btn">
         <span class="box">
-            <span class="inner"></span>
+            <span class="inner"><span class="visually-hidden">Off-Canvas Toggle</span></span>
         </span>
     </button>
 </div>
diff --git a/framework/frontend/offcanvas/trigger.php b/framework/frontend/offcanvas/trigger.php
@@ -25,7 +25,7 @@
 <div class="<?php echo implode(' ', $triggerClasses); ?>" data-offcanvas="<?php echo $offcanvas; ?>" data-effect="<?php echo $effect; ?>" data-direction="<?php echo $direction; ?>">
     <button type="button" aria-label="Off-Canvas Toggle" class="button">
         <span class="box">
-            <span class="inner"></span>
+            <span class="inner"><span class="visually-hidden">Off-Canvas Toggle</span></span>
         </span>
     </button>
 </div>