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>
<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 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 <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
label to be able to notify users about the current value. appended to the label to be able to notify users about the current value.
</p> </p>
<p> <p>

2
doc/calendar/LocaleDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
</template> </template>

12
doc/carousel/AccessibilityDoc.vue
View File

@ -7,16 +7,18 @@
</p> </p>
<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 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
item. Inactive slides are hidden from the readers with <i>aria-hidden</i>. <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p> </p>
<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 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
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>. 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>
<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> <h3>Next/Prev Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

4
doc/datatable/AccessibilityDoc.vue
View File

@ -9,12 +9,12 @@
<p> <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 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>
<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 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>
<p> <p>

2
doc/dataview/AccessibilityDoc.vue
View File

@ -3,7 +3,7 @@
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <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 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>
<p>Refer to <NuxtLink to="/paginator">paginator</NuxtLink> accessibility documentation for the paginator of the component.</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>
<p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p> <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
<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 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
override the default <i>aria-label</i>. element and override the default <i>aria-label</i>.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

15
doc/galleria/AccessibilityDoc.vue
View File

@ -7,21 +7,24 @@
</p> </p>
<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 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
item. Inactive slides are hidden from the readers with <i>aria-hidden</i>. <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p> </p>
<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 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
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>. 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>
<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 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>
<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> <h3>Next/Prev Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

4
doc/image/AccessibilityDoc.vue
View File

@ -2,13 +2,13 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <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. you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
</p> </p>
<p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</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> <h3>ButtonBar Keyboard Support</h3>
<p>When preview is activated, close button receives the initial focus.</p> <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>
<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 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
override the default <i>aria-label</i>. element and override the default <i>aria-label</i>.
</p> </p>
<h3>Close Button Keyboard Support</h3> <h3>Close Button Keyboard Support</h3>

4
doc/menubar/AccessibilityDoc.vue
View File

@ -9,8 +9,8 @@
<p> <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 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 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
<i>aria-label</i>. as the <i>aria-label</i>.
</p> </p>
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>

4
doc/message/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p> </p>
<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 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
override the default <i>aria-label</i>. element and override the default <i>aria-label</i>.
</p> </p>
<h3>Close Button Keyboard Support</h3> <h3>Close Button Keyboard Support</h3>

4
doc/multiselect/AccessibilityDoc.vue
View File

@ -9,12 +9,12 @@
<p> <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 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>
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</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" /> <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

4
doc/orderlist/AccessibilityDoc.vue
View File

@ -7,8 +7,8 @@
</p> </p>
<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 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 <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
the default <i>aria-label</i> attributes. like overriding the default <i>aria-label</i> attributes.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

11
doc/paginator/AccessibilityDoc.vue
View File

@ -5,21 +5,24 @@
<p> <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 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>
<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>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
<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 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>
<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 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> </p>
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>

6
doc/picklist/AccessibilityDoc.vue
View File

@ -7,9 +7,9 @@
</p> </p>
<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>, 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>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>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>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i> <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>,
<i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes. <i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <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"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <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. <i>aria</i> property.
</p> </p>

4
doc/scrolltop/AccessibilityDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <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 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
attribute is passed to the button element implicitly. any valid attribute is passed to the button element implicitly.
</p> </p>
<h3>Keyboard Support</h3> <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>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> <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 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
override the default <i>aria-label</i>. element and override the default <i>aria-label</i>.
</p> </p>
<h3>Close Button Keyboard Support</h3> <h3>Close Button Keyboard Support</h3>

2
doc/tristatecheckbox/AccessibilityDoc.vue
View File

@ -4,7 +4,7 @@
<p> <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 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 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> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <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="flex flex-column w-full gap-5 justify-content-start xl:w-24rem z-1">
<div class="box p-4"> <div class="box p-4">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'"> <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>
<div class="flex align-items-center mb-4"> <div class="flex align-items-center mb-4">
<div class="flex flex-column"> <div class="flex flex-column">