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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/3711/head
Cagatay Civici 2023-03-08 14:32:41 +03:00
parent db8b3f19e6 11b41a9326
commit 6912787609
20 changed files with 53 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/calendar/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p>
<p>
The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
<i>chooseDate</i> key of the aria property from the <NuxtLink to="/locale">locale</NuxtLink> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended to the
label to be able to notify users about the current value.
<i>chooseDate</i> key of the aria property from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and
appended to the label to be able to notify users about the current value.
</p>
<p>

2
doc/calendar/LocaleDoc.vue
View File

@ -1,5 +1,5 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Locale for different languages and formats is defined globally, refer to the <NuxtLink to="/locale">PrimeVue Locale</NuxtLink> configuration for more information.</p>
<p>Locale for different languages and formats is defined globally, refer to the <NuxtLink to="/configuration/#locale">PrimeVue Locale</NuxtLink> configuration for more information.</p>
</DocSectionText>
</template>

12
doc/carousel/AccessibilityDoc.vue
View File

@ -7,16 +7,18 @@
</p>
<p>
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the
item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. Similarly <i>aria.slide</i> is used as the
<i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p>
<p>
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <NuxtLink to="/locale">locale</NuxtLink> API by default
respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by
default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
</p>
<p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <NuxtLink to="/locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i>.</p>
<p>
Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i>.
</p>
<h3>Next/Prev Keyboard Support</h3>
<div class="doc-tablewrapper">

4
doc/datatable/AccessibilityDoc.vue
View File

@ -9,12 +9,12 @@
<p>
Built-in checkbox and radiobutton components for row selection use <i>checkbox</i> and <i>radiobutton</i>. The label to describe them is retrieved from the <i>aria.selectRow</i> and <i>aria.unselectRow</i> properties of the
<NuxtLink to="/locale">locale</NuxtLink> API. Similarly header checkbox uses <i>selectAll</i> and <i>unselectAll</i> keys. When a row is selected, <i>aria-selected</i> is set to true on a row.
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API. Similarly header checkbox uses <i>selectAll</i> and <i>unselectAll</i> keys. When a row is selected, <i>aria-selected</i> is set to true on a row.
</p>
<p>
The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of the
<NuxtLink to="/locale">locale</NuxtLink> API.
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
</p>
<p>

2
doc/dataview/AccessibilityDoc.vue
View File

@ -3,7 +3,7 @@
<h3>Screen Reader</h3>
<p>
The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <NuxtLink to="/locale">locale</NuxtLink> API respectively.
derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API respectively.
</p>
<p>Refer to <NuxtLink to="/paginator">paginator</NuxtLink> accessibility documentation for the paginator of the component.</p>

4
doc/dialog/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p>
<p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
<p>
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the element and
override the default <i>aria-label</i>.
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the
element and override the default <i>aria-label</i>.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

15
doc/galleria/AccessibilityDoc.vue
View File

@ -7,21 +7,24 @@
</p>
<p>
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the
item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. Similarly <i>aria.slide</i> is used as the
<i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p>
<p>
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <NuxtLink to="/locale">locale</NuxtLink> API by default
respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by
default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
</p>
<p>
Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes. The
<i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <NuxtLink to="/locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i>.
<i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i>.
</p>
<p>In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API.</p>
<p>
In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
</p>
<h3>Next/Prev Keyboard Support</h3>
<div class="doc-tablewrapper">

4
doc/image/AccessibilityDoc.vue
View File

@ -2,13 +2,13 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, with <i>previewButtonProps</i>
The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, with <i>previewButtonProps</i>
you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
</p>
<p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
<p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <NuxtLink to="/locale">locale</NuxtLink> API as <i>aria-label</i>.</p>
<p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API as <i>aria-label</i>.</p>
<h3>ButtonBar Keyboard Support</h3>
<p>When preview is activated, close button receives the initial focus.</p>

4
doc/inlinemessage/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p>
<p>
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the element and
override the default <i>aria-label</i>.
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the
element and override the default <i>aria-label</i>.
</p>
<h3>Close Button Keyboard Support</h3>

4
doc/menubar/AccessibilityDoc.vue
View File

@ -9,8 +9,8 @@
<p>
In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe the
button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the
<i>aria-label</i>.
button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/configuration/#locale">locale</router-link> API
as the <i>aria-label</i>.
</p>
<h3>Keyboard Support</h3>

4
doc/message/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p>
<p>
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the element and
override the default <i>aria-label</i>.
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the
element and override the default <i>aria-label</i>.
</p>
<h3>Close Button Keyboard Support</h3>

4
doc/multiselect/AccessibilityDoc.vue
View File

@ -9,12 +9,12 @@
<p>
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
<NuxtLink to="/locale">locale</NuxtLink> API.
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
</p>
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
<p>Close button uses <i>close</i> key of the <i>aria</i> property from the <NuxtLink to="/locale">locale</NuxtLink> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
<p>Close button uses <i>close</i> key of the <i>aria</i> property from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

4
doc/orderlist/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p>
<p>
Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
<NuxtLink to="/locale">locale</NuxtLink> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like overriding
the default <i>aria-label</i> attributes.
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons
like overriding the default <i>aria-label</i> attributes.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

11
doc/paginator/AccessibilityDoc.vue
View File

@ -5,21 +5,24 @@
<p>
First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
<NuxtLink to="/locale">locale</NuxtLink> API respectively.
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API respectively.
</p>
<p>Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <NuxtLink to="/locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i> set to "page" as well.</p>
<p>
Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. Current page is marked with <i>aria-current</i> set to
"page" as well.
</p>
<p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
<p>
Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
<i>aria.rowsPerPageLabel</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API.
<i>aria.rowsPerPageLabel</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
</p>
<p>
Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
the <i>aria.jumpToPageDropdownLabel</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API.
the <i>aria.jumpToPageDropdownLabel</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
</p>
<h3>Keyboard Support</h3>

6
doc/picklist/AccessibilityDoc.vue
View File

@ -7,9 +7,9 @@
</p>
<p>
Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveToTarget</i>, <i>aria.moveAllToTarget</i>,
<i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <NuxtLink to="/locale">locale</NuxtLink> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i>,
<i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i> <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>, <i>moveToSourceProps</i> and
<i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
<i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>,
<i>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i> <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>,
<i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

2
doc/rating/AccessibilityDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <NuxtLink to="/locale">locale</NuxtLink> API via <i>star</i> and <i>stars</i> of the
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API via <i>star</i> and <i>stars</i> of the
<i>aria</i> property.
</p>

4
doc/scrolltop/AccessibilityDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use your own aria roles and attributes as any valid
attribute is passed to the button element implicitly.
ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use your own aria roles and attributes as
any valid attribute is passed to the button element implicitly.
</p>
<h3>Keyboard Support</h3>

4
doc/toast/AccessibilityDoc.vue
View File

@ -4,8 +4,8 @@
<p>Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true".</p>
<p>
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the element and
override the default <i>aria-label</i>.
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the
element and override the default <i>aria-label</i>.
</p>
<h3>Close Button Keyboard Support</h3>

2
doc/tristatecheckbox/AccessibilityDoc.vue
View File

@ -4,7 +4,7 @@
<p>
TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with <i>aria-live</i> attribute
that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the
<NuxtLink to="/locale">locale</NuxtLink> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

2
pages/landing/ComponentSection.vue
View File

@ -72,7 +72,7 @@
<div class="flex flex-column w-full gap-5 justify-content-start xl:w-24rem z-1">
<div class="box p-4">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
<img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
</div>
<div class="flex align-items-center mb-4">
<div class="flex flex-column">