Fix #2864: AccordionTab tabIndex (#3395)

primefaces · Sep 30, 2022 · 7a34f8d · 7a34f8d
1 parent e886383
commit 7a34f8d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/components/doc/accordion/index.js b/components/doc/accordion/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const AccordionDoc = memo(() => {
     const sources = {
@@ -680,6 +680,12 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
                                     <td>null</td>
                                     <td>Style class of the tab content.</td>
                                 </tr>
+                                <tr>
+                                    <td>tabIndex</td>
+                                    <td>number</td>
+                                    <td>null</td>
+                                    <td>Index of the element in tabbing order.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
@@ -76,7 +76,7 @@ export const Accordion = React.forwardRef((props, ref) => {
         );
         const headerId = idState + '_header_' + index;
         const ariaControls = idState + '_content_' + index;
-        const tabIndex = tab.props.disabled ? -1 : null;
+        const tabIndex = tab.props.disabled ? -1 : tab.props.tabIndex;
         const header = tab.props.headerTemplate ? ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : <span className="p-accordion-header-text">{tab.props.header}</span>;
         const icon = IconUtils.getJSXIcon(selected ? props.collapseIcon : props.expandIcon, { className: 'p-accordion-toggle-icon' }, { props, selected });
         const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
@@ -147,15 +147,16 @@ export const Accordion = React.forwardRef((props, ref) => {
 AccordionTab.displayName = 'AccordionTab';
 AccordionTab.defaultProps = {
     __TYPE: 'AccordionTab',
-    header: null,
-    disabled: false,
-    style: null,
     className: null,
-    headerStyle: null,
+    contentClassName: null,
+    contentStyle: null,
+    disabled: false,
+    header: null,
     headerClassName: null,
+    headerStyle: null,
     headerTemplate: null,
-    contentStyle: null,
-    contentClassName: null
+    style: null,
+    tabIndex: 0
 };
 
 Accordion.displayName = 'Accordion';

diff --git a/components/lib/accordion/accordion.d.ts b/components/lib/accordion/accordion.d.ts
@@ -5,16 +5,17 @@ import { IconType } from '../utils';
 type AccordionTabHeaderTemplateType = React.ReactNode | ((props: AccordionTabProps) => React.ReactNode);
 
 interface AccordionTabProps {
-    header?: React.ReactNode;
-    disabled?: boolean;
-    style?: object;
+    children?: React.ReactNode;
     className?: string;
-    headerStyle?: object;
+    contentClassName?: string;
+    contentStyle?: object;
+    disabled?: boolean;
+    header?: React.ReactNode;
     headerClassName?: string;
+    headerStyle?: object;
     headerTemplate?: AccordionTabHeaderTemplateType;
-    contentStyle?: object;
-    contentClassName?: string;
-    children?: React.ReactNode;
+    style?: object;
+    tabIndex: number;
 }
 
 export declare class AccordionTab extends React.Component<AccordionTabProps, any> {}