Fixing accessibility problems and HTML validation errors in built-in …

…themes (#11243)
OrchardCMS · Feb 1, 2024 · ecc7ff1 · ecc7ff1
1 parent 7bfb45c
commit ecc7ff1
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 25 deletions.
diff --git a/src/OrchardCore.Themes/TheAgencyTheme/Assets/dist/index.html b/src/OrchardCore.Themes/TheAgencyTheme/Assets/dist/index.html
@@ -255,7 +255,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
                             <img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="..." />
                             <h4>Parveen Anand</h4>
                             <p class="text-muted">Lead Designer</p>
-                            <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Parveen Anand Twitter Profile"><i class="fab fa-twitter"></i></a>
+                            <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Parveen Anand X (Twitter) Profile"><i class="fab fa-x-twitter"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Parveen Anand Facebook Profile"><i class="fab fa-facebook-f"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Parveen Anand LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a>
                         </div>
@@ -265,7 +265,7 @@ <h4>Parveen Anand</h4>
                             <img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="..." />
                             <h4>Diana Petersen</h4>
                             <p class="text-muted">Lead Marketer</p>
-                            <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Diana Petersen Twitter Profile"><i class="fab fa-twitter"></i></a>
+                            <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Diana Petersen X (Twitter) Profile"><i class="fab fa-x-twitter"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Diana Petersen Facebook Profile"><i class="fab fa-facebook-f"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Diana Petersen LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a>
                         </div>
@@ -275,7 +275,7 @@ <h4>Diana Petersen</h4>
                             <img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="..." />
                             <h4>Larry Parker</h4>
                             <p class="text-muted">Lead Developer</p>
-                            <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Larry Parker Twitter Profile"><i class="fab fa-twitter"></i></a>
+                            <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Larry Parker X (Twitter) Profile"><i class="fab fa-x-twitter"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Larry Parker Facebook Profile"><i class="fab fa-facebook-f"></i></a>
                             <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Larry Parker LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a>
                         </div>
@@ -375,7 +375,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
                 <div class="row align-items-center">
                     <div class="col-lg-4 text-lg-start">Copyright &copy; Your Website 2022</div>
                     <div class="col-lg-4 my-3 my-lg-0">
-                        <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
                         <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                         <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                     </div>

diff --git a/src/OrchardCore.Themes/TheAgencyTheme/Recipes/Snippets/footer.html b/src/OrchardCore.Themes/TheAgencyTheme/Recipes/Snippets/footer.html
@@ -10,9 +10,9 @@
                 </script>
             </div>
             <div class="col-lg-4 my-3 my-lg-0">
-                <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter" aria-hidden="true"></i></a>
-                <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
-                <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a>
+                <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="X (Twitter)"><i class="fab fa-x-twitter" aria-hidden="true"></i></a>
+                <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
+                <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="LinkedIn"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a>
             </div>
             <div class="col-lg-4 text-lg-end">
                 <a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>

diff --git a/src/OrchardCore.Themes/TheAgencyTheme/Recipes/Snippets/landingpage.liquid b/src/OrchardCore.Themes/TheAgencyTheme/Recipes/Snippets/landingpage.liquid
@@ -118,17 +118,17 @@
                     <h4>{{ member.DisplayText }}</h4>
                     <p class="text-muted">{{ member.TeamMember.Occupation.Text }}</p>
                     {% if member.TeamMember.Twitter.Text.size > 0 %}
-                    <a class="btn btn-dark btn-social mx-2" href="https://www.twitter.com/{{ member.TeamMember.Twitter.Text }}">
-                        <i class="fab fa-twitter"></i>
+                    <a class="btn btn-dark btn-social mx-2" href="https://www.twitter.com/{{ member.TeamMember.Twitter.Text }}" aria-label="{{ member.DisplayText }} X (Twitter) Profile">
+                        <i class="fab fa-x-twitter"></i>
                     </a>
                     {% endif %}
                     {% if member.TeamMember.Facebook.Text.size > 0 %}
-                    <a class="btn btn-dark btn-social mx-2" href="https://www.facebook.com/{{ member.TeamMember.Facebook.Text }}">
+                    <a class="btn btn-dark btn-social mx-2" href="https://www.facebook.com/{{ member.TeamMember.Facebook.Text }}" aria-label="{{ member.DisplayText }} Facebook Profile">
                         <i class="fab fa-facebook"></i>
                     </a>
                     {% endif %}
                     {% if member.TeamMember.LinkedIn.Text.size > 0 %}
-                    <a class="btn btn-dark btn-social mx-2" href="https://www.linkedin.com/in/{{ member.TeamMember.LinkedIn.Text }}">
+                    <a class="btn btn-dark btn-social mx-2" href="https://www.linkedin.com/in/{{ member.TeamMember.LinkedIn.Text }}" aria-label="{{ member.DisplayText }} LinkedIn Profile">
                         <i class="fab fa-linkedin"></i>
                     </a>
                     {% endif %}
@@ -152,7 +152,7 @@
         <div class="row align-items-center">
             {% for client in Model.ContentItem.Content.Clients.ContentItems %}
             <div class="col-md-3 col-sm-6 my-3">
-                <a href="{{ client.Client.Url.Text }}">
+                <a href="{{ client.Client.Url.Text }}" aria-label="{{ client.DisplayText }}">
                     <img class="img-fluid img-brand d-block mx-auto" src="{{ client.Client.Logo.Paths.first | asset_url }}" alt="">
                 </a>
             </div>

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/about.html b/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/about.html
@@ -69,7 +69,7 @@ <h1>About Me</h1>
                                 <a href="#!">
                                     <span class="fa-stack fa-lg">
                                         <i class="fas fa-circle fa-stack-2x"></i>
-                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
+                                        <i class="fab fa-x-twitter fa-stack-1x fa-inverse"></i>
                                     </span>
                                 </a>
                             </li>

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/contact.html b/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/contact.html
@@ -119,7 +119,7 @@ <h1>Contact Me</h1>
                                 <a href="#!">
                                     <span class="fa-stack fa-lg">
                                         <i class="fas fa-circle fa-stack-2x"></i>
-                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
+                                        <i class="fab fa-x-twitter fa-stack-1x fa-inverse"></i>
                                     </span>
                                 </a>
                             </li>

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/index.html b/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/index.html
@@ -119,7 +119,7 @@ <h3 class="post-subtitle">Many say exploration is part of our destiny, but it’
                                 <a href="#!">
                                     <span class="fa-stack fa-lg">
                                         <i class="fas fa-circle fa-stack-2x"></i>
-                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
+                                        <i class="fab fa-x-twitter fa-stack-1x fa-inverse"></i>
                                     </span>
                                 </a>
                             </li>

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/post.html b/src/OrchardCore.Themes/TheBlogTheme/Assets/dist/post.html
@@ -93,7 +93,7 @@ <h2 class="section-heading">Reaching for the Stars</h2>
                                 <a href="#!">
                                     <span class="fa-stack fa-lg">
                                         <i class="fas fa-circle fa-stack-2x"></i>
-                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
+                                        <i class="fab fa-x-twitter fa-stack-1x fa-inverse"></i>
                                     </span>
                                 </a>
                             </li>

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Recipes/Snippets/footer.html b/src/OrchardCore.Themes/TheBlogTheme/Recipes/Snippets/footer.html
@@ -7,7 +7,7 @@
                     <a href="#!">
                         <span class="fa-stack fa-lg">
                             <i class="fas fa-circle fa-stack-2x" aria-hidden="true"></i>
-                            <i class="fab fa-twitter fa-stack-1x fa-inverse" aria-hidden="true"></i>
+                            <i class="fab fa-x-twitter fa-stack-1x fa-inverse" aria-hidden="true"></i>
                         </span>
                     </a>
                 </li>

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Views/Content-Category.Summary.liquid b/src/OrchardCore.Themes/TheBlogTheme/Views/Content-Category.Summary.liquid
@@ -1,7 +1,7 @@
 <div class="post-preview">
     {% a display_for:Model.ContentItem %}
         <h1>
-            <i class="fas {{ Model.ContentItem.Content.Category.Icon.Text }} fa-xs" aria-hidden="true"></i>
+            <i class="{{ Model.ContentItem.Content.Category.Icon.Text }} fa-xs" aria-hidden="true"></i>
             <span class="align-middle">{{ Model.ContentItem.DisplayText }}</span>
         </h1>
     {% enda %}

diff --git a/src/OrchardCore.Themes/TheBlogTheme/Views/Content-Category.liquid b/src/OrchardCore.Themes/TheBlogTheme/Views/Content-Category.liquid
@@ -7,7 +7,7 @@
                 <div class="col-md-10 col-lg-8 col-xl-7">
                     <div class="site-heading">
                         <h1>
-                            <i class="fas {{ Model.ContentItem.Content.Category.Icon.Text }} fa-xs" aria-hidden="true"></i>
+                            <i class="{{ Model.ContentItem.Content.Category.Icon.Text }} fa-xs" aria-hidden="true"></i>
                             <span class="align-middle">{{ Model.ContentItem.DisplayText }}</span>
                         </h1>
                     </div>

diff --git a/src/OrchardCore.Themes/TheComingSoonTheme/Assets/dist/index.html b/src/OrchardCore.Themes/TheComingSoonTheme/Assets/dist/index.html
@@ -65,9 +65,9 @@ <h1 class="fst-italic lh-1 mb-4">Our Website is Coming Soon</h1>
         <!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->
         <div class="social-icons">
             <div class="d-flex flex-row flex-lg-column justify-content-center align-items-center h-100 mt-3 mt-lg-0">
-                <a class="btn btn-dark m-3" href="#!"><i class="fab fa-twitter"></i></a>
-                <a class="btn btn-dark m-3" href="#!"><i class="fab fa-facebook-f"></i></a>
-                <a class="btn btn-dark m-3" href="#!"><i class="fab fa-instagram"></i></a>
+                <a class="btn btn-dark m-3" href="#!" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
+                <a class="btn btn-dark m-3" href="#!" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+                <a class="btn btn-dark m-3" href="#!" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
             </div>
         </div>
         <!-- Bootstrap core JS-->

diff --git a/src/OrchardCore.Themes/TheComingSoonTheme/Recipes/Snippets/Content__ComingSoon.liquid b/src/OrchardCore.Themes/TheComingSoonTheme/Recipes/Snippets/Content__ComingSoon.liquid
@@ -12,7 +12,7 @@
 <div class="social-icons">
     <div class="d-flex flex-row flex-lg-column justify-content-center align-items-center h-100 mt-3 mt-lg-0">
         {% for socialicon in Model.ContentItem.Content.SocialIcons.ContentItems %}
-        <a class="btn btn-dark m-3" href="{{ socialicon.SocialIcon.Url.Text }}">
+        <a class="btn btn-dark m-3" href="{{ socialicon.SocialIcon.Url.Text }}" aria-label="{{ socialicon.DisplayText }}">
             <i class="{{ socialicon.SocialIcon.IconClass.Text }}"></i>
         </a>
         {% endfor %}

diff --git a/src/OrchardCore.Themes/TheComingSoonTheme/Recipes/comingsoon.recipe.json b/src/OrchardCore.Themes/TheComingSoonTheme/Recipes/comingsoon.recipe.json
@@ -389,7 +389,7 @@
                 "Author": "admin",
                 "SocialIcon": {
                   "IconClass": {
-                    "Text": "fab fa-twitter"
+                    "Text": "fab fa-x-twitter"
                   },
                   "Url": {
                     "Text": "https://twitter.com"
@@ -503,7 +503,7 @@
           },
           "FormPart": {
             "Action": "[js: getUrlPrefix('/workflows/invoke/' + encodeURI(createWorkflowToken(variables('workflowTypeId'), variables('workflowActivityId'))))]",
-            "Method": "POST"
+            "Method": "post"
           }
         }
       ]