Skip to content

Commit

Permalink
Cosmetics
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Jul 26, 2023
1 parent 6e0130b commit 4bbee42
Show file tree
Hide file tree
Showing 130 changed files with 1,233 additions and 1,295 deletions.
138 changes: 68 additions & 70 deletions src/app/showcase/doc/accordion/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,75 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<div>
<app-docsectiontext [title]="title" [id]="id">
<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> 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>
</app-docsectiontext>
<div class="doc-tablewrapper">
<table class="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>
template: ` <div>
<app-docsectiontext [title]="title" [id]="id">
<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> 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>
</app-docsectiontext>
<div class="doc-tablewrapper">
<table class="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>
</app-developmentsection>`
</div>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
20 changes: 9 additions & 11 deletions src/app/showcase/doc/avatar/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,16 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
avatars need to be tabbable, <i>tabIndex</i> can be added as well to implement custom key handlers.
</p>
template: ` <app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
avatars need to be tabbable, <i>tabIndex</i> can be added as well to implement custom key handlers.
</p>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</app-docsectiontext>
</app-developmentsection>`
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</app-docsectiontext>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
20 changes: 9 additions & 11 deletions src/app/showcase/doc/badge/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,16 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
<i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabIndex</i> can be added to implement custom key handlers.
</p>
template: ` <app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
<i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabIndex</i> can be added to implement custom key handlers.
</p>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</app-docsectiontext>
</app-developmentsection>`
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</app-docsectiontext>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
19 changes: 8 additions & 11 deletions src/app/showcase/doc/blockui/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,15 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live
regions.
</p>
template: ` <app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
</p>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</app-docsectiontext>
</app-developmentsection>`
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</app-docsectiontext>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
20 changes: 9 additions & 11 deletions src/app/showcase/doc/breadcrumb/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,16 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
</p>
template: ` <app-docsectiontext [title]="title" [id]="id">
<h3>Screen Reader</h3>
<p>
Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
</p>
<h3>Keyboard Support</h3>
<p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
</app-docsectiontext>
</app-developmentsection>`
<h3>Keyboard Support</h3>
<p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
</app-docsectiontext>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
26 changes: 12 additions & 14 deletions src/app/showcase/doc/card/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,18 @@ import { Code } from '../../domain/code';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<app-docsectiontext [title]="title" [id]="id">
<div class="doc-section-description">
<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>
<app-code [code]="code" [hideToggleCode]="true"></app-code>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</div>
</app-docsectiontext>
</app-developmentsection>`
template: ` <app-docsectiontext [title]="title" [id]="id">
<div class="doc-section-description">
<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>
<app-code [code]="code" [hideToggleCode]="true"></app-code>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</div>
</app-docsectiontext>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
64 changes: 31 additions & 33 deletions src/app/showcase/doc/chip/accessibilitydoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,38 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'accessibility-doc',
template: ` <app-developmentsection>
<div>
<app-docsectiontext [title]="title" [id]="id">
<div class="doc-section-description">
<h3>Screen Reader</h3>
<p>
Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips
have a <i>tabindex</i> and focusable with the tab key.
</p>
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>backspace</i></td>
<td>Hides removable.</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Hides removable.</td>
</tr>
</tbody>
</table>
</div>
template: ` <div>
<app-docsectiontext [title]="title" [id]="id">
<div class="doc-section-description">
<h3>Screen Reader</h3>
<p>
Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have
a <i>tabindex</i> and focusable with the tab key.
</p>
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>backspace</i></td>
<td>Hides removable.</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Hides removable.</td>
</tr>
</tbody>
</table>
</div>
</app-docsectiontext>
</div>
</app-developmentsection>`
</div>
</app-docsectiontext>
</div>`
})
export class AccessibilityDoc {
@Input() id: string;
Expand Down
Loading

0 comments on commit 4bbee42

Please sign in to comment.