Fixed #862 - Accessibility issues in Tooltip and Dialog components

primefaces · Feb 26, 2021 · 50cd9dc · 50cd9dc
1 parent 1c14ddd
commit 50cd9dc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
@@ -550,7 +550,7 @@ export class Dialog extends Component {
         let contentClassName = classNames('p-dialog-content', this.props.contentClassName)
 
         return (
-            <div ref={el => this.contentEl = el} className={contentClassName} style={this.props.contentStyle}>
+            <div id={this.id + '_content'} ref={el => this.contentEl = el} className={contentClassName} style={this.props.contentStyle}>
                 {this.props.children}
             </div>
         );
@@ -598,7 +598,7 @@ export class Dialog extends Component {
                 <CSSTransition nodeRef={this.dialogRef} classNames="p-dialog" timeout={transitionTimeout} in={this.state.visible} unmountOnExit
                     onEntered={this.onEntered} onExited={this.onExited}>
                     <div ref={this.dialogRef} id={this.id} className={className} style={this.props.style}
-                         aria-labelledby={this.id + '_header'} role="dialog" aria-modal={this.props.model}>
+                        role="dialog" aria-labelledby={this.id + '_header'} aria-describedby={this.id + '_content'} aria-modal={this.props.model}>
                         {header}
                         {content}
                         {footer}

diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
@@ -38,6 +38,7 @@ export function tip(props) {
 export class Tooltip extends Component {
 
     static defaultProps = {
+        id: null,
         target: null,
         content: null,
         disabled: false,
@@ -65,6 +66,7 @@ export class Tooltip extends Component {
     }
 
     static propTypes = {
+        id: PropTypes.string,
         target: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.array]),
         content: PropTypes.string,
         disabled: PropTypes.bool,
@@ -449,7 +451,7 @@ export class Tooltip extends Component {
         }, this.props.className);
 
         return (
-            <div ref={(el) => this.containerEl = el} className={tooltipClass} style={this.props.style}>
+            <div id={this.props.id} ref={(el) => this.containerEl = el} className={tooltipClass} style={this.props.style} role="tooltip" aria-hidden={this.state.visible}>
                 <div className="p-tooltip-arrow"></div>
                 <div ref={(el) => this.tooltipTextEl = el} className="p-tooltip-text"></div>
             </div>

diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
@@ -123,7 +123,7 @@ export default class DomHandler {
     }
 
     static addMultipleClasses(element, className) {
-        if (element) {
+        if (element && className) {
             if (element.classList) {
                 let styles = className.split(' ');
                 for (let i = 0; i < styles.length; i++) {
@@ -141,7 +141,7 @@ export default class DomHandler {
     }
 
     static addClass(element, className) {
-        if (element) {
+        if (element && className) {
             if (element.classList)
                 element.classList.add(className);
             else
@@ -150,7 +150,7 @@ export default class DomHandler {
     }
 
     static removeClass(element, className) {
-        if (element) {
+        if (element && className) {
             if (element.classList)
                 element.classList.remove(className);
             else