add accessibility tests

.storybook/main.ts

@@ -6,7 +6,8 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-docs',
-    '@storybook/addon-vitest'
+    '@storybook/addon-vitest',
+    '@storybook/addon-a11y'
   ],
 
   framework: {

.storybook/preview.ts

@@ -3,6 +3,9 @@ import './preview.css'
 
 const preview: Preview = {
   parameters: {
+    a11y: {
+      test: 'error'
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -60,7 +60,8 @@
     "dist/"
   ],
   "devDependencies": {
-    "@biomejs/biome": "2.4.8",
+    "@biomejs/biome": "2.4.9",
+    "@storybook/addon-a11y": "10.3.3",
     "@storybook/addon-docs": "10.3.3",
     "@storybook/addon-links": "10.3.3",
     "@storybook/addon-vitest": "10.3.3",
@@ -69,16 +70,16 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser-playwright": "4.1.0",
-    "@vitest/coverage-v8": "4.1.0",
+    "@vitest/browser-playwright": "4.1.2",
+    "@vitest/coverage-v8": "4.1.2",
     "jsdom": "29.0.1",
     "playwright": "1.58.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "storybook": "10.3.3",
     "typescript": "6.0.2",
-    "vite": "8.0.1",
-    "vitest": "4.1.0"
+    "vite": "8.0.3",
+    "vitest": "4.1.2"
   },
   "peerDependencies": {
     "react": "18.x",

src/canvas/components/EditTextBox.tsx

@@ -107,6 +107,7 @@ const EditTextBox = ({ disabled = false, shape, defaultValue, updateValue, saveS
       ref={ref}
       data-fontbold={shape.style?.fontBold ?? false}
       data-fontitalic={shape.style?.fontItalic ?? false}
+      aria-label='Text content'
       contentEditable={isEditable}
       role='textbox'
       tabIndex={isEditable ? 0 : undefined}

src/editor/components/settings/Layouts.css

@@ -65,11 +65,15 @@
 .react-paint-editor-layout > span {
   height: 20px;
   line-height: 1;
-  color: #8a8a8a;
+  color: #6b6b6b;
+}
+
+.react-paint-editor-layout[data-selected='1'] > span {
+  color: var(--react-paint-editor-app-font-selected-color);
 }
 
 .react-paint-editor-layout > span > svg {
-  fill: #8a8a8a;
+  fill: #6b6b6b;
   width: 20px;
   height: 20px;
   padding: 0 4px;

src/editor/components/settings/Layouts.tsx

@@ -154,6 +154,7 @@ const Layouts = ({
           <div className='react-paint-editor-layouts-row'>
             <span className='react-paint-editor-layouts-subtitle'>Grid</span>
             <Button
+              aria-label='No grid'
               icon={gridOffIcon}
               className='react-paint-editor-layouts-grid-button'
               selected={gridFormat === 'none'}

src/editor/index.tsx

@@ -264,11 +264,11 @@ const Editor = ({ editorProps, className, style, options, children }: EditorProp
       )}
       {isZoomPanelShown && (
         <Panel alignment='left' position='bottom' className='react-paint-editor-layouts-panel' data-edit={+isEditMode}>
-          <Button className='react-paint-editor-zoom-button' icon={zoomOut} onClick={() => setCanvasZoom('unzoom')} />
+          <Button aria-label='Zoom out' className='react-paint-editor-zoom-button' icon={zoomOut} onClick={() => setCanvasZoom('unzoom')} />
           <Button className='react-paint-editor-zoom-button react-paint-editor-zoom-button-value' onClick={() => setCanvasZoom('default')}>
             {Math.round(settings.canvasZoom * 100)}%
           </Button>
-          <Button className='react-paint-editor-zoom-button' icon={zoomIn} onClick={() => setCanvasZoom('zoom')} />
+          <Button aria-label='Zoom in' className='react-paint-editor-zoom-button' icon={zoomIn} onClick={() => setCanvasZoom('zoom')} />
         </Panel>
       )}
       {isEditMode && (

stories/button.css

@@ -24,9 +24,9 @@
 }
 
 .dynamic-button.active {
-  background: #007bff;
+  background: #0056b3;
   color: #ffffff;
-  border-color: #007bff;
+  border-color: #0056b3;
   box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
 }