Locale paths fixes
parent
fd03306847
commit
11b41a9326
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
||||||
|
|
|
@ -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,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>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue