Skip to content

Commit

Permalink
#5429 for Panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Nov 28, 2023
1 parent 9073951 commit 7f88a07
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 51 deletions.
97 changes: 47 additions & 50 deletions components/doc/panel/accessibilitydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,54 @@
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>
Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to
the value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
</p>
<p>
The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.
</p>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the
value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
</p>
<p>
The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.
</p>

<h3>Content Toggle Button 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 to the next the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>shift</i> + <i>tab</i>
</td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</DevelopmentSection>
<h3>Content Toggle Button 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 to the next the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>shift</i> + <i>tab</i>
</td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
);
}
5 changes: 4 additions & 1 deletion components/lib/panel/Panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,9 @@ export const Panel = React.forwardRef((inProps, ref) => {
id: buttonId,
'aria-controls': contentId,
'aria-expanded': !collapsed,
role: 'tab'
type: 'button',
role: 'button',
'aria-label': props.toggleButtonProps && props.toggleButtonProps['aria-label'] ? props.toggleButtonProps['aria-label'] : props.header
},
ptm('toggler')
);
Expand Down Expand Up @@ -161,6 +163,7 @@ export const Panel = React.forwardRef((inProps, ref) => {
iconsElement,
togglerElement,
element: content,
id: idState + '_header',
props,
collapsed
};
Expand Down

0 comments on commit 7f88a07

Please sign in to comment.