Accessibility: replace padding values with logical properties (#774)

closes #773 --------- Co-authored-by: magdalenajadach <magdalenajadach@users.noreply.github.com> Co-authored-by: Magdalena Jadach <magdalena@raspberrypi.org>
RaspberryPiFoundation · Nov 24, 2023 · f11ec30 · f11ec30
1 parent 9a994ee
commit f11ec30
Show file tree

Hide file tree

Showing 25 changed files with 85 additions and 87 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+- Replace physical properties with logical values - padding (#774)
 - Sidebar - Refactored styles to be closer to designs (#720)
 - Sidebar - Refactored theming to fix inconsistencies between themes (#720)
 - Sidebar - Added hover styles to collapse and close buttons (#720)

diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
@@ -77,7 +77,7 @@ body,
   scrollbar-width: none; /* Remove scroll bar for Firefox */
 }
 
-// Remove scrollbar for Chrome, Safari and Opera
+/* Remove scrollbar for Chrome, Safari and Opera */
 ::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss
@@ -15,7 +15,7 @@
     max-height: 50%;
     min-height: 200px;
     flex: 1;
-    padding-bottom: $space-0-5;
+    padding-block-end: $space-0-5;
 
     canvas {
       cursor: grab;
@@ -83,8 +83,8 @@
         flex-flow: column;
         align-items: center;
         text-align: center;
-        padding: $space-0-5;
-        padding-top: $space-0-25;
+        padding-block: $space-0-25 $space-0-5;
+        padding-inline: $space-0-5;
         box-sizing: border-box;
         border-radius: 5px;
         width: 32%;
@@ -189,7 +189,7 @@
     background-color: $rpf-grey-800;
 
     &-controls {
-      border-top: 7px solid $rpf-grey-900;
+      border-block-start: 7px solid $rpf-grey-900;
 
       &-panel {
         &__control {
@@ -243,7 +243,7 @@
     background-color: $rpf-white;
 
     &-controls {
-      border-top: 5px solid $rpf-grey-100;
+      border-block-start: 5px solid $rpf-grey-100;
 
       &-panel {
         &__control {

diff --git a/src/assets/stylesheets/BetaBanner.scss b/src/assets/stylesheets/BetaBanner.scss
@@ -32,8 +32,7 @@
 .editor-banner__link {
   display: inline;
   font-weight: $font-weight-bold;
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline: 0;
   text-decoration: underline;
 
   &.btn--tertiary {
@@ -46,7 +45,7 @@
 }
 
 .editor-banner__link--feedback {
-  padding-right: $space-0-25;
+  padding-inline-end: $space-0-25;
   white-space: nowrap;
 }
 

diff --git a/src/assets/stylesheets/Dropdown.scss b/src/assets/stylesheets/Dropdown.scss
@@ -1,6 +1,6 @@
-@use './rpf_design_system/spacing' as *;
-@use './rpf_design_system/font-weight' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/spacing" as *;
+@use "./rpf_design_system/font-weight" as *;
+@use "./rpf_design_system/colours" as *;
 
 .dropdown {
   display: flex;
@@ -16,7 +16,7 @@
     padding: 0 $space-1-5;
 
     &--active {
-      border-bottom: 3px solid $rpf-teal-800;
+      border-block-end: 3px solid $rpf-teal-800;
     }
   }
 
@@ -33,13 +33,13 @@
       &::before {
         width: 0;
         height: 0;
-        border-left: 15px solid transparent;
-        border-right: 15px solid transparent;
+        border-inline-start: 15px solid transparent;
+        border-inline-end: 15px solid transparent;
         position: absolute;
         inset-block-end: 100%;
         inset-inline-start: 50%;
         margin-inline-start: -15px;
-        content: '';
+        content: "";
       }
     }
 
@@ -52,7 +52,7 @@
         color: inherit;
         cursor: pointer;
         font: inherit;
-        justify-content: left;
+        justify-content: inline-start;
         font-weight: $font-weight-regular;
         text-decoration: none;
         padding: $space-0-5 $space-0-25;
@@ -79,7 +79,7 @@
     background-color: $rpf-white;
 
     &--bottom::before {
-      border-bottom: 15px solid $rpf-white;
+      border-block-end: 15px solid $rpf-white;
     }
 
     &--list__item:hover {
@@ -96,7 +96,7 @@
     background-color: $rpf-grey-700;
 
     &--bottom::before {
-      border-bottom: 15px solid $rpf-grey-700;
+      border-block-end: 15px solid $rpf-grey-700;
     }
 
     &--list__item:hover {

diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
@@ -21,7 +21,7 @@
 
       .cm-content {
         flex: 1;
-        padding-top: $space-0-5;
+        padding-block-start: $space-0-5;
         margin-inline-end: $space-0-5;
       }
     }

diff --git a/src/assets/stylesheets/FontSizeSelector.scss b/src/assets/stylesheets/FontSizeSelector.scss
@@ -35,7 +35,7 @@
         font-weight: $font-weight-bold;
 
         svg {
-          padding-right: $space-0-5;
+          padding-inline-end: $space-0-5;
         }
       }
 

diff --git a/src/assets/stylesheets/ImageUploadButton.scss b/src/assets/stylesheets/ImageUploadButton.scss
@@ -12,5 +12,5 @@
 }
 
 .modal-footer {
-    text-align: right;
+    text-align: inline-end;
 }
diff --git a/src/assets/stylesheets/LandingPage.scss b/src/assets/stylesheets/LandingPage.scss
@@ -65,7 +65,7 @@
   @media screen and (min-width: 768px) {
     align-items: center;
     display: flex;
-    text-align: left;
+    text-align: inline-start;
     padding: 0 $space-2;
     max-width: 634px;
   }

diff --git a/src/assets/stylesheets/MobileProject.scss b/src/assets/stylesheets/MobileProject.scss
@@ -30,7 +30,7 @@
       height: $space-4;
 
       &:last-of-type {
-        border-right: none;
+        border-inline-end: none;
       }
     }
   }
@@ -49,33 +49,33 @@
 .--dark {
   .proj-container--mobile {
     .runner-controls {
-      border-left: 1px solid $rpf-grey-600;
+      border-inline-start: 1px solid $rpf-grey-600;
     }
 
     .mobile-nav {
       background-color: $rpf-grey-800;
-      border-top: 1px solid $rpf-grey-600;
+      border-block-start: 1px solid $rpf-grey-600;
     }
 
     .mobile-nav__menu {
-      border-right: 1px solid $rpf-grey-600;
+      border-inline-end: 1px solid $rpf-grey-600;
     }
   }
 }
 
 .--light {
   .proj-container--mobile {
     .runner-controls {
-      border-left: 1px solid $rpf-grey-150;
+      border-inline-start: 1px solid $rpf-grey-150;
     }
 
     .mobile-nav {
       background-color: $rpf-off-white;
-      border-top: 1px solid $rpf-grey-150;
+      border-block-start: 1px solid $rpf-grey-150;
     }
 
     .mobile-nav__menu {
-      border-right: 1px solid $rpf-grey-150;
+      border-inline-end: 1px solid $rpf-grey-150;
     }
   }
 }
@@ -85,7 +85,7 @@
 #wc.--light,
 #wc.--dark {
   .mobile-nav {
-    border-bottom: none;
+    border-block-end: none;
 
     .react-tabs__tab--selected {
       background-color: inherit;

diff --git a/src/assets/stylesheets/MobileProjectBar.scss b/src/assets/stylesheets/MobileProjectBar.scss
@@ -5,7 +5,7 @@
 
 .mobile-project-bar {
   background-color: $rpf-white;
-  border-top: 1px solid $rpf-grey-150;
+  border-block-start: 1px solid $rpf-grey-150;
   display: flex;
   height: 25px;
   justify-content: space-between;
@@ -21,7 +21,7 @@
 .--dark {
   .mobile-project-bar {
     background-color: $rpf-grey-800;
-    border-top: 1px solid $rpf-grey-600;
+    border-block-start: 1px solid $rpf-grey-600;
   }
 
   .mobile-project-bar__name {
@@ -32,7 +32,7 @@
 .--light {
   .mobile-project-bar {
     background-color: $rpf-white;
-    border-top: 1px solid $rpf-grey-150;
+    border-block-start: 1px solid $rpf-grey-150;
   }
 
   .mobile-project-bar__name {

diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss
@@ -162,15 +162,15 @@
   }
 
   .modal-content__header {
-    border-bottom: 1px solid $rpf-grey-500;
+    border-block-end: 1px solid $rpf-grey-500;
   }
 
   .modal-content__help-text {
     color: $rpf-text-secondary-darkmode;
   }
 
   .modal-content__buttons {
-    border-top: 1px solid $rpf-grey-500;
+    border-block-start: 1px solid $rpf-grey-500;
   }
 }
 
@@ -193,14 +193,14 @@
   }
 
   .modal-content__header {
-    border-bottom: 1px solid $rpf-grey-150;
+    border-block-end: 1px solid $rpf-grey-150;
   }
 
   .modal-content__help-text {
     color: $rpf-text-secondary;
   }
 
   .modal-content__buttons {
-    border-top: 1px solid $rpf-grey-150;
+    border-block-start: 1px solid $rpf-grey-150;
   }
 }
diff --git a/src/assets/stylesheets/OutputViewToggle.scss b/src/assets/stylesheets/OutputViewToggle.scss
@@ -6,9 +6,9 @@
 }
 
 .--light .output-view-toggle {
-  border-left: 1px solid $rpf-grey-150;
+  border-inline-start: 1px solid $rpf-grey-150;
 }
 
 .--dark .output-view-toggle {
-  border-left: 1px solid $rpf-grey-600;
+  border-inline-start: 1px solid $rpf-grey-600;
 }
diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss
@@ -15,21 +15,19 @@
   display: flex;
   flex: 1 0 auto;
   justify-content: space-between;
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-inline: 5px;
 }
 
 .editor-controls {
   display: flex;
 }
 
 .proj-controls {
-  padding-top: 20px;
+  padding-block-start: 20px;
 }
 
 .proj-share-link {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-inline: 5px;
 }
 
 .proj-container {

diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss
@@ -69,7 +69,7 @@
   }
 
   .project-bar__btn-wrapper:not(:last-child) {
-    border-right: 1px solid $rpf-grey-150;
+    border-inline-end: 1px solid $rpf-grey-150;
   }
 }
 
@@ -79,19 +79,19 @@
     border: 1px solid $rpf-grey-150;
 
     .project-name {
-      border-right: 1px solid $rpf-grey-150;
+      border-inline-end: 1px solid $rpf-grey-150;
     }
   }
 
   .project-bar__right {
-    border-left: 1px solid $rpf-grey-150;
+    border-inline-start: 1px solid $rpf-grey-150;
 
     .rpf_button {
-      border-right: 1px solid $rpf-grey-150;
+      border-inline-end: 1px solid $rpf-grey-150;
     }
 
     .btn--tertiary::after {
-      border-right: 1px solid $rpf-grey-150;
+      border-inline-end: 1px solid $rpf-grey-150;
     }
 
     .btn--tertiary:focus-visible::after {
@@ -106,18 +106,18 @@
     border: 1px solid $rpf-grey-600;
 
     .project-name {
-      border-right: 1px solid $rpf-grey-600;
+      border-inline-end: 1px solid $rpf-grey-600;
     }
   }
   .project-bar__right {
-    border-left: 1px solid $rpf-grey-600;
+    border-inline-start: 1px solid $rpf-grey-600;
 
     .project-bar__btn-wrapper:not(:last-child) {
       border-color: $rpf-grey-600;
     }
 
     .btn--tertiary::after {
-      border-right: 1px solid $rpf-grey-600;
+      border-inline-end: 1px solid $rpf-grey-600;
     }
 
     .btn--tertiary:focus-visible::after {

diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss
@@ -12,7 +12,7 @@
     overflow-wrap: break-word;
     word-break: break-word;
     text-align: center;
-    vertical-align: top;
+    vertical-align: block-start;
   }
 
   &__image-wrapper {