Merge branch 'master' into next-1215

components/doc/autocomplete/index.js

@@ -1155,9 +1155,9 @@ itemTemplate(item) {
                     <h5>Accessibility</h5>
                     <h6>Screen Reader</h6>
                     <p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role
-                    in addition to <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-owns</i> and <i>aria-activedescendant</i> attribute is used
+                    in addition to <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used
                     to instruct screen reader which option to read during keyboard navigation within the popup list.</p>
-                    <p>The popup list has an id that refers to the <i>aria-owns</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input element.</p>
+                    <p>The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input element.</p>
 <CodeHighlight>
 {`
 <label htmlFor="ac1">Username</label>

components/doc/avatar/index.js

@@ -516,7 +516,7 @@ import { AvatarGroup } from 'primereact/avatargroup';
 </CodeHighlight>
 
                     <h5>Properties of Avatar</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

components/doc/badge/index.js

@@ -233,7 +233,7 @@ import { Badge } from 'primereact/badge';
 `}
 </CodeHighlight>
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

components/doc/blockui/index.js

@@ -380,7 +380,7 @@ export const BlockUIDemo = () => {
 </CodeHighlight>
 
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

components/doc/divider/index.js

@@ -717,7 +717,7 @@ import { Divider } from 'primereact/divider';
 `}
 </CodeHighlight>
             <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
             <div className="doc-tablewrapper">
                 <table className="doc-table">
                     <thead>

components/doc/dock/index.js

@@ -1552,7 +1552,7 @@ export const DockDemo = () => {
                     <p>Dock uses the common MenuModel API to define the items, visit <Link href="/menumodel">MenuModel API</Link> for details.</p>
 
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

components/doc/keyfilter/index.js

@@ -1,4 +1,5 @@
 import React, { memo } from 'react';
+import Link from 'next/link';
 import { TabView, TabPanel } from '../../lib/tabview/TabView';
 import { useLiveEditorTabs } from '../common/liveeditor';
 import { CodeHighlight } from '../common/codehighlight';
@@ -265,6 +266,9 @@ import { InputText } from 'primereact/inputtext';
 `}
 </CodeHighlight>
 
+                    <h5>Accessibility</h5>
+                    <p>Refer to <Link href="/inputtext">InputText</Link> for accessibility as KeyFilter is a built-in add-on of the InputText.</p>
+
                     <h5>Dependencies</h5>
                     <p>None.</p>
                 </TabPanel>

components/doc/listbox/index.js

@@ -917,7 +917,7 @@ const groupedCities = [
                             <tbody>
                                 <tr>
                                     <td><i>tab</i></td>
-                                    <td>Moves focus to the first selected option, if there is none first option receives the focus.</td>
+                                    <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
                                 </tr>
                                 <tr>
                                     <td><i>up arrow</i></td>
@@ -945,11 +945,11 @@ const groupedCities = [
                                 </tr>
                                 <tr>
                                     <td><i>shift</i> + <i>down arrow</i></td>
-                                    <td>Moves focus to the next option and toggle the selection state.</td>
+                                    <td>Moves focus to the next option and toggles the selection state.</td>
                                 </tr>
                                 <tr>
                                     <td><i>shift</i> + <i>up arrow</i></td>
-                                    <td>Moves focus to the previous option and toggle the selection state.</td>
+                                    <td>Moves focus to the previous option and toggles the selection state.</td>
                                 </tr>
                                 <tr>
                                     <td><i>shift</i> + <i>space</i></td>
@@ -965,7 +965,7 @@ const groupedCities = [
                                 </tr>
                                 <tr>
                                     <td><i>control</i> + <i>a</i></td>
-                                    <td>Selects all options</td>
+                                    <td>Selects all options.</td>
                                 </tr>
                             </tbody>
                         </table>

components/doc/mention/index.js

@@ -818,6 +818,66 @@ const onSearch = (event) => {
                         </table>
                     </div>
 
+                    <h5>Accessibility</h5>
+                    <h6>Screen Reader</h6>
+                    <p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role
+                    in addition to <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used
+                    to instruct screen reader which option to read during keyboard navigation within the popup list.</p>
+                    <p>The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input element.</p>
+<CodeHighlight>
+{`
+<label htmlFor="men1">Username</label>
+<Mention inputId="men1" />
+
+<span id="men2">Email</span>
+<Mention aria-labelledby="men2" />
+
+<Mention aria-label="City" />
+`}
+</CodeHighlight>
+                    <h6>Keyboard Support</h6>
+                    <div className="doc-tablewrapper">
+                        <table className="doc-table">
+                            <thead>
+                                <tr>
+                                    <th>Key</th>
+                                    <th>Function</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><i>tab</i></td>
+                                    <td>Moves focus to the input element when popup is not visible. 
+                                        If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>up arrow</i></td>
+                                    <td>Highlights the previous item if popup is visible.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>down arrow</i></td>
+                                    <td>Highlights the next item if popup is visible.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>enter</i></td>
+                                    <td>Selects the highlighted item and closes the popup if popup is visible.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>home</i></td>
+                                    <td>Highlights the first item if popup is visible.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>end</i></td>
+                                    <td>Highlights the last item if popup is visible.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>escape</i></td>
+                                    <td>Hides the popup.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
                     <h5>Dependencies</h5>
                     <p>None.</p>
 

components/doc/password/index.js

@@ -474,6 +474,43 @@ import { Password } from 'primereact/password';
                         </table>
                     </div>
 
+                    <h5>Accessibility</h5>
+                    <h6>Screen Reader</h6>
+                    <p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader
+                    is notified about the changes to the strength of the password using a section that has <i>aria-live</i> while typing.</p>
+<CodeHighlight>
+{`
+<label htmlFor="pwd1">Password</label>
+<Password id="pwd1" />
+
+<span id="pwd1">Password</span>
+<Password aria-labelledby="pwd2" />
+
+<Password aria-label="Password"/>
+`}
+</CodeHighlight>
+                    <h6>Keyboard Support</h6>
+                    <div className="doc-tablewrapper">
+                        <table className="doc-table">
+                            <thead>
+                                <tr>
+                                    <th>Key</th>
+                                    <th>Function</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><i>tab</i></td>
+                                    <td>Moves focus to the input.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>escape</i></td>
+                                    <td>Hides the strength meter if open.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
                     <h5>Dependencies</h5>
                     <p>None.</p>
                 </TabPanel>

components/doc/progressbar/index.js

@@ -313,6 +313,7 @@ import { ProgressBar } from 'primereact/progressbar';
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>
@@ -416,11 +417,26 @@ import { ProgressBar } from 'primereact/progressbar';
                             </tbody>
                         </table>
 
-                        <h5>Dependencies</h5>
-                        <p>None.</p>
-                    </div>
-                </TabPanel>
+                    <h5>Accessibility</h5>
+                    <h6>Screen Reader</h6>
+                    <p>ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
+                    <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
+<CodeHighlight>
+{`
+<span id="label_status">Status</span>
+<ProgressBar aria-labelledby="label_status" />
+
+<ProgressBar aria-label="Status" />
+`}
+</CodeHighlight>
+
+                    <h6>Keyboard Support</h6>
+                    <p>Not applicable.</p>
 
+                    <h5>Dependencies</h5>
+                    <p>None.</p>
+                </div>
+                </TabPanel>
                 {
                     useLiveEditorTabs({ name: 'ProgressBarDemo', sources: sources })
                 }

components/doc/radiobutton/index.js

@@ -426,7 +426,7 @@ import { RadioButton } from 'primereact/radiobutton';
                                             <i>down arrow</i>
                                         </span>
                                     </td>
-                                    <td>Moves focus to the previous radio button, if there is none then first radio button receives the focus.</td>
+                                    <td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
                                 </tr>
                                 <tr>
                                     <td><i>space</i></td>

components/doc/rating/index.js

@@ -1,4 +1,5 @@
 import React, { memo } from 'react';
+import Link from 'next/link';
 import { TabView, TabPanel } from '../../lib/tabview/TabView';
 import { useLiveEditorTabs } from '../common/liveeditor';
 import { CodeHighlight } from '../common/codehighlight';
@@ -316,6 +317,51 @@ import { Rating } from 'primereact/rating';
                         </table>
                     </div>
 
+                    <h5>Accessibility</h5>
+                    <h6>Screen Reader</h6>
+                    <p>Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <Link href="/theming">locale</Link> API via <i>star</i> and <i>stars</i> of the <i>aria</i> property.</p>
+
+                    <h6>Keyboard Support</h6>
+                    <p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
+                    <div className="doc-tablewrapper">
+                        <table className="doc-table">
+                            <thead>
+                                <tr>
+                                    <th>Key</th>
+                                    <th>Function</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><i>tab</i></td>
+                                    <td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span className="inline-flex flex-column">
+                                            <i className="mb-1">left arrow</i>
+                                            <i>up arrow</i>
+                                        </span>
+                                    </td>
+                                    <td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <span className="inline-flex flex-column">
+                                            <i className="mb-1">right arrow</i>
+                                            <i>down arrow</i>
+                                        </span>
+                                    </td>
+                                    <td>Moves focus to the next star, if there is none then first star receives the focus.</td>
+                                </tr>
+                                <tr>
+                                    <td><i>space</i></td>
+                                    <td>If the focused star does not represent the value, changes the value to the star value.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
                     <h5>Dependencies</h5>
                     <p>None.</p>
                 </TabPanel>

components/doc/scrolltop/index.js

@@ -243,7 +243,7 @@ import { ScrollTop } from 'primereact/scrolltop';
 </CodeHighlight>
 
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

components/doc/skeleton/index.js

@@ -640,7 +640,7 @@ import { Skeleton } from 'primereact/skeleton';
 `}
 </CodeHighlight>
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

components/doc/speeddial/index.js

@@ -597,7 +597,7 @@ export const SpeedDialDemo = () => {
                     <p>Specifies the opening direction of actions. For the <strong>linear</strong> and <strong>semi-circle</strong> types; <i>up</i>, <i>down</i>, <i>left</i> and <i>right</i>. For the <strong>quarter-circle</strong> type; <i>up-left</i>, <i>up-right</i>, <i>down-left</i> and <i>down-right</i>.</p>
 
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                    <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>