Accessibility settings: Proof of concept of better keyboard focus feedback

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/apps/accessibility/css/style.scss b/apps/accessibility/css/style.scss
index ad505b9312ebd5ef4f3d38014821c8fed7b1594d..7b5a42e5f322e5b09fce5424435cd03aed5a5169 100644 (file)
--- a/apps/accessibility/css/style.scss
+++ b/apps/accessibility/css/style.scss
@@ -1,7 +1,6 @@
-#accessibility {
-       max-width: 800px;
-}
+// Rules we could port to the rest of Nextcloud too
 
+// Proper highlight for links and focus feedback
 #accessibility a {
        border-bottom: 1px dotted;
 
@@ -11,9 +10,25 @@
        }
 }
 
+// Highlight checkbox label in bold for focus feedback
+// Drawback: Text width increases a bit
+#accessibility .checkbox:focus + label {
+       font-weight: bold;
+}
+
+// Limit width of settings sections for readability
+#accessibility .section p {
+       max-width: 800px;
+}
+
+// End of rules we could port to rest of Nextcloud
+
+
+
 .preview-list {
        display: flex;
        flex-direction: column;
+       max-width: 800px;
 }
 
 .preview {