diff --git a/components/doc/accordion/index.js b/components/doc/accordion/index.js index a6287b037c..fd8a7e9cf4 100644 --- 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'; null Style class of the tab content. + + tabIndex + number + null + Index of the element in tabbing order. + diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index 1ad840fc0e..31079da066 100644 --- 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) : {tab.props.header}; 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 index 48a6a27062..2b7d6bf9f1 100644 --- 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 {}