Fixed #2913 - Improve Splitter implementation for Accessibility

primefaces · Aug 31, 2022 · bc17ff6 · bc17ff6
1 parent 5761c63
commit bc17ff6
Show file tree

Hide file tree

Showing 47 changed files with 447 additions and 22 deletions.
diff --git a/api-generator/components/splitter.js b/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 = [

diff --git a/public/themes/arya-blue/theme.css b/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;
 }

diff --git a/public/themes/arya-green/theme.css b/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;
 }

diff --git a/public/themes/arya-orange/theme.css b/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;
 }

diff --git a/public/themes/arya-purple/theme.css b/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;
 }

diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/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;
 }

diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/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;
 }

diff --git a/public/themes/bootstrap4-light-blue/theme.css b/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;
 }

diff --git a/public/themes/bootstrap4-light-purple/theme.css b/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;
 }

diff --git a/public/themes/fluent-light/theme.css b/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;
 }

diff --git a/public/themes/lara-dark-blue/theme.css b/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;
 }

diff --git a/public/themes/lara-dark-indigo/theme.css b/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;
 }

diff --git a/public/themes/lara-dark-purple/theme.css b/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;
 }

diff --git a/public/themes/lara-dark-teal/theme.css b/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;
 }

diff --git a/public/themes/lara-light-blue/theme.css b/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;
 }

diff --git a/public/themes/lara-light-indigo/theme.css b/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;
 }

diff --git a/public/themes/lara-light-purple/theme.css b/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;
 }

diff --git a/public/themes/lara-light-teal/theme.css b/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;
 }

diff --git a/public/themes/luna-amber/theme.css b/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;
 }

diff --git a/public/themes/luna-blue/theme.css b/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;
 }

diff --git a/public/themes/luna-green/theme.css b/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;
 }

diff --git a/public/themes/luna-pink/theme.css b/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;
 }

diff --git a/public/themes/md-dark-deeppurple/theme.css b/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);
 }

diff --git a/public/themes/md-dark-indigo/theme.css b/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);
 }

diff --git a/public/themes/md-light-deeppurple/theme.css b/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);
 }

diff --git a/public/themes/md-light-indigo/theme.css b/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);
 }

diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/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);
 }

diff --git a/public/themes/mdc-dark-indigo/theme.css b/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);
 }

diff --git a/public/themes/mdc-light-deeppurple/theme.css b/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);
 }

diff --git a/public/themes/mdc-light-indigo/theme.css b/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);
 }