Merge pull request #1887 from SUI-Components/sui-studio-a11y-lighthouse

fix(packages/sui-studio): improve sui-studio accessibility lighthouse metrics
SUI-Components · Dec 23, 2024 · 13233c7 · 13233c7
2 parents 511c52f + 374d9b0
commit 13233c7
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 20 deletions.
diff --git 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
@@ -140,7 +140,11 @@ export default class Demo extends Component {
           <ThemesButtons themes={themes} selected={themeSelectedIndex} onThemeChange={this.handleThemeChange} />
         </div>
 
-        <button className="sui-StudioDemo-fullScreenButton" onClick={this.handleFullScreen}>
+        <button
+          className="sui-StudioDemo-fullScreenButton"
+          onClick={this.handleFullScreen}
+          aria-label={isFullScreen ? 'see in full screen' : 'close full screen mode'}
+        >
           {isFullScreen ? iconFullScreenExit : iconFullScreen}
         </button>
 

diff --git 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 (
     <section className="sui-Studio">
       <div className="sui-Studio-navHeader">
-        <button className="sui-Studio-navMenu" onClick={handleClickMenu}>
+        <button className="sui-Studio-navMenu" onClick={handleClickMenu} aria-label="Menu">
           {iconMenu}
         </button>
         <Link to="/">

diff --git 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
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
-<head>
-  <title>SUI Studio</title>
-  <meta charset="utf-8" />
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1.0, maximum-scale=1"
-  />
-  <script defer src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
-  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/codemirror.min.js"></script>
-  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/mode/javascript/javascript.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/codemirror.min.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/theme/material.min.css" />
-</head>
-<body>
-  <div id="root"></div>
-</body>
+<html lang="en">
+  <head>
+    <title>SUI Studio</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5" />
+    <script defer src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/codemirror.min.js"></script>
+    <script
+      defer
+      src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/mode/javascript/javascript.min.js"
+    ></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/codemirror.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.0/theme/material.min.css" />
+  </head>
+  <body>
+    <div id="root" />
+  </body>
+</html>
diff --git a/packages/sui-studio/src/styles/components/_tabs.scss b/packages/sui-studio/src/styles/components/_tabs.scss
@@ -3,17 +3,20 @@
 
   margin: 0;
   padding: 0;
+  display: inline-flex;
 
   &--small {
     font-size: 80%;
     margin-right: 16px;
+    min-height: 30px;
   }
 
   &-tab {
     display: inline-block;
     list-style: none;
     margin: 0;
     padding: 0;
+    height: 100%;
   }
 
   &-button {