From dd19b8ab696fa012c6297230d9fd9882be7d582b Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 15 Oct 2023 13:00:23 +0300 Subject: [PATCH] Fixed spacing issues --- assets/styles/layout/_doc.scss | 11 ++++++++++- doc/accessibility/FormControlsDoc.vue | 6 +++--- doc/accessibility/SemanticHTMLDoc.vue | 2 +- doc/accessibility/WAIAriaDoc.vue | 8 ++++---- doc/theming/ArchitectureDoc.vue | 2 +- doc/theming/SwitchThemesDoc.vue | 2 +- pages/accessibility/index.vue | 3 +-- 7 files changed, 21 insertions(+), 13 deletions(-) diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 715cf8315..fe56045b0 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -108,7 +108,7 @@ font-weight: 600; font-style: normal; background-color: var(--doc-highlight-text-bg); - color: var(---doc-highlight-text-color); + color: var(--doc-highlight-text-color); } a { @@ -120,6 +120,15 @@ } } } + + .notification { + line-height: 1.5; + padding: 1rem; + font-weight: 500; + border-radius: var(--border-radius); + background-color: var(--doc-highlight-text-bg); + color: var(--doc-highlight-text-color); + } } .doc-section-nav { diff --git a/doc/accessibility/FormControlsDoc.vue b/doc/accessibility/FormControlsDoc.vue index 1df73df11..5f19cde24 100644 --- a/doc/accessibility/FormControlsDoc.vue +++ b/doc/accessibility/FormControlsDoc.vue @@ -10,7 +10,7 @@ -
+

On the other hand, a fancy css based button using a div has no keyboard or screen reader support.


@@ -18,7 +18,7 @@
-
+

tabindex is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls should be preferred. @@ -29,7 +29,7 @@ -

+

Form components must be related to another element that describes what the form element is used for. This is usually achieved with the label element.


diff --git a/doc/accessibility/SemanticHTMLDoc.vue b/doc/accessibility/SemanticHTMLDoc.vue
index d58ea3e6f..43396fc3f 100644
--- a/doc/accessibility/SemanticHTMLDoc.vue
+++ b/doc/accessibility/SemanticHTMLDoc.vue
@@ -26,7 +26,7 @@
-
+

Same layout can be achieved using the semantic elements with screen reader support built-in.


diff --git a/doc/accessibility/WAIAriaDoc.vue b/doc/accessibility/WAIAriaDoc.vue
index df8facc00..1d1649b3b 100644
--- a/doc/accessibility/WAIAriaDoc.vue
+++ b/doc/accessibility/WAIAriaDoc.vue
@@ -18,7 +18,7 @@
-
+

A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read by a reader. @@ -31,7 +31,7 @@ -

+

One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of aria-labelledby as a replacement of the label tag with for.


@@ -43,7 +43,7 @@
-
+

However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of p-sr-only @@ -60,7 +60,7 @@ -

+

A working sample is the PrimeVue checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.

diff --git a/doc/theming/ArchitectureDoc.vue b/doc/theming/ArchitectureDoc.vue index 4ef290328..dcf0f3b53 100644 --- a/doc/theming/ArchitectureDoc.vue +++ b/doc/theming/ArchitectureDoc.vue @@ -1,6 +1,6 @@