Merged PR 1648: Fix accessibility issues

Fix accessibility issues Related work items: #3949
dynamicweb · Jul 15, 2021 · 9d12e97 · 9d12e97
2 parents ee8096f + 88955c0
commit 9d12e97
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 20 deletions.
diff --git a/Swift/Files/Templates/Designs/Swift/Assets/_src/scss/1-base/_utilities.scss b/Swift/Files/Templates/Designs/Swift/Assets/_src/scss/1-base/_utilities.scss
@@ -24,7 +24,7 @@ $utilities: (
 		property: opacity,
 		class: opacity,
 		state: hover,
-		values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1 )
+		values: ( 0: 0, 25: .25, 50: .5, 75: .75, 85: .85, 100: 1 )
 	),
 	"min-viewport-height": (
 		responsive: true,
@@ -75,4 +75,4 @@ button:focus-visible,
 	&:focus {
 		text-decoration: underline !important;
 	}
-}
+}
diff --git a/Swift/Files/Templates/Designs/Swift/Assets/css/styles.css b/Swift/Files/Templates/Designs/Swift/Assets/css/styles.css
diff --git a/Swift/Files/Templates/Designs/Swift/Assets/css/styles.css.map b/Swift/Files/Templates/Designs/Swift/Assets/css/styles.css.map
diff --git a/Swift/Files/Templates/Designs/Swift/Navigation/ProductGroupHeader.cshtml b/Swift/Files/Templates/Designs/Swift/Navigation/ProductGroupHeader.cshtml
@@ -26,7 +26,7 @@
 }
 
 <nav aria-label="breadcrumb">
-	<ol class="breadcrumb mb-0 text-muted">
+	<ol class="breadcrumb mb-0 opacity-85">
 		@GetNodes(Model.Nodes)
 	</ol>
 </nav>

diff --git a/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_ProductDetailsInfo.cshtml b/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_ProductDetailsInfo.cshtml
@@ -49,15 +49,15 @@
 		<div class="mb-4">
 			<h1 class="@titleFontSize">@product.Name</h1>
 			@if (!Model.Item.GetBoolean("HideProductNumber")) { 
-				<div class="text-muted">@product.Number</div>
+				<div class="opacity-85">@product.Number</div>
 			}
 		</div>
 		<div class="mb-4">
 			<div class="fs-4 fw-bold">
 				<span class="text-price">@product.Price.PriceFormatted</span>
 			</div>
 			@if (product.Price.Price != product.PriceBeforeDiscount.Price) {
-				<div class="text-decoration-line-through text-muted">
+				<div class="text-decoration-line-through opacity-85">
 					@product.PriceBeforeDiscount.PriceFormatted
 				</div>
 			}

diff --git a/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_ProductListFacets.cshtml b/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_ProductListFacets.cshtml
@@ -159,7 +159,7 @@ else
 
 		<div class="@groupsTheme border-bottom">
 			<div class="d-flex @(headerPadding)" data-bs-toggle="collapse" data-bs-target="#ProductGroupNavigation_@deviceType" role="button" aria-expanded="true" aria-controls="ProductGroupNavigation_@deviceType">
-				<h6 class="my-3 opacity-75 m-0 flex-fill">@Translate("Navigation")</h6>
+				<h2 class="my-3 opacity-85 m-0 flex-fill h6">@Translate("Navigation")</h2>
 				<div class="my-auto collapse-chevron-icon"></div>
 			</div>
 			<div class="collapse show pb-3@(bodyPadding)" id="ProductGroupNavigation_@deviceType">
@@ -172,7 +172,7 @@ else
 	{
 		<div class="@groupsTheme border-bottom">
 			<div class="d-flex@(headerPadding)">
-				<h6 class="my-3 opacity-75 flex-fill">@Translate("Sort by")</h6>
+				<h2 class="my-3 opacity-85 flex-fill h6">@Translate("Sort by")</h2>
 			</div>
 			<div class="pb-3@(bodyPadding)">
 				@if (Model.Item.GetBoolean("SortByNameAZ"))
@@ -246,7 +246,7 @@ else
 			{
 				<div class="@groupsTheme @border @groupCount @totalGroups">
 					<div class="d-flex @(headerPadding)" data-bs-toggle="collapse" data-bs-target="#[email protected](" ", "")_@deviceType" role="button" aria-expanded="true" aria-controls="[email protected](" ", "")_@deviceType">
-						<h6 class="my-3 opacity-75 m-0 flex-fill">@facet.Name</h6>
+						<h2 class="my-3 opacity-85 m-0 flex-fill h6">@facet.Name</h2>
 						<div class="my-auto collapse-chevron-icon"></div>
 					</div>
 					<div class="collapse show pb-3@(bodyPadding)" id="[email protected](" ", "")_@deviceType">
@@ -292,7 +292,7 @@ else
 		<input type="checkbox" onclick="ProductList.Update(event)" class="form-check-input" name="@facet.QueryParameter" value="[@facetOption.Value]" data-filter-value="@facetLabel" @selected>
 		<span class="form-check-label d-flex align-items-center">
 			<span class="flex-fill">@facetLabel </span>
-			<small class="opacity-75">@facetOption.Count</small>
+			<small class="opacity-85">@facetOption.Count</small>
 		</span>
 	</label>
 }

diff --git a/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_ProductListGridView.cshtml b/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_ProductListGridView.cshtml
@@ -175,7 +175,7 @@
 								</a>
 							</h3>
 							@if (!Model.Item.GetBoolean("HideProductNumber")) { 
-								<p class="small text-muted mb-2">@product.Number</p>
+								<p class="small opacity-85 mb-2">@product.Number</p>
 							}
 							@if (mainFeatures.Count > 0)
 							{
@@ -225,7 +225,7 @@
 
 	<div class="row mb-3">
 		<div class="col text-center">
-			<div class="text-muted mb-3">@loadedProducts @Translate("out of") @productList.TotalProductsCount @Translate("products")</div>
+			<div class="opacity-85 mb-3">@loadedProducts @Translate("out of") @productList.TotalProductsCount @Translate("products")</div>
 			@if (productList.PageCount != 1) {
 				string sortBySelection = Dynamicweb.Context.Current.Request?.Form["SortBy"] ?? "name";
 

diff --git a/Swift/Files/Templates/Designs/Swift/Swift_Master.cshtml b/Swift/Files/Templates/Designs/Swift/Swift_Master.cshtml
@@ -1,4 +1,4 @@
-@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
+@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
 @using System
 @using Dynamicweb
 @using Dynamicweb.Environment
@@ -64,7 +64,7 @@
 	Dynamicweb.Context.Current.Response.AddHeader("link", $"</Files/Templates/Designs/Swift/Assets/css/styles.css?{cssStyleFileInfo.LastWriteTime.Ticks}>; rel=preload; as=style;");
 	Dynamicweb.Context.Current.Response.AddHeader("link", $"</Files/Templates/Designs/Swift/_parsed/Swift_css/Swift_styles_{Model.Area.ID}.min.css?{cssLastModified.Ticks}; rel=preload; as=style;");
 	Dynamicweb.Context.Current.Response.AddHeader("link", $"</Files/Templates/Designs/Swift/Assets/js/scripts.js?{jsFileInfo.LastWriteTime.Ticks}; rel=preload; as=script;");
-	Dynamicweb.Context.Current.Response.Flush(); //This sends the headers where we are now in the rendering making the TTFB faster
+	//Dynamicweb.Context.Current.Response.Flush(); //This sends the headers where we are now in the rendering making the TTFB faster
 
 	SetMetaTags();
 }
@@ -76,8 +76,8 @@
 	<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0">
 	<link rel="preconnect" href="https://fonts.gstatic.com" />
 
-	<link rel="shortcut icon" href="~/Files/Templates/Designs/Swift/Assets/Images/favicon.png" async>
-	<link rel="apple-touch-icon" href="~/Files/Templates/Designs/Swift/Assets/Images/logo_transparent.png" async>
+	<link rel="shortcut icon" href="~/Files/Templates/Designs/Swift/Assets/Images/favicon.png">
+	<link rel="apple-touch-icon" href="~/Files/Templates/Designs/Swift/Assets/Images/logo_transparent.png">
 	@Model.MetaTags.Replace("<meta name=\"robots\" content=\"noindex,nofollow\">", "") @*For lighthouse testing on *.local.dynamicweb.dk*@
 
 	<title>@Model.Title</title>
@@ -90,7 +90,7 @@
 	@* Global site tag (gtag.js) - Google Analytics *@
 	@if (!string.IsNullOrWhiteSpace(googleAnalyticsTrackingID) && allowCookies)
 	{
-		<script async src="https://www.googletagmanager.com/gtag/js?id=@googleAnalyticsTrackingID"></script>
+		<script src="https://www.googletagmanager.com/gtag/js?id=@googleAnalyticsTrackingID" async></script>
 		<script>@googleAnalyticsTrackingID</script>
 	}
 
@@ -137,7 +137,7 @@
 			}
 		</footer> }
 
-					@* Render any offcanvas menu here *@
+	@* Render any offcanvas menu here *@
 	@RenderSnippet("offcanvas")
 
 </body>

diff --git a/Swift/Files/Templates/Designs/Swift/eCom/ProductCatalog/ProductSlider.cshtml b/Swift/Files/Templates/Designs/Swift/eCom/ProductCatalog/ProductSlider.cshtml
@@ -109,7 +109,7 @@
 						</div>
 						<div class="d-flex flex-column h-100 @contentPadding">
 							<div class="flex-fill">
-								<h4 class="h6 opacity-75">@product.Name @product.VariantId</h4>
+								<h3 class="h6 opacity-85">@product.Name @product.VariantId</h3>
 							</div>
 							<p class="h5 fw-bold">@product.Price.PriceFormatted</p>
 						</div>