fix aria

Author: dev-javascript

src/plugins/moreButtonPlugin/show-more-tabs/api.js

@@ -161,20 +161,10 @@ Object.assign(Api.prototype, {
       ? this.findFirstHiddenTabIndexASC(selectedTabInfo, start, stop)
       : this.findFirstHiddenTabIndexDSCE(selectedTabInfo, start, stop);
   },
-  btnContainerPropsGenerator: function (accessibility) {
+  btnContainerPropsGenerator: function () {
     const {tabClass, showMoreContainerClass} = this.api.optionsManager.setting;
     const className = tabClass + ' ' + showMoreContainerClass;
-    let result = {className, ref: this.btnRef};
-    result =
-      accessibility == true
-        ? Object.assign(result, {
-            role: 'button',
-            'aria-haspopup': 'true',
-            'aria-label': 'More tabs',
-            tabindex: -1,
-          })
-        : result;
-    return result;
+    return {className, ref: this.btnRef};
   },
   btnPropsGenerator: function (hiddenTabIDs, TabsComponent, accessibility) {
     const userButton = this.api.getOption('showMoreButtonComponent');
@@ -188,7 +178,7 @@ Object.assign(Api.prototype, {
       this.api.optionsManager.setting;
     const result = {
       hiddenTabIDs: hiddenTabIDs,
-      containerButtonRef: this.btnRef, //for assigning aria-expanded
+      popupContainerID: this._popupContainerID, //todo
       instance: this.api.userProxy,
       buttonClassName: titleClass + ' ' + showMoreButtonClass,
       TabsComponent,
@@ -199,14 +189,13 @@ Object.assign(Api.prototype, {
         ' ' +
         (this.api.getOption('direction') == 'rtl' ? rtlClass + ' ' : '') +
         showMorePopperClass,
-      popupAriaProps: {},
       btnAriaProps: {},
     };
     if (accessibility) {
-      result.popupAriaProps.role = 'presentation';
-      result.popupAriaProps.id = this._popupContainerID;
-      result.btnAriaProps['aria-controls'] = this._popupContainerID;
-      result.btnAriaProps.tabindex = 0;
+      result.btnAriaProps.tabIndex = 0;
+      result.btnAriaProps.role = 'button';
+      result.btnAriaProps['aria-haspopup'] = 'true';
+      result.btnAriaProps['aria-label'] = 'More tabs'; //todo
     }
     return result;
   },

src/plugins/moreButtonPlugin/show-more-tabs/button/button.js

@@ -1,7 +1,7 @@
 import React, {useState, useCallback, useRef, useEffect, useLayoutEffect} from 'react';
 import PropTypes from 'prop-types';
 export default function Button(getDeps, props) {
-  const {containerButtonRef} = props;
+  const {popupContainerID} = props;
   const {Popper} = getDeps();
   const [open, setOpen] = useState(false);
   const btnRef = useRef();
@@ -18,10 +18,16 @@ export default function Button(getDeps, props) {
     };
   }, []);
   useLayoutEffect(() => {
-    containerButtonRef.current &&
-      props.instance.getOption('accessibility') &&
-      containerButtonRef.current.setAttribute('aria-expanded', open ? true : false);
-  }, [open, containerButtonRef.current]);
+    if (btnRef.current && props.instance.getOption('accessibility')) {
+      if (open) {
+        btnRef.current.setAttribute('aria-expanded', true);
+        btnRef.current.setAttribute('aria-controls', popupContainerID);
+      } else {
+        btnRef.current.setAttribute('aria-expanded', false);
+        btnRef.current.removeAttribute('aria-controls');
+      }
+    }
+  }, [open, btnRef.current]);
   const onClick = useCallback(
     (ev) => {
       ev.stopPropagation();
@@ -50,7 +56,7 @@ export default function Button(getDeps, props) {
           ref={popperRef}
           btnRef={btnRef}
           className={props.popperClassName}
-          ariaProps={props.popupAriaProps}
+          popupContainerID={props.popupContainerID}
         />
       ) : null}
     </>
@@ -62,7 +68,6 @@ Button.propTypes /* remove-proptypes */ = {
   instance: PropTypes.object,
   hiddenTabIDs: PropTypes.string,
   TabsComponent: PropTypes.func,
-  containerButtonRef: PropTypes.element,
-  popupAriaProps: PropTypes.object,
+  popupContainerID: PropTypes.string,
   btnAriaProps: PropTypes.object,
 };

src/plugins/moreButtonPlugin/show-more-tabs/button/popper/popper.js

@@ -2,7 +2,7 @@ import React, {useLayoutEffect} from 'react';
 import PropTypes from 'prop-types';
 export default function Popper(getDeps, props, popperRef) {
   const {createPopper, getPopperMaxHeight, clk} = getDeps();
-  const {TabsComponent, instance, hiddenTabIDs, btnRef, className, ariaProps} = props;
+  const {TabsComponent, instance, hiddenTabIDs, btnRef, className, popupContainerID: tablistID} = props;
   useLayoutEffect(() => {
     popperRef.current.style.maxHeight = getPopperMaxHeight(btnRef.current, 15) + 'px';
     const popperIns = createPopper(btnRef.current, popperRef.current);
@@ -14,12 +14,13 @@ export default function Popper(getDeps, props, popperRef) {
   const openedTabIDs = hiddenTabIDs ? hiddenTabIDs.split(',') : [];
   return (
     <>
-      <div onClick={clk} ref={popperRef} className={className} {...ariaProps}>
+      <div onClick={clk} ref={popperRef} className={className}>
         <TabsComponent
           selectedTabID={selectedTabID}
           openTabIDs={openedTabIDs}
           dir={instance.getOption('direction')}
           isVertical={true}
+          tablistID={tablistID}
         />
       </div>
     </>
@@ -31,5 +32,5 @@ Popper.propTypes /* remove-proptypes */ = {
   instance: PropTypes.object,
   btnRef: PropTypes.object,
   TabsComponent: PropTypes.func,
-  ariaProps: PropTypes.object,
+  popupContainerID: PropTypes.string,
 };

src/plugins/moreButtonPlugin/show-more-tabs/show-more-tabs.js

@@ -34,7 +34,7 @@ export default function ShowMoreTabs(getDeps, props) {
       ? options.showMoreButtonComponent
       : Button;
   return (
-    <div {...ins.btnContainerPropsGenerator(options.accessibility)}>
+    <div {...ins.btnContainerPropsGenerator()}>
       <ButtonComponent {...ins.btnPropsGenerator(hiddenTabIDs, TabsComponent, options.accessibility)} />
     </div>
   );

src/tab/tab.js

@@ -3,43 +3,46 @@ import memomizeTab from './memomizeTab.js';
 export const tabPropsManager = function tabPropsManager(ins, props) {
   const {id, selectedTabID} = props;
   const isSelected = selectedTabID === id;
+  const {disable, title, tooltip} = ins.getTab(id);
   const outputProps = {
     'tab-id': id,
     className: ins.getSetting('tabClass'),
     tabIndex: -1,
+    title: tooltip || title,
   };
   //check if tab is selected
   if (isSelected) {
     outputProps.tabIndex = 0;
     outputProps.className += ' ' + ins.getSetting('selectedClass');
   }
   // check if tab is disable
-  if (ins.getTab(id).disable) {
+  if (disable) {
     outputProps.tabIndex = -1;
     outputProps.className += ' ' + ins.getSetting('disableClass');
   }
   // check if accessibility option is enable
   if (ins.getOption('accessibility')) {
     outputProps.role = 'tab';
+    outputProps.id = ins.getSetting('ariaLabelledbyIdTemplate', id);
     outputProps['aria-controls'] = ins.getSetting('panelIdTemplate', id);
-    outputProps['aria-labelledby'] = ins.getSetting('ariaLabelledbyIdTemplate', id);
+    outputProps['aria-label'] = tooltip || title;
     outputProps['aria-selected'] = outputProps['aria-expanded'] = isSelected;
   }
   return outputProps;
 };
 export const tabInnerPropsManager = function tabInnerPropsManager(ins, props) {
   const {id, selectedTabID} = props;
   const isSelected = selectedTabID == id;
-  const {tooltip, iconClass} = ins.getTab(id);
+  const {iconClass} = ins.getTab(id);
   const outputProps = {
     id,
     isSelected,
     api: ins.userProxy,
     tabProps: {
       'tab-id': id,
       className: ins.getSetting('titleClass'),
-      title: tooltip,
       tabIndex: -1,
+      role: 'presentation',
     },
   };
   // check if there is a iconClass option
@@ -49,11 +52,6 @@ export const tabInnerPropsManager = function tabInnerPropsManager(ins, props) {
       role: 'presentation',
     };
   }
-  // check if accessibility option is enable
-  if (ins.getOption('accessibility')) {
-    outputProps.tabProps.id = ins.getSetting('ariaLabelledbyIdTemplate', id);
-    outputProps.tabProps.role = 'presentation';
-  }
   return outputProps;
 };
 export const closeIconPropsManager = function closeIconPropsManager(ins) {
@@ -62,7 +60,7 @@ export const closeIconPropsManager = function closeIconPropsManager(ins) {
   };
   // check if accessibility option is enable
   if (ins.getOption('accessibility')) {
-    outputProps.role = 'presentation';
+    outputProps.role = 'button';
   }
   return outputProps;
 };

src/tabs/tabs.factory.js

@@ -2,10 +2,10 @@ import React from 'react';
 import {ApiContext} from '../context.js';
 import PropTypes from 'prop-types';
 function TabsComponent(deps, props, ref) {
-  const {openTabIDs, selectedTabID, dir, isVertical} = props;
+  const {openTabIDs, selectedTabID} = props;
   const {TabsPropsManager, Tab} = deps(React.useContext(ApiContext));
   return (
-    <ul {...TabsPropsManager({dir, isVertical})} ref={ref || null}>
+    <ul {...TabsPropsManager(props)} ref={ref || null}>
       {openTabIDs.map((id) => (
         <Tab key={id} id={id} selectedTabID={selectedTabID}></Tab>
       ))}
@@ -18,4 +18,5 @@ TabsComponent.propTypes /* remove-proptypes */ = {
   dir: PropTypes.string,
   isVertical: PropTypes.bool,
   openTabIDs: PropTypes.array,
+  tablistID: PropTypes.string,
 };

src/tabs/tabs.js

@@ -12,6 +12,9 @@ export const TabsPropsManager = function (ins, props) {
   if (ins.getOption('accessibility')) {
     result.role = 'tablist';
   }
+  if (props.tablistID) {
+    result.id = props.tablistID;
+  }
   return result;
 };
 export default forwardRef(