Merge pull request #11952 from craftcms/feature/dev-954-feed-recent-e…

…ntries-and-drafts-should Use list elements for Feed, Recent Entries, and Drafts widgets
craftcms · Oct 3, 2022 · e0109bc · e0109bc
2 parents 5ad2a33 + 61ff0bb
commit e0109bc
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 34 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -79,7 +79,7 @@
 - Added `Craft.BaseElementIndex::getSourceLevel()`.
 
 ### Changed
-- Improved the control panel accessibility. ([#10546](https://github.com/craftcms/cms/pull/10546), [#11534](https://github.com/craftcms/cms/pull/11534), [#11565](https://github.com/craftcms/cms/pull/11565), [#11578](https://github.com/craftcms/cms/pull/11578), [#11589](https://github.com/craftcms/cms/pull/11589), [#11604](https://github.com/craftcms/cms/pull/11604), [#11610](https://github.com/craftcms/cms/pull/11610), [#11611](https://github.com/craftcms/cms/pull/11611), [#11613](https://github.com/craftcms/cms/pull/11613), [#11636](https://github.com/craftcms/cms/pull/11636), [#11662](https://github.com/craftcms/cms/pull/11662)[#11703](https://github.com/craftcms/cms/pull/11703), [#11727](https://github.com/craftcms/cms/pull/11727), [#11763](https://github.com/craftcms/cms/pull/11763), [#11768](https://github.com/craftcms/cms/pull/11768), [#11775](https://github.com/craftcms/cms/pull/11775), [#11844](https://github.com/craftcms/cms/pull/11844), [#11905](https://github.com/craftcms/cms/pull/11905), [#11906](https://github.com/craftcms/cms/pull/11906), [#11911](https://github.com/craftcms/cms/pull/11911), [#11915](https://github.com/craftcms/cms/pull/11915), [#11926](https://github.com/craftcms/cms/discussions/11926), [#11942](https://github.com/craftcms/cms/pull/11942), [#11945](https://github.com/craftcms/cms/pull/11945))
+- Improved the control panel accessibility. ([#10546](https://github.com/craftcms/cms/pull/10546), [#11534](https://github.com/craftcms/cms/pull/11534), [#11565](https://github.com/craftcms/cms/pull/11565), [#11578](https://github.com/craftcms/cms/pull/11578), [#11589](https://github.com/craftcms/cms/pull/11589), [#11604](https://github.com/craftcms/cms/pull/11604), [#11610](https://github.com/craftcms/cms/pull/11610), [#11611](https://github.com/craftcms/cms/pull/11611), [#11613](https://github.com/craftcms/cms/pull/11613), [#11636](https://github.com/craftcms/cms/pull/11636), [#11662](https://github.com/craftcms/cms/pull/11662)[#11703](https://github.com/craftcms/cms/pull/11703), [#11727](https://github.com/craftcms/cms/pull/11727), [#11763](https://github.com/craftcms/cms/pull/11763), [#11768](https://github.com/craftcms/cms/pull/11768), [#11775](https://github.com/craftcms/cms/pull/11775), [#11844](https://github.com/craftcms/cms/pull/11844), [#11905](https://github.com/craftcms/cms/pull/11905), [#11906](https://github.com/craftcms/cms/pull/11906), [#11911](https://github.com/craftcms/cms/pull/11911), [#11915](https://github.com/craftcms/cms/pull/11915), [#11926](https://github.com/craftcms/cms/discussions/11926), [#11942](https://github.com/craftcms/cms/pull/11942), [#11945](https://github.com/craftcms/cms/pull/11945), [#11952](https://github.com/craftcms/cms/pull/11952))
 - Element indexes now respect field layouts’ user conditions when determining which custom field columns to show. ([#11913](https://github.com/craftcms/cms/pull/11913))  
 - Element index footers now stick to the bottom of the window, and element action triggers are now inserted into the footer rather than replacing the contents of the page’s toolbar. ([#11844](https://github.com/craftcms/cms/pull/11844))
 - Notifications are now shown after executing folder actions on the Assets index page. ([#11906/](https://github.com/craftcms/cms/pull/11906))

diff --git a/src/templates/_components/widgets/Feed/body.twig b/src/templates/_components/widgets/Feed/body.twig
@@ -1,24 +1,22 @@
 {% import "_includes/links" as links %}
 
-<table class="fullwidth" dir="{{ feed.direction }}">
+<ol class="widget__list" role="list" dir="{{ feed.direction }}">
     {% for item in feed.items %}
-        <tr>
-            <td>
-                {% if item.permalink ?? false %}
-                    {{ links.externalLink({
-                        link: item.permalink,
-                        text: item.title,
+        <li class="widget__list-item">
+            {% if item.permalink ?? false %}
+                {{ links.externalLink({
+                    link: item.permalink,
+                    text: item.title,
+                }) }}
+                {% if item.date ?? false %}
+                    {{ tag('span', {
+                        class: 'light nowrap',
+                        text: item.date|timestamp('short'),
                     }) }}
-                    {% if item.date ?? false %}
-                        {{ tag('span', {
-                            class: 'light nowrap',
-                            text: item.date|timestamp('short'),
-                        }) }}
-                    {% endif %}
-                {% else %}
-                    &nbsp;
                 {% endif %}
-            </td>
-        </tr>
+            {% else %}
+                &nbsp;
+            {% endif %}
+        </li>
     {% endfor %}
-</table>
+</ol>
diff --git a/src/templates/_components/widgets/RecentEntries/body.twig b/src/templates/_components/widgets/RecentEntries/body.twig
@@ -1,18 +1,16 @@
 <div class="recententries-container">
     {% if entries|length %}
-        <table class="fullwidth">
+        <ol class="widget__list" role="list">
             {% for entry in entries %}
-                <tr>
-                    <td>
-                        <a href="{{ entry.getCpEditUrl() }}">{{ entry.title }}</a>
-                        <span class="light">
-                            {{ entry.dateCreated|timestamp('short') }}
-                            {%- if CraftEdition == CraftPro and entry.getAuthor() %}, {{ entry.getAuthor().username }}{% endif -%}
-                        </span>
-                    </td>
-                </tr>
+                <li class="widget__list-item">
+                    <a href="{{ entry.getCpEditUrl() }}">{{ entry.title }}</a>
+                    <span class="light">
+                        {{ entry.dateCreated|timestamp('short') }}
+                        {%- if CraftEdition == CraftPro and entry.getAuthor() %}, {{ entry.getAuthor().username }}{% endif -%}
+                    </span>
+                </li>
             {% endfor %}
-        </table>
+        </ol>
     {% else %}
         <p class="zilch small">{{ "No entries exist yet."|t('app') }}</p>
     {% endif %}

diff --git a/src/web/assets/dashboard/dist/css/Dashboard.css b/src/web/assets/dashboard/dist/css/Dashboard.css
diff --git a/src/web/assets/dashboard/dist/css/Dashboard.css.map b/src/web/assets/dashboard/dist/css/Dashboard.css.map
diff --git a/src/web/assets/dashboard/src/dashboard.scss b/src/web/assets/dashboard/src/dashboard.scss
@@ -134,6 +134,21 @@
   }
 }
 
+/* widget lists */
+body ol.widget__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.widget__list-item {
+  padding: 7px 0;
+
+  .craft\\widgets\\mydrafts & {
+    padding: 0;
+  }
+}
+
 /* Recent Entries widget */
 .craft\\widgets\\recententries .body .table {
   table-layout: fixed;

diff --git a/src/widgets/MyDrafts.php b/src/widgets/MyDrafts.php
@@ -97,12 +97,19 @@ public function getBodyHtml(): ?string
             ]);
         }
 
-        $html = '';
+        $html = Html::beginTag('ul', [
+            'class' => 'widget__list',
+            'role' => 'list',
+        ]);
 
         foreach ($drafts as $draft) {
-            $html .= Html::tag('div', Cp::elementHtml($draft));
+            $html .= Html::tag('li', Cp::elementHtml($draft), [
+                'class' => 'widget__list-item',
+            ]);
         }
 
+        $html .= Html::endTag('ul');
+
         return $html;
     }
 }