Skip to content

Commit

Permalink
Fix typo
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Nov 30, 2023
1 parent d49a6e4 commit c79a252
Show file tree
Hide file tree
Showing 7 changed files with 20 additions and 20 deletions.
2 changes: 1 addition & 1 deletion src/app/showcase/doc/accessibility/formcontrolsdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class FormControlsDoc {
};

code4: Code = {
html: `<label htmlFor="myinput">Username:</label>
html: `<label for="myinput">Username:</label>
<input id="myinput" type="text" name="username" />`
};
}
2 changes: 1 addition & 1 deletion src/app/showcase/doc/accessibility/waiariadoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { Code } from '../../domain/code';
be read by a reader.
</p>
<app-code [code]="code2" [hideToggleCode]="true"></app-code>
<p class="doc-section-description mt-3">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.</p>
<p class="doc-section-description mt-3">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with for.</p>
<app-code [code]="code3" [hideToggleCode]="true"></app-code>
<p class="doc-section-description mt-3">
However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
Expand Down
12 changes: 6 additions & 6 deletions src/app/showcase/doc/colorpicker/formatdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ import { Code } from '../../domain/code';
</app-docsectiontext>
<div class="card flex flex-wrap gap-3">
<div class="flex-1 flex flex-column align-items-center gap-3">
<label htmlFor="cp-hex" class="font-bold block mb-2"> HEX </label>
<label for="cp-hex" class="font-bold block mb-2"> HEX </label>
<p-colorPicker [(ngModel)]="color"></p-colorPicker>
<span>{{ color }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center gap-3">
<label htmlFor="cp-rgb" class="font-bold block mb-2"> RGB </label>
<label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
<p-colorPicker [(ngModel)]="colorRGB" format="rgb"></p-colorPicker>
<span>{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center gap-3">
<label htmlFor="cp-hsb" class="font-bold block mb-2"> HSB </label>
<label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
<p-colorPicker [(ngModel)]="colorHSB" format="hsb"></p-colorPicker>
<span>{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}</span>
</div>
Expand All @@ -42,17 +42,17 @@ export class FormatDoc {
html: `
<div class="card flex flex-wrap gap-3">
<div class="flex-1 flex flex-column align-items-center gap-3">
<label htmlFor="cp-hex" class="font-bold block mb-2"> HEX </label>
<label for="cp-hex" class="font-bold block mb-2"> HEX </label>
<p-colorPicker [(ngModel)]="color"></p-colorPicker>
<span>{{ color }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center gap-3">
<label htmlFor="cp-rgb" class="font-bold block mb-2"> RGB </label>
<label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
<p-colorPicker [(ngModel)]="colorRGB" format="rgb"></p-colorPicker>
<span>{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}</span>
</div>
<div class="flex-1 flex flex-column align-items-center gap-3">
<label htmlFor="cp-hsb" class="font-bold block mb-2"> HSB </label>
<label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
<p-colorPicker [(ngModel)]="colorHSB" format="hsb"></p-colorPicker>
<span>{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/inputmask/floatlabeldoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
<div class="card flex justify-content-center">
<span class="p-float-label">
<p-inputMask mask="999-99-9999" [(ngModel)]="value" id="ssn_input"></p-inputMask>
<label htmlFor="ssn_input">SSN</label>
<label for="ssn_input">SSN</label>
</span>
</div>
<app-code [code]="code" selector="input-mask-floatlabel-demo"></app-code>
Expand All @@ -22,14 +22,14 @@ export class FloatlabelDoc {
code: Code = {
basic: `<span class="p-float-label">
<p-inputMask mask="999-99-9999" [(ngModel)]="value" id="ssn_input"></p-inputMask>
<label htmlFor="ssn_input">SSN</label>
<label for="ssn_input">SSN</label>
</span>`,

html: `
<div class="card flex justify-content-center">
<span class="p-float-label">
<p-inputMask mask="999-99-9999" [(ngModel)]="value" id="ssn_input"></p-inputMask>
<label htmlFor="ssn_input">SSN</label>
<label for="ssn_input">SSN</label>
</span>
</div>`,

Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/inputnumber/floatlabeldoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
<div class="card flex justify-content-center">
<span class="p-float-label">
<p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
<label htmlFor="number-input">Number</label>
<label for="number-input">Number</label>
</span>
</div>
<app-code [code]="code" selector="input-number-float-label-demo"></app-code>
Expand All @@ -22,14 +22,14 @@ export class FloatlabelDoc {
code: Code = {
basic: `<span class="p-float-label">
<p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
<label htmlFor="number-input">Number</label>
<label for="number-input">Number</label>
</span>`,

html: `
<div class="card flex justify-content-center">
<span class="p-float-label">
<p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
<label htmlFor="number-input">Number</label>
<label for="number-input">Number</label>
</span>
</div>`,

Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/inputtext/floatlabeldoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
<div class="card flex justify-content-center">
<span class="p-float-label">
<input pInputText id="username" [(ngModel)]="value" />
<label htmlFor="username">Username</label>
<label for="username">Username</label>
</span>
</div>
<app-code [code]="code" selector="input-text-floatlabel-demo"></app-code>
Expand All @@ -22,14 +22,14 @@ export class FloatLabelDoc {
code: Code = {
basic: `<span class="p-float-label">
<input pInputText id="username" [(ngModel)]="value" />
<label htmlFor="username">Username</label>
<label for="username">Username</label>
</span>`,

html: `
<div class="card flex justify-content-center">
<span class="p-float-label">
<input pInputText id="username" [(ngModel)]="value" />
<label htmlFor="username">Username</label>
<label for="username">Username</label>
</span>
</div>`,

Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/inputtext/helptextdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
</app-docsectiontext>
<div class="card flex justify-content-center">
<div class="flex flex-column gap-2">
<label htmlFor="username">Username</label>
<label for="username">Username</label>
<input pInputText id="username" aria-describedby="username-help" [(ngModel)]="value" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
Expand All @@ -22,15 +22,15 @@ export class HelpTextDoc {

code: Code = {
basic: `<div class="flex flex-column gap-2">
<label htmlFor="username">Username</label>
<label for="username">Username</label>
<input pInputText id="username" aria-describedby="username-help" [(ngModel)]="value" />
<small id="username-help">Enter your username to reset your password.</small>
</div>`,

html: `
<div class="card flex justify-content-center">
<div class="flex flex-column gap-2">
<label htmlFor="username">Username</label>
<label for="username">Username</label>
<input pInputText id="username" aria-describedby="username-help" [(ngModel)]="value" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
Expand Down

1 comment on commit c79a252

@vercel
Copy link

@vercel vercel bot commented on c79a252 Nov 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test.vercel.app

Please sign in to comment.