[APP-2415] Full transition to CSS Logical Properties to improve RTL

assets/dev/css/ea11y-scanner-admin.scss

@@ -134,16 +134,16 @@
   &-n::after {
     right: 50%;
     bottom: 100%;
-    margin-bottom: 5px;
+    margin-block-end: 5px;
     transform: translateX(50%);
   }
 
   &-n::before {
     top: -5px;
     right: 50%;
     bottom: auto;
-    margin-right: -5px;
-    border-top-color: rgb(0 0 0 / 0.8);
+    margin-inline-end: -5px;
+    border-block-start-color: rgb(0 0 0 / 0.8);
   }
 
   &-hidden::before,

assets/dev/css/skip-link.scss

@@ -23,8 +23,8 @@
   clip: auto !important;
   clip-path: none;
   pointer-events: auto;
-  top: 30px;
-  left: 30px;
+  inset-block-start: 30px;
+  inset-inline-start: 30px;
   z-index: 100000;
   height: auto;
   width: auto;
@@ -33,10 +33,7 @@
 
 .ea11y-skip-to-content-link:focus + .ea11y-skip-to-content-backdrop {
   position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 9999;
   background-color: rgb(0 0 0 / 0.5);
 }

modules/deactivation/assets/css/style.css

@@ -3,6 +3,7 @@
 }
 
 .ea11y-deactivation-content {
+    text-align: start;
     padding: 20px;
 }
 
@@ -28,6 +29,11 @@
     padding: 5px;
     display: flex;
     flex-direction: row;
+    text-align: start;
+}
+
+.ea11y-feedback-thickbox #TB_closeWindowButton {
+    inset-inline: auto 5px;
 }
 
 .ea11y-feedback-thickbox #TB_closeWindowButton .tb-close-icon {
@@ -37,50 +43,53 @@
 .ea11y-feedback-thickbox #TB_ajaxWindowTitle {
     font-size: 14px;
     letter-spacing: 1px;
+    padding: 0;
+    padding-inline-start: 10px;
+    float: unset;
 }
 
 .ea11y-deactivation-content h3 {
-    margin-top: 0;
+    margin-block-start: 0;
     color: #23282d;
     font-size: 18px;
     font-weight: 600;
 }
 
 .ea11y-deactivation-content p {
     color: #666;
-    margin-bottom: 20px;
+    margin-block-end: 20px;
 }
 
 .ea11y-feedback-options {
-    margin-bottom: 20px;
+    margin-block-end: 20px;
 }
 
 .ea11y-feedback-option {
-    margin-bottom: 15px;
+    margin-block-end: 15px;
 }
 
 .ea11y-feedback-option > label {
     display: flex;
     align-items: center;
     cursor: pointer;
     color: #23282d;
-    margin-bottom: 8px;
+    margin-block-end: 8px;
 }
 
 .ea11y-feedback-option input[type="radio"] {
-    margin-right: 8px;
+    margin-inline-end: 8px;
 }
 
 .ea11y-feedback-text-field {
-    margin-left: 24px;
-    margin-top: 8px;
+    margin-inline-start: 24px;
+    margin-block-start: 8px;
 }
 
 .ea11y-feedback-text-field label {
     display: block;
     font-size: 12px;
     color: #666;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
 }
 
 .ea11y-feedback-text-field input,
@@ -105,8 +114,8 @@
     flex-direction: row-reverse;
     justify-content: space-between;
     gap: 10px;
-    border-top: 1px solid #e1e1e1;
-    padding-top: 20px;
+    border-block-start: 1px solid #e1e1e1;
+    padding-block-start: 20px;
 }
 
 .ea11y-btn {

modules/deactivation/assets/js/deactivation-feedback.js

@@ -1,3 +1,4 @@
+import { __ } from '@wordpress/i18n';
 import '../css/style.css';
 
 const REASON_FIELDS = {
@@ -84,8 +85,8 @@ class Ea11yDeactivationHandler {
 		this.deactivationLink.addEventListener('click', (e) => {
 			e.preventDefault();
 			this.modal(
-				'QUICK FEEDBACK',
-				'#TB_inline?width=550&height=auto&inlineId=ea11y-deactivation-modal',
+				__('Quick feedback', 'pojo-accessibility'),
+				'#TB_inline?width=600&height=auto&inlineId=ea11y-deactivation-modal',
 				'ea11y-feedback-thickbox',
 			);
 		});

modules/legacy/assets/css/style.css

@@ -70,7 +70,7 @@
   padding: 10px 0;
 }
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items.pojo-a11y-links {
-  border-top: 1px solid;
+  border-block-start: 1px solid;
 }
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
   display: block;
@@ -82,7 +82,7 @@
   font-weight: bold;
 }
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
-  padding-right: 6px;
+  padding-inline-end: 6px;
   display: inline-block;
   width: 1.5em;
   font-style: normal;
@@ -96,10 +96,6 @@
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a .pojo-a11y-toolbar-text {
   vertical-align: middle;
 }
-body.rtl #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
-  padding-left: 6px;
-  padding-right: 0;
-}
 @media (max-width: 767px) {
   #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title {
     padding: 7px 12px 0;
@@ -593,7 +589,7 @@ body.pojo-a11y-high-contrast u span {
   color: #FFFF80 !important;
 }
 body.pojo-a11y-high-contrast dt {
-  border-top: thin solid grey !important;
+  border-block-start: thin solid grey !important;
 }
 body.pojo-a11y-high-contrast h1,
 body.pojo-a11y-high-contrast h1 a,
@@ -639,7 +635,7 @@ body.pojo-a11y-high-contrast img {
 }
 body.pojo-a11y-high-contrast abbr,
 body.pojo-a11y-high-contrast acronym {
-  border-bottom: 1px dotted !important;
+  border-block-end: 1px dotted !important;
 }
 body.pojo-a11y-high-contrast :focus {
   outline: thin dotted !important;
@@ -1428,11 +1424,11 @@ body.pojo-a11y-readable-font *:not(i):not(span) {
 }
 .pojo-skip-link {
   position: absolute;
-  top: -1000em;
+  inset-block-start: -1000em;
 }
 .pojo-skip-link:focus {
-  left: 50px;
-  top: 50px;
+  inset-inline-start: 50px;
+  inset-block-start: 50px;
   height: auto;
   width: 200px;
   display: block;
@@ -1447,10 +1443,6 @@ body.pojo-a11y-readable-font *:not(i):not(span) {
   text-decoration: none;
   box-shadow: 0 0 2px 2px rgb(0 0 0 / 0.6);
 }
-body.rtl .pojo-skip-link:focus {
-  right: 50px;
-  left: auto;
-}
 #pojo-a11y-toolbar *,
 #pojo-a11y-toolbar ::before,
 #pojo-a11y-toolbar ::after {

modules/legacy/assets/less/_high-contrast.less

@@ -73,7 +73,7 @@ h4 i, h5 em, h5 i, h6 em, h6 i, i, i span, u, u span {
 	color: #FFFF80 !important;
 }
 dt {
-	border-top: thin solid grey !important;
+	border-block-start: thin solid grey !important;
 }
 h1, h1 a, h1 a b, h1 abbr, h1 center, h1 span, h2, h2 a,
 h2 a b, h2 abbr, h2 center, h2 span, h3, h3 a, h3 a b,
@@ -88,7 +88,7 @@ img {
 	background-color: #808080 !important;
 }
 abbr, acronym {
-	border-bottom: 1px dotted !important;
+	border-block-end: 1px dotted !important;
 }
 :focus {
 	outline: thin dotted !important;

modules/legacy/assets/less/_toolbar.less

@@ -85,7 +85,7 @@
 			padding: 10px 0;
 
 			&.pojo-a11y-links {
-				border-top: 1px solid;
+				border-block-start: 1px solid;
 			}
 
 			li.pojo-a11y-toolbar-item {
@@ -101,7 +101,7 @@
 					}
 
 					svg {
-						padding-right: 6px;
+						padding-inline-end: 6px;
                         display: inline-block;
                         width: 1.5em;
                         font-style: normal;
@@ -122,29 +122,6 @@
 	}
 }
 
-body.rtl {
-
-	#pojo-a11y-toolbar {
-
-		.pojo-a11y-toolbar-overlay {
-
-			ul.pojo-a11y-toolbar-items {
-
-				li.pojo-a11y-toolbar-item {
-
-					a {
-
-						svg {
-							padding-left: 6px;
-							padding-right: 0;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
 // Responsive
 @media (max-width: 767px) {
 

modules/legacy/assets/less/style.less

@@ -20,11 +20,11 @@ body.pojo-a11y-readable-font {
 // Skip Link
 .pojo-skip-link {
 	position: absolute;
-	top: -1000em;
+	inset-block-start: -1000em;
 
 	&:focus {
-		left: 50px;
-		top: 50px;
+		inset-inline-start: 50px;
+		inset-block-start: 50px;
 		height: auto;
 		width: 200px;
 		display: block;
@@ -41,15 +41,6 @@ body.pojo-a11y-readable-font {
 	}
 }
 
-body.rtl {
-	.pojo-skip-link {
-		&:focus {
-			right: 50px;
-			left: auto;
-		}
-	}
-}
-
 #pojo-a11y-toolbar {
 
 	*,

modules/legacy/components/upgrade.php

@@ -268,16 +268,16 @@ public function maybe_add_introduction_modal() {
 				}
 				.video-wrapper {
 					position: relative;
-					padding-bottom: 56.25%;
-					padding-top: 9px;
+					padding-block-end: 56.25%;
+					padding-block-start: 9px;
 					height: 0;
 					overflow: hidden;
 				}
 				.modal-content-wrap {
 					padding: 1px 9px;
 				}
 				.intro-title {
-					margin-top: 16px;
+					margin-block-start: 16px;
 					font-family: Roboto, sans-serif;
 					font-size: 24px;
 					font-style: normal;
@@ -286,8 +286,8 @@ public function maybe_add_introduction_modal() {
 				}
 				.intro-description{
 					padding: 0 !important;
-					margin-top: 24px;
-					margin-bottom: 24px;
+					margin-block-start: 24px;
+					margin-block-end: 24px;
 					color: #69727D;
 				}
 				.benefits {
@@ -298,7 +298,7 @@ public function maybe_add_introduction_modal() {
 					background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJDaXJjbGVDaGVja0ZpbGxlZCI+CjxwYXRoIGlkPSJWZWN0b3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVDOC45MzMwMSAxLjg3NSA3Ljg3NjQ3IDIuMDg1MTYgNi44OTA3IDIuNDkzNDhDNS45MDQ5MyAyLjkwMTggNS4wMDkyMyAzLjUwMDI4IDQuMjU0NzYgNC4yNTQ3NkMzLjUwMDI4IDUuMDA5MjMgMi45MDE4IDUuOTA0OTMgMi40OTM0OCA2Ljg5MDdDMi4wODUxNiA3Ljg3NjQ3IDEuODc1IDguOTMzMDEgMS44NzUgMTBDMS44NzUgMTEuMDY3IDIuMDg1MTYgMTIuMTIzNSAyLjQ5MzQ4IDEzLjEwOTNDMi45MDE4IDE0LjA5NTEgMy41MDAyOCAxNC45OTA4IDQuMjU0NzYgMTUuNzQ1MkM1LjAwOTIzIDE2LjQ5OTcgNS45MDQ5MyAxNy4wOTgyIDYuODkwNyAxNy41MDY1QzcuODc2NDcgMTcuOTE0OCA4LjkzMzAxIDE4LjEyNSAxMCAxOC4xMjVDMTEuMDY3IDE4LjEyNSAxMi4xMjM1IDE3LjkxNDggMTMuMTA5MyAxNy41MDY1QzE0LjA5NTEgMTcuMDk4MiAxNC45OTA4IDE2LjQ5OTcgMTUuNzQ1MiAxNS43NDUyQzE2LjQ5OTcgMTQuOTkwOCAxNy4wOTgyIDE0LjA5NTEgMTcuNTA2NSAxMy4xMDkzQzE3LjkxNDggMTIuMTIzNSAxOC4xMjUgMTEuMDY3IDE4LjEyNSAxMEMxOC4xMjUgOC45MzMwMSAxNy45MTQ4IDcuODc2NDcgMTcuNTA2NSA2Ljg5MDdDMTcuMDk4MiA1LjkwNDkzIDE2LjQ5OTcgNS4wMDkyMyAxNS43NDUyIDQuMjU0NzZDMTQuOTkwOCAzLjUwMDI4IDE0LjA5NTEgMi45MDE4IDEzLjEwOTMgMi40OTM0OEMxMi4xMjM1IDIuMDg1MTYgMTEuMDY3IDEuODc1IDEwIDEuODc1Wk0xMy41MzQ2IDguMzgwMjRDMTMuNzc4NyA4LjEzNjE2IDEzLjc3ODcgNy43NDA0MyAxMy41MzQ2IDcuNDk2MzVDMTMuMjkwNSA3LjI1MjI4IDEyLjg5NDggNy4yNTIyOCAxMi42NTA3IDcuNDk2MzVMOC45NjkyNSAxMS4xNzc4TDcuMzQ5NDkgOS41NTgwNUM3LjEwNTQyIDkuMzEzOTggNi43MDk2OSA5LjMxMzk4IDYuNDY1NjEgOS41NTgwNUM2LjIyMTUzIDkuODAyMTMgNi4yMjE1MyAxMC4xOTc5IDYuNDY1NjEgMTAuNDQxOUw4LjUyNzMxIDEyLjUwMzZDOC42NDQ1MiAxMi42MjA4IDguODAzNDkgMTIuNjg2NyA4Ljk2OTI1IDEyLjY4NjdDOS4xMzUwMSAxMi42ODY3IDkuMjkzOTggMTIuNjIwOCA5LjQxMTE5IDEyLjUwMzZMMTMuNTM0NiA4LjM4MDI0WiIgZmlsbD0iIzI1NjNFQiIvPgo8L2c+Cjwvc3ZnPgo=);
 					background-repeat: no-repeat;
 					padding: 0 0 0 25px;
-					margin-bottom: 8px;
+					margin-block-end: 8px;
 				}
 				li::marker{
 					font-size: 1.5em;
@@ -316,7 +316,7 @@ public function maybe_add_introduction_modal() {
 					justify-content: end;
 					align-items: center;
 					padding: 16px 0 1px 0;
-					margin-top: 32px;
+					margin-block-start: 32px;
 				}
 				.close-button {
 					font-family: Roboto, sans-serif;
@@ -465,7 +465,7 @@ public function maybe_add_confirmation_modal() {
 					font-weight: 700;
 					line-height: 133.4%;
 					margin-block: 1px;
-					margin-bottom: 9px
+					margin-block-end: 9px
 				}
 				.confirmation-description{
 					font-family: Roboto, sans-serif;
@@ -492,7 +492,7 @@ public function maybe_add_confirmation_modal() {
 					justify-content: end;
 					align-items: center;
 					width: 100%;
-					margin-top: 16px;
+					margin-block-start: 16px;
 				}
 				.upgrade-now {
 					background: #2563EB !important;

modules/reviews/assets/src/components/rating-form.js

@@ -93,6 +93,6 @@ export default RatingForm;
 
 const StyledFormControlLabel = styled(FormControlLabel)`
 	justify-content: space-between;
-	margin-left: 0;
+	margin-inline-start: 0;
 	width: 100%;
 `;