Fixed #2913 - Improve Splitter implementation for Accessibility

api-generator/components/splitter.js

@@ -22,7 +22,13 @@ const SplitterProps = [
         type: "string",
         default: "storage",
         description: 'Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.'
-    }
+    },
+    {
+        name: "step",
+        type: "number",
+        default: "1",
+        description: "Step factor to increment/decrement the size of the panels while pressing the arrow keys."
+    },
 ];
 
 const SplitterEvents = [

public/themes/arya-blue/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #93cbf9;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }

public/themes/arya-green/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #a7d8a9;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }

public/themes/arya-orange/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #ffe284;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }

public/themes/arya-purple/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #cf95d9;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }

public/themes/bootstrap4-dark-blue/theme.css

@@ -3980,6 +3980,12 @@
   transition: color 0.15s, box-shadow 0.15s;
   background: rgba(255, 255, 255, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #e3f3fe;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
 }

public/themes/bootstrap4-dark-purple/theme.css

@@ -3980,6 +3980,12 @@
   transition: color 0.15s, box-shadow 0.15s;
   background: rgba(255, 255, 255, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #f0e6f5;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
 }

public/themes/bootstrap4-light-blue/theme.css

@@ -3980,6 +3980,12 @@
   transition: box-shadow 0.15s;
   background: #efefef;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/bootstrap4-light-purple/theme.css

@@ -3980,6 +3980,12 @@
   transition: box-shadow 0.15s;
   background: #efefef;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/fluent-light/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #faf9f8;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset inset 0 0 0 1px #605e5c;
+  border-radius: 2px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #edebe9;
 }

public/themes/lara-dark-blue/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }

public/themes/lara-dark-indigo/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }

public/themes/lara-dark-purple/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }

public/themes/lara-dark-teal/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }

public/themes/lara-light-blue/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #BFDBFE;
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/lara-light-indigo/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #C7D2FE;
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/lara-light-purple/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #DDD6FE;
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/lara-light-teal/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #99F6E4;
+  border-radius: 6px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/luna-amber/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }

public/themes/luna-blue/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }

public/themes/luna-green/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }

public/themes/luna-pink/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.1rem white;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }

public/themes/md-dark-deeppurple/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }

public/themes/md-dark-indigo/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }

public/themes/md-light-deeppurple/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }

public/themes/md-light-indigo/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }

public/themes/mdc-dark-deeppurple/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }

public/themes/mdc-dark-indigo/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }

public/themes/mdc-light-deeppurple/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }

public/themes/mdc-light-indigo/theme.css

@@ -3992,6 +3992,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+  border-radius: 4px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }

public/themes/nova-accent/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }

public/themes/nova-alt/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }

public/themes/nova-vue/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #c2e9d8;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }

public/themes/nova/theme.css

@@ -3955,6 +3955,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }

public/themes/rhea/theme.css

@@ -3943,6 +3943,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #e4e9ec;
+  border-radius: 2px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dadada;
 }

public/themes/saga-blue/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #a6d5fa;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/saga-green/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #b7e0b8;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/saga-orange/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #ffe69c;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/saga-purple/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.2rem #df9eea;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }

public/themes/tailwind-light/theme.css

@@ -4003,6 +4003,12 @@
   transition: none;
   background: #fafafa;
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #6366F1;
+  border-radius: 0.375rem;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #e5e7eb;
 }

public/themes/vela-blue/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #93cbf9;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }

public/themes/vela-green/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #a7d8a9;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }

public/themes/vela-orange/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #ffe284;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }

public/themes/vela-purple/theme.css

@@ -3968,6 +3968,12 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
+.p-splitter .p-splitter-gutter:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #cf95d9;
+  border-radius: 3px;
+}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }

src/components/splitter/Splitter.d.ts

@@ -38,6 +38,11 @@ export interface SplitterProps {
      * Default value is 'session'.
      */
     stateStorage?: SplitterStateStorageType;
+    /**
+     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
+     * Default value is 1.
+     */
+    step?: number | undefined;
 }
 
 export interface SplitterSlots {

src/components/splitter/Splitter.vue

@@ -1,12 +1,9 @@
 <template>
     <div :class="containerClass">
         <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
-            <component :is="panel"></component>
+            <component :is="panel" tabindex="-1"></component>
-            <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
+            <div class="p-splitter-gutter" role="separator" tabindex="0" v-if="i !== (panels.length -1)" :style="gutterStyle" :aria-orientation="layout" :aria-valuenow="prevSize"
-                @mousedown="onGutterMouseDown($event, i)"
+                @mousedown="onGutterMouseDown($event, i)" @touchstart="onGutterTouchStart($event, i)" @touchmove="onGutterTouchMove($event, i)" @touchend="onGutterTouchEnd($event, i)" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)">
-                @touchstart="onGutterTouchStart($event, i)"
-                @touchmove="onGutterTouchMove($event, i)"
-                @touchend="onGutterTouchEnd($event, i)">
                 <div class="p-splitter-gutter-handle"></div>
             </div>
         </template>
@@ -35,6 +32,10 @@ export default {
         stateStorage: {
             type: String,
             default: 'session'
+        },
+        step: {
+            type: Number,
+            default: 1
         }
     },
     dragging: false,
@@ -51,6 +52,12 @@ export default {
     prevPanelSize: null,
     panelSizes: null,
     prevPanelIndex: null,
+    timer: null,
+    data() {
+        return {
+            prevSize: null
+        }
+    },
     mounted() {
         if (this.panels && this.panels.length) {
             let initialized = false;
@@ -70,6 +77,7 @@ export default {
                 });
 
                 this.panelSizes = _panelSizes;
+                this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
             }
         }
     },
@@ -81,28 +89,54 @@ export default {
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
-        onResizeStart(event, index) {
+        onResizeStart(event, index, isKeyDown) {
-            this.gutterElement = event.currentTarget;
+            this.gutterElement = event.currentTarget || event.target;
             this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
+
+            if (!isKeyDown) {
                 this.dragging = true;
                 this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
+            }
+
             this.prevPanelElement = this.gutterElement.previousElementSibling;
             this.nextPanelElement = this.gutterElement.nextElementSibling;
+            
+            if (isKeyDown)  {
+                this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true);
+                this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true);
+            }
+            else {
                 this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
                 this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
+            }
+
             this.prevPanelIndex = index;
             DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
             DomHandler.addClass(this.$el, 'p-splitter-resizing');
         },
-        onResize(event) {
+        onResize(event, step, isKeyDown) {
-            let newPos;
+            let newPos, newPrevPanelSize, newNextPanelSize;
+            if (isKeyDown) {
+                if (this.horizontal) {
+                    newPrevPanelSize = 100 * (this.prevPanelSize + step) / this.size;
+                    newNextPanelSize = 100 * (this.nextPanelSize - step) / this.size;
+                }
+                else {
+                    newPrevPanelSize = 100 * (this.prevPanelSize - step) / this.size;
+                    newNextPanelSize = 100 * (this.nextPanelSize + step) / this.size;
+                }
+            }
+            else {
                 if (this.horizontal)
                     newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
                 else
                     newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
 
-            let newPrevPanelSize = this.prevPanelSize + newPos;
+                newPrevPanelSize = this.prevPanelSize + newPos;
-            let newNextPanelSize = this.nextPanelSize - newPos;
+                newNextPanelSize = this.nextPanelSize - newPos;
+            }
+
+            this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
 
             if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
                 this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
@@ -121,6 +155,68 @@ export default {
             DomHandler.removeClass(this.$el, 'p-splitter-resizing');
             this.clear();
         },
+        repeat(event, index, step) {
+            this.onResizeStart(event, index, true);
+            this.onResize(event, step, true);
+        },
+        setTimer(event, index, step) {
+            this.clearTimer();
+            this.timer = setTimeout(() => {
+                this.repeat(event, index, step);
+            }, 40);
+        },
+        clearTimer() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+        },
+        onGutterKeyUp() {
+            this.clearTimer();
+            this.onResizeEnd();
+        },
+        onGutterKeyDown(event, index) {
+            switch(event.code) {
+                case 'ArrowLeft': {
+                    if (this.layout === 'horizontal') {
+                        this.setTimer(event, index, this.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    if (this.layout === 'horizontal') {
+                        this.setTimer(event, index, this.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown': {
+                    if (this.layout === 'vertical') {
+                        this.setTimer(event, index, this.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    if (this.layout === 'vertical') {
+                        this.setTimer(event, index, this.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                break;
+            }
+        },
         onGutterMouseDown(event, index) {
             this.onResizeStart(event, index);
             this.bindMouseListeners();
@@ -261,7 +357,7 @@ export default {
                     else if (child.children instanceof Array) {
                         child.children.forEach(nestedChild => {
                             if (this.isSplitterPanel(nestedChild)) {
-                                panels.push(nestedChild)
+                                panels.push(nestedChild);
                             }
                         });
                     }

src/views/splitter/SplitterDoc.vue

@@ -124,6 +124,20 @@ import SplitterPanel from 'primevue/splitterpanel';
 	</SplitterPanel>
 </Splitter>
 
+</code></pre>
+
+        <h5>Steps</h5>
+        <p>Step factor is 1px by default and can be customized with <i>step</i> option.</p>
+<pre v-code><code>
+&lt;Splitter :step="10"&gt;
+	&lt;SplitterPanel&gt;
+		Panel 1
+	&lt;/SplitterPanel&gt;
+	&lt;SplitterPanel&gt;
+		Panel 2
+	&lt;/SplitterPanel&gt;
+&lt;/Splitter&gt;
+
 </code></pre>
 
 		<h5>Properties of SplitterPanel</h5>
@@ -191,6 +205,12 @@ import SplitterPanel from 'primevue/splitterpanel';
                         <td>string</td>
                         <td>session</td>
                         <td>Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
+                    </tr>
+                    <tr>
+                        <td>step</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Step factor to increment/decrement the size of the panels while pressing the arrow keys.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -260,6 +280,46 @@ import SplitterPanel from 'primevue/splitterpanel';
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+    <DevelopmentSection>
+        <h6>Screen Reader</h6>
+        <p>Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.</p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus through the splitter bar.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves a vertical splitter down.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves a vertical splitter up.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves a horizontal splitter to the left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves a horizontal splitter to the right.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
 	</AppDoc>