a11y for breadcrumb

primefaces · May 13, 2022 · c28a05a · c28a05a
1 parent 6cdaf65
commit c28a05a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/components/doc/breadcrumb/index.js b/components/doc/breadcrumb/index.js
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { TabView, TabPanel } from '../../lib/tabview/TabView';
 import { useLiveEditorTabs } from '../common/liveeditor';
 import { CodeHighlight } from '../common/codehighlight';
+import { DevelopmentSection } from '../common/developmentsection';
 
 const BreadCrumbDoc = memo(() => {
 
@@ -248,6 +249,16 @@ const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact'
                         </table>
                     </div>
 
+                    <h5>Accessibility</h5>
+                    <DevelopmentSection>
+                    <h6>Screen Reader</h6>
+                    <p>Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used
+                    where the list item separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.</p>
+
+                    <h6>Keyboard Support</h6>
+                    <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
+                </DevelopmentSection>
+
                     <h5>Dependencies</h5>
                     <p>None.</p>
                 </TabPanel>

diff --git a/components/doc/contextmenu/index.js b/components/doc/contextmenu/index.js
@@ -968,8 +968,8 @@ const items = [
                         </table>
                     </div>
 
-                    <DevelopmentSection>
                     <h5>Accessibility</h5>
+                    <DevelopmentSection>
                     <h6>Screen Reader</h6>
                     <p>ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role
                     whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a context menu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined 

diff --git a/components/doc/menubar/index.js b/components/doc/menubar/index.js
@@ -882,8 +882,8 @@ const items = [
                         </table>
                     </div>
 
-                <DevelopmentSection>
                     <h5>Accessibility</h5>
+                <DevelopmentSection>
                     <h6>Screen Reader</h6>
                     <p>Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role
                     whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a menu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined 

diff --git a/components/doc/tieredmenu/index.js b/components/doc/tieredmenu/index.js
@@ -975,8 +975,8 @@ const items = [
                         </table>
                     </div>
 
-                    <DevelopmentSection>
                     <h5>Accessibility</h5>
+                    <DevelopmentSection>
                     <h6>Screen Reader</h6>
                     <p>TieredMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role
                     whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a tiered menu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined