Skip to content

Commit

Permalink
#5429 for splitter
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Nov 28, 2023
1 parent 7f88a07 commit 5d7c73e
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 54 deletions.
101 changes: 49 additions & 52 deletions components/doc/splitter/accessibilitydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,56 @@
import { DevelopmentSection } from '@/components/doc/common/developmentsection';
import { DocSectionText } from '@/components/doc/common/docsectiontext';

export function AccessibilityDoc() {
return (
<DevelopmentSection>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.
</p>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.
</p>

<h3>Keyboard Support</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through the splitter bar.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves a vertical splitter down.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves a vertical splitter up.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves a vertical splitter to the left.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves a vertical splitter to the right.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</DevelopmentSection>
<h3>Keyboard Support</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus through the splitter bar.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves a vertical splitter down.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves a vertical splitter up.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves a vertical splitter to the left.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves a vertical splitter to the right.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
);
}
10 changes: 8 additions & 2 deletions components/lib/splitter/Splitter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const Splitter = React.memo(
const prevPanelElement = React.useRef(null);
const nextPanelElement = React.useRef(null);
const prevPanelSize = React.useRef(null);
const prevSize = React.useRef(null);
const prevPanelSizeNew = React.useRef(null);
const nextPanelSize = React.useRef(null);
const nextPanelSizeNew = React.useRef(null);
Expand Down Expand Up @@ -166,6 +167,7 @@ export const Splitter = React.memo(
nextPanelSizeNew.current = newNextPanelSize;
prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
prevSize.current = parseFloat(newPrevPanelSize).toFixed(4);
}
};

Expand Down Expand Up @@ -226,7 +228,9 @@ export const Splitter = React.memo(
React.useEffect(() => {
const panelElements = [...elementRef.current.children].filter((child) => DomHandler.getAttribute(child, 'data-pc-section') === 'splitterpanel.root');

panelElements.map((panelElement) => {
panelElements.map((panelElement, i) => {
prevSize.current = panelSize(panelSizes, 0);

if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
!isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
panelElement.setAttribute('data-p-splitter-panel-nested', true);
Expand Down Expand Up @@ -259,7 +263,9 @@ export const Splitter = React.memo(

const gutterHandlerProps = mergeProps(
{
className: cx('gutterHandler')
className: cx('gutterHandler'),
'aria-orientation': props.layout,
'aria-valuenow': prevSize.current
},
ptm('gutterHandler')
);
Expand Down

0 comments on commit 5d7c73e

Please sign in to comment.