Skip to content

Commit

Permalink
#5429 for Fieldset
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Nov 29, 2023
1 parent e8a0283 commit 40fe77c
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 56 deletions.
98 changes: 48 additions & 50 deletions components/doc/fieldset/accessibilitydoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,54 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';

export function AccessibilityDoc() {
return (
<DevelopmentSection>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button 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>legend</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>
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button 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>legend</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>
);
}
19 changes: 13 additions & 6 deletions components/lib/fieldset/Fieldset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,13 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
}
});

const onKeyDown = (event) => {
if (event.code === 'Enter' || event.code === 'Space') {
toggle(event);
event.preventDefault();
}
};

const createContent = () => {
const contentProps = mergeProps(
{
Expand All @@ -79,7 +86,6 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
{
ref: contentRef,
id: contentId,
'aria-hidden': collapsed,
role: 'region',
'aria-labelledby': headerId,
className: cx('toggleableContent')
Expand Down Expand Up @@ -136,10 +142,13 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
const togglerProps = mergeProps(
{
id: headerId,
role: 'button',
'aria-expanded': !collapsed,
'aria-controls': contentId,
href: '#' + contentId,
tabIndex: props.toggleable ? null : -1
onKeyDown,
onClick: toggle,
'aria-label': props.legend,
tabIndex: 0
},
ptm('toggler')
);
Expand All @@ -166,10 +175,8 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
const createLegend = () => {
const legendProps = mergeProps(
{
className: cx('legend'),
onClick: toggle
className: cx('legend')
},

ptm('legend')
);

Expand Down

0 comments on commit 40fe77c

Please sign in to comment.