Fixed #690 - Improve Listbox Accessibility

primefaces · Dec 19, 2018 · 05f9b10 · 05f9b10
1 parent a59b1ff
commit 05f9b10
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/src/components/listbox/ListBox.js b/src/components/listbox/ListBox.js
@@ -22,6 +22,7 @@ export class ListBox extends Component {
         multiple: false,
         metaKeySelection: false,
         filter: false,
+        tabIndex: '0',
         tooltip: null,
         tooltipOptions: null,
         onChange: null
@@ -40,6 +41,7 @@ export class ListBox extends Component {
         multiple: PropTypes.bool,
         metaKeySelection: PropTypes.bool,
         filter: PropTypes.bool,
+        tabIndex: PropTypes.string,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
         onChange: PropTypes.func
@@ -264,8 +266,10 @@ export class ListBox extends Component {
             items = items.map((option, index) => {
                 let optionLabel = this.getOptionLabel(option);
 
-                return <ListBoxItem key={optionLabel} label={optionLabel} option={option} template={this.props.itemTemplate} selected={this.isSelected(option)}
-                        onClick={this.onOptionClick} onTouchEnd={(e) => this.onOptionTouchEnd(e, option, index)} />;
+                return (
+                    <ListBoxItem key={optionLabel} label={optionLabel} option={option} template={this.props.itemTemplate} selected={this.isSelected(option)}
+                        onClick={this.onOptionClick} onTouchEnd={(e) => this.onOptionTouchEnd(e, option, index)} tabIndex={this.props.tabIndex} />
+                );
             });
         }
 

diff --git a/src/components/listbox/ListBoxItem.js b/src/components/listbox/ListBoxItem.js
@@ -1,22 +1,25 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import DomHandler from '../utils/DomHandler';
 
 export class ListBoxItem extends Component {
 
     static defaultProps = {
         option: null,
         label: null,
         selected: false,
+        tabIndex: null,
         onClick: null,
         onTouchEnd: null,
-        template: null
+        template: null,
     }
 
     static propTypes = {
         option: PropTypes.any,
         label: PropTypes.string,
         selected: PropTypes.bool,
+        tabIndex: PropTypes.string,
         onClick: PropTypes.func,
         onTouchEnd: PropTypes.func,
         template: PropTypes.func
@@ -26,6 +29,7 @@ export class ListBoxItem extends Component {
         super();
         this.onClick = this.onClick.bind(this);
         this.onTouchEnd = this.onTouchEnd.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
     }
 
     onClick(event) {
@@ -47,15 +51,65 @@ export class ListBoxItem extends Component {
             });
         }
     }
+
+    onKeyDown(event) {
+        let item = event.currentTarget;
+
+        switch(event.which) {
+            //down
+            case 40:
+                var nextItem = this.findNextItem(item);
+                if(nextItem) {
+                    nextItem.focus();
+                }
+
+                event.preventDefault();
+            break;
+
+            //up
+            case 38:
+                var prevItem = this.findPrevItem(item);
+                if(prevItem) {
+                    prevItem.focus();
+                }
+
+                event.preventDefault();
+            break;
+
+            //enter
+            case 13:
+                this.onClick(event);
+                event.preventDefault();
+            break;
+        }
+    }
+
+    findNextItem(item) {
+        let nextItem = item.nextElementSibling;
+
+        if (nextItem)
+            return DomHandler.hasClass(nextItem, 'p-disabled') ? this.findNextItem(nextItem) : nextItem;
+        else
+            return null;
+    }
+
+    findPrevItem(item) {
+        let prevItem = item.previousElementSibling;
+
+        if (prevItem)
+            return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
+        else
+            return null;
+    }
 
     render() {
         let className = classNames('p-listbox-item', {'p-highlight': this.props.selected});
         let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
 
         return (
-               <li className={className} onClick={this.onClick} onTouchEnd={this.onTouchEnd}>
-                   {content}
-               </li>
+            <li className={className} onClick={this.onClick} onTouchEnd={this.onTouchEnd} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex}>
+                {content}
+            </li>
         );
     }
 }