Skip to content

Commit

Permalink
Merge pull request #5657 from primefaces/accessibility
Browse files Browse the repository at this point in the history 
Accessibility Enhancements
  • Loading branch information
@yigitfindikli
yigitfindikli authored Dec 29, 2023
2 parents 1b47b95 + 556e29b commit 85795c5
Show file tree
Hide file tree
Showing 138 changed files with 52,392 additions and 46,181 deletions.
145 changes: 71 additions & 74 deletions components/doc/accordion/accessibilitydoc.js
View file
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>
);
}
81 changes: 39 additions & 42 deletions components/doc/button/accessibilitydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { DevelopmentSection } from '@/components/doc/common/developmentsection';
import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { DocSectionText } from '@/components/doc/common/docsectiontext';

Expand All @@ -17,48 +16,46 @@ export function AccessibilityDoc() {
};

return (
<DevelopmentSection>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the
button is icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
</p>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
</p>

<DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />

<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 to the button.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the button.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the button.</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 to the button.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the button.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the button.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
);
}
31 changes: 14 additions & 17 deletions components/doc/card/accessibilitydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { DevelopmentSection } from '@/components/doc/common/developmentsection';
import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { DocSectionText } from '@/components/doc/common/docsectiontext';

Expand All @@ -12,23 +11,21 @@ export function AccessibilityDoc() {
};

return (
<DevelopmentSection>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
require to use one of the{' '}
<a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
landmark
</a>{' '}
roles like <i>region</i>, you may use the <i>role</i> property.
</p>
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
require to use one of the{' '}
<a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
landmark
</a>{' '}
roles like <i>region</i>, you may use the <i>role</i> property.
</p>

<DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />

<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
</DevelopmentSection>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
);
}
Loading

0 comments on commit 85795c5

Please sign in to comment.