Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input accessibility #5908

Merged
merged 20 commits into from
Feb 6, 2024
Merged

Input accessibility #5908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a28b7ed
Add Slider accessibility
gucal Feb 5, 2024
e61bc04
Add Knob accessibility
gucal Feb 5, 2024
47af437
Add Inputnumber accessibility
gucal Feb 5, 2024
1f4f706
Add ToggleButton accessibility
gucal Feb 5, 2024
8acec9a
Add tristatecheckbox accessibility
gucal Feb 5, 2024
2abad33
Add Checkbox accessibility
gucal Feb 5, 2024
019a282
Add InputSwitch accessibility
gucal Feb 5, 2024
3544224
Add radiobutton accessibility
gucal Feb 5, 2024
e9461bc
Add SelectButton accessibility
gucal Feb 5, 2024
53d49b6
Update rating accessibility
gucal Feb 5, 2024
0578eb0
Add chips accessibility
gucal Feb 5, 2024
351c47a
add listbox accessibility
gucal Feb 5, 2024
d77cc39
Add Dropdown accessibility
gucal Feb 5, 2024
3231aac
Dropdown keydown fix
gucal Feb 6, 2024
d046dc5
Add Multi select accessibility
gucal Feb 6, 2024
84d6587
Listbox keyboard support change
gucal Feb 6, 2024
f11f6a1
Update listbox
gucal Feb 6, 2024
e72986d
Update dropdown
gucal Feb 6, 2024
c24e3e0
Update multiselect
gucal Feb 6, 2024
286d331
Update accessibility docs
gucal Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 71 additions & 74 deletions components/doc/accordion/accessibilitydoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,78 @@
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>
Accordion header elements have a <i>button</i> role and use <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 a header element 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>headerProps</i> property.
</p>
<p>
The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.
</p>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Accordion header elements have a <i>button</i> role and use <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 a header element 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>headerProps</i> property.
</p>
<p>
The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.
</p>

<h3>Header 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>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next header.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</DevelopmentSection>
<h3>Header 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>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next header.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
);
}
Loading
Loading