Accessibility: Linter issues with the border, width etc. (#787)

closes #786

---------

Co-authored-by: magdalenajadach <magdalenajadach@users.noreply.github.com>
Co-authored-by: Magdalena Jadach <magdalena@raspberrypi.org>

.stylelintrc

@@ -1,13 +1,10 @@
 {
   "enabled": true,
-  "extends": [
-    "stylelint-config-recommended-scss"
-  ],
-  "plugins": [
-    "stylelint-scss"
-  ],
+  "extends": ["stylelint-config-recommended-scss"],
+  "plugins": ["stylelint-scss", "stylelint-use-logical"],
   "rules": {
     "block-no-empty": null,
-    "declaration-block-single-line-max-declarations": 1
+    "declaration-block-single-line-max-declarations": 1,
+    "csstools/use-logical": true
   }
 }

CHANGELOG.md

@@ -36,6 +36,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Logical properties linter rule (#770)
+- Added download panel for sidebar (#744)
 - Javascript support for HTML projects (#748)
 - DownloadPanel for sidebar (#744)
 - Custom events for Log In and Sign Up from DownloadPanel (#744)

README.md

@@ -113,7 +113,7 @@ Styles from the parent application can be passed to the web component in a few d
   // enables the parent application to control the size of the web components root element
   display: block;
   flex: 1 1 auto;
-  max-height: 100dvh;
+  max-block-size: 100dvh;
 }
 ```
 

package.json

@@ -85,7 +85,7 @@
     "lint": "eslint \"src/**/*.{js,jsx,json}\"",
     "lint:fix": "eslint --fix \"src/**/*.{js,jsx,json}\"",
     "format": "prettier --write src/**/*.{js,jsx,css,md,json,scss} --config ./.prettierrc",
-    "stylelint": "stylelint --syntax=scss src/**/*.scss",
+    "stylelint": "stylelint src/**/*.scss",
     "test": "node scripts/test.js --transformIgnorePatterns 'node_modules/(?!three)/'",
     "test:integration": "cd e2e; docker compose up --exit-code-from cypress",
     "storybook": "cd storybook && rm -rf ./node_modules/.cache/storybook && yarn run storybook",
@@ -176,10 +176,11 @@
     "storybook-addon-react-router-v6": "^0.2.1",
     "style-it": "^2.1.4",
     "style-loader": "1.3.0",
-    "stylelint": "^10.1.0",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "3.3.0",
     "stylelint-order": "2.2.1",
     "stylelint-scss": "3.12.0",
+    "stylelint-use-logical": "^2.1.0",
     "terser-webpack-plugin": "4.2.3",
     "url-loader": "4.1.1",
     "webgl-mock-threejs": "^0.0.1",

src/assets/stylesheets/App.scss

@@ -68,11 +68,11 @@ body,
 #root,
 #app {
   overflow: auto;
-  height: 100%;
-  height: -moz-available;
-  height: -webkit-fill-available;
-  height: fill-available;
-  height: 100dvh;
+  block-size: 100%;
+  block-size: -moz-available;
+  block-size: -webkit-fill-available;
+  block-size: fill-available;
+  block-size: 100dvh;
   -ms-overflow-style: none; /* Remove scrollbar for IE and Edge */
   scrollbar-width: none; /* Remove scroll bar for Firefox */
 }

src/assets/stylesheets/AstroPiModel.scss

@@ -4,16 +4,16 @@
 @use "./rpf_design_system/colours" as *;
 
 .sense-hat {
-  width: 100%;
+  inline-size: 100%;
   flex: 1;
   display: flex;
   flex-flow: column;
 
   &-model {
     display: flex;
     flex-flow: column;
-    max-height: 50%;
-    min-height: 200px;
+    max-block-size: 50%;
+    min-block-size: 200px;
     flex: 1;
     padding-block-end: $space-0-5;
 
@@ -87,11 +87,11 @@
         padding-inline: $space-0-5;
         box-sizing: border-box;
         border-radius: 5px;
-        width: 32%;
+        inline-size: 32%;
         justify-content: space-between;
 
         &-reading {
-          width: 100%;
+          inline-size: 100%;
           border-radius: 5px;
           margin-block-start: $space-0-25;
           padding: $space-0-25;
@@ -105,13 +105,13 @@
           &-timer {
             margin-block-start: 0;
             padding: $space-0-5 0;
-            width: 100%;
+            inline-size: 100%;
           }
         }
 
         &-toggle {
           border-radius: 5px;
-          width: 100%;
+          inline-size: 100%;
           flex: 1;
           box-sizing: border-box;
           display: flex;
@@ -125,14 +125,14 @@
 
         &-input {
           cursor: pointer;
-          width: 85px;
+          inline-size: 85px;
           transform: rotate(270deg);
         }
 
         input[type="color"] {
           border-radius: 5px;
           flex: 1;
-          width: 100%;
+          inline-size: 100%;
           padding: $space-0-25 $space-1-5;
         }
 
@@ -149,7 +149,7 @@
         &-last {
           margin-block-start: $space-0-5;
           flex-flow: row;
-          width: 100%;
+          inline-size: 100%;
           align-items: inherit;
           justify-content: space-between;
         }
@@ -159,15 +159,15 @@
         display: flex;
         justify-content: space-between;
         .sense-hat-controls-panel__control {
-          min-height: 175px;
+          min-block-size: 175px;
         }
       }
 
       &__container {
         display: flex;
         flex-flow: column;
         align-items: center;
-        width: 32%;
+        inline-size: 32%;
 
         .sense-hat-controls-panel__control-name,
         input {

src/assets/stylesheets/Button.scss

@@ -15,8 +15,8 @@
   font-weight: $font-weight-bold;
   gap: $space-0-5;
   justify-content: center;
-  min-height: 44px;
-  min-width: 44px;
+  min-block-size: 44px;
+  min-inline-size: 44px;
   padding: 10px;
   position: relative;
   text-align: center;
@@ -171,7 +171,7 @@
         background-color: inherit;
       }
     }
-    
+
     &:active {
       color: $rpf-teal-900;
 
@@ -235,8 +235,8 @@
   }
 
   &--small {
-    min-height: unset;
-    min-width: unset;
+    min-block-size: unset;
+    min-inline-size: unset;
   }
 
   &--svg-only {

src/assets/stylesheets/ContextMenu.scss

@@ -33,7 +33,7 @@
     white-space: nowrap;
     overflow-x: visible;
     box-sizing: border-box;
-    width: 100%;
+    inline-size: 100%;
     justify-content: start;
   }
 
@@ -42,8 +42,8 @@
   }
 
   svg {
-    width: $space-1-5;
-    height: auto;
+    inline-size: $space-1-5;
+    block-size: auto;
   }
 
   &--dark {

src/assets/stylesheets/DownloadPanel.scss

@@ -29,7 +29,7 @@
 
 .download-panel__button {
   justify-content: center;
-  width: 100%;
+  inline-size: 100%;
   box-sizing: border-box;
   margin: 0;
 }

src/assets/stylesheets/DraggableTabs.scss

@@ -22,5 +22,5 @@
 
 .droppable-tab-list {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }

src/assets/stylesheets/Dropdown.scss

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: center;
   position: relative;
-  height: 100%;
+  block-size: 100%;
 
   &-button {
     align-items: center;
@@ -31,8 +31,8 @@
       inset-block-start: 100%;
 
       &::before {
-        width: 0;
-        height: 0;
+        inline-size: 0;
+        block-size: 0;
         border-inline-start: 15px solid transparent;
         border-inline-end: 15px solid transparent;
         position: absolute;
@@ -58,7 +58,7 @@
         padding: $space-0-5 $space-0-25;
         border-radius: 5px;
         white-space: nowrap;
-        width: 100%;
+        inline-size: 100%;
       }
     }
   }
@@ -67,8 +67,8 @@
     position: fixed;
     inset-inline-start: 0px;
     inset-block-start: 0px;
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     opacity: 0.5;
     z-index: -1;
   }

src/assets/stylesheets/EditorInput.scss

@@ -1,6 +1,6 @@
 .editor-input {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }

src/assets/stylesheets/EmbeddedViewer.scss

@@ -3,16 +3,16 @@
 .embedded-viewer {
   display: flex;
   flex: 1 1 auto;
-  height: auto;
+  block-size: auto;
   overflow: hidden;
 
   .proj-runner-container {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     border-radius: 10px;
-    height: auto;
-    width: 100%;
+    block-size: auto;
+    inline-size: 100%;
   }
 
   .pythonrunner-container {

src/assets/stylesheets/FilePanel.scss

@@ -8,7 +8,7 @@
 }
 
 .files-list-item {
-  width: 100%;
+  inline-size: 100%;
   display: flex;
   flex-direction: row !important;
   justify-content: flex-start;
@@ -19,7 +19,7 @@
   box-sizing: border-box;
   white-space: nowrap;
   font-weight: $font-weight-regular;
-  min-height: 44px;
+  min-block-size: 44px;
   padding: $space-0-5 $space-2-5 $space-0-5 $space-0-5;
   margin: 0;
   span {

src/assets/stylesheets/GlobalNav.scss

@@ -12,13 +12,13 @@
   display: flex;
   align-items: center;
   background-color: $rpf-dark-blue;
-  height: 100%;
+  block-size: 100%;
   z-index: 2;
 
   &__account {
     margin-inline-start: auto;
     margin-inline-end: $space-2;
-    height: 100%;
+    block-size: 100%;
 
     svg {
       fill: $rpf-white;
@@ -37,7 +37,7 @@
     }
 
     img {
-      height: $space-2-5;
+      block-size: $space-2-5;
       margin: $space-0-25 0;
     }
   }

src/assets/stylesheets/HtmlRunner.scss

@@ -4,8 +4,8 @@
 .htmlrunner-container {
   container-type: inline-size;
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 .htmlrunner-link {
@@ -21,6 +21,6 @@
 .htmlrunner-iframe {
   border: none;
   background-color: $rpf-white;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }