From 374d9b09b25a21e398e3b4df619d2d64d6c7c31c Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 20 Dec 2024 17:14:03 +0100 Subject: [PATCH] fix(packages/sui-studio): improve sui-studio accessibility lighthouse metrics --- .../src/components/demo/_style.scss | 3 +- .../sui-studio/src/components/demo/index.js | 6 +++- .../sui-studio/src/components/layout/index.js | 2 +- .../src/components/preview/_style.scss | 1 + packages/sui-studio/src/index.html | 34 ++++++++++--------- .../src/styles/components/_tabs.scss | 3 ++ 6 files changed, 29 insertions(+), 20 deletions(-) diff --git a/packages/sui-studio/src/components/demo/_style.scss b/packages/sui-studio/src/components/demo/_style.scss index 79b3d61b7..98ef35976 100644 --- a/packages/sui-studio/src/components/demo/_style.scss +++ b/packages/sui-studio/src/components/demo/_style.scss @@ -2,7 +2,6 @@ display: flex; flex: 1; flex-direction: column; - padding: 16px; &-codeButton, &-fullScreenButton { @@ -20,7 +19,7 @@ &-fullScreenButton { @include breakpoint-from(s) { bottom: auto; - top: 65px; + top: 5px; } } diff --git a/packages/sui-studio/src/components/demo/index.js b/packages/sui-studio/src/components/demo/index.js index 095e42d52..fd1ed723b 100644 --- a/packages/sui-studio/src/components/demo/index.js +++ b/packages/sui-studio/src/components/demo/index.js @@ -140,7 +140,11 @@ export default class Demo extends Component { - diff --git a/packages/sui-studio/src/components/layout/index.js b/packages/sui-studio/src/components/layout/index.js index 65fbd4579..642daa2df 100644 --- a/packages/sui-studio/src/components/layout/index.js +++ b/packages/sui-studio/src/components/layout/index.js @@ -51,7 +51,7 @@ export default function Layout({children}) { return (
- diff --git a/packages/sui-studio/src/components/preview/_style.scss b/packages/sui-studio/src/components/preview/_style.scss index 258cf00f6..35bb89309 100644 --- a/packages/sui-studio/src/components/preview/_style.scss +++ b/packages/sui-studio/src/components/preview/_style.scss @@ -1,4 +1,5 @@ .sui-StudioPreview { + padding: 16px; &-error { background-color: #c10000; color: #f0f0f0; diff --git a/packages/sui-studio/src/index.html b/packages/sui-studio/src/index.html index 1e6a202d6..5054fdec3 100644 --- a/packages/sui-studio/src/index.html +++ b/packages/sui-studio/src/index.html @@ -1,17 +1,19 @@ - - SUI Studio - - - - - - - - - -
- + + + SUI Studio + + + + + + + + + +
+ + diff --git a/packages/sui-studio/src/styles/components/_tabs.scss b/packages/sui-studio/src/styles/components/_tabs.scss index 75c2e0610..6dc038074 100644 --- a/packages/sui-studio/src/styles/components/_tabs.scss +++ b/packages/sui-studio/src/styles/components/_tabs.scss @@ -3,10 +3,12 @@ margin: 0; padding: 0; + display: inline-flex; &--small { font-size: 80%; margin-right: 16px; + min-height: 30px; } &-tab { @@ -14,6 +16,7 @@ list-style: none; margin: 0; padding: 0; + height: 100%; } &-button {