vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed spacing issues

pull/4615/head
Cagatay Civici 2023-10-15 13:00:23 +03:00
parent 80f7e19d42
commit dd19b8ab69
7 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/styles/layout/_doc.scss
View File

@ -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 {

6
doc/accessibility/FormControlsDoc.vue
View File

@ -10,7 +10,7 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
</div>
<pre v-code><code>
@ -18,7 +18,7 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>
<i>tabindex</i> 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 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
</div>
<pre v-code><code>

2
doc/accessibility/SemanticHTMLDoc.vue
View File

@ -26,7 +26,7 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
</div>
<pre v-code><code>

8
doc/accessibility/WAIAriaDoc.vue
View File

@ -18,7 +18,7 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>
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 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p>
</div>
<pre v-code><code>
@ -43,7 +43,7 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>
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
<i>p-sr-only</i>
@ -60,7 +60,7 @@
</code></pre>
<div class="doc-section-description">
<div class="doc-section-description mt-3">
<p>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.</p>
</div>

2
doc/theming/ArchitectureDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
<p class="notification">
<strong>Note</strong>: In near future, theming architecture of the styled mode will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach.
</p>
<p>

2
doc/theming/SwitchThemesDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
<p class="notification">
Solution below works however there is room for improvement. The upcoming styling api will greatly improve dynamic theme switching ability, eliminates the prerequisites with the introduction of CSS variables and dynamic imports.
</p>
<p>

3
pages/accessibility/index.vue
View File

@ -9,8 +9,7 @@
<div class="doc-main">
<div class="doc-intro">
<h1>Accessibility</h1>
<p>An introduction to accessibility and how it translates to Vue UI Components.</p>
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">PrimeVue has WCAG 2.1 AA level compliancy. Refer to the accessibility documentation of each component for detailed information.</p>
<p>PrimeVue has WCAG 2.1 AA level compliance, refer to the accessibility documentation of each component for detailed information.</p>
</div>
<DocSections :docs="docs" />
</div>