Skip to content

Commit

Permalink
Form accessibility label updates
Browse files Browse the repository at this point in the history
Demo pages renaming
  • Loading branch information
Anna Yeshtukova committed Feb 19, 2021
1 parent eda97c8 commit 6c96e95
Show file tree
Hide file tree
Showing 8 changed files with 53 additions and 48 deletions.
2 changes: 1 addition & 1 deletion src/components/forms/_checkbox.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<input class="nsw-form-checkbox__input" type="checkbox" name="{{name}}" id="{{id}}" aria-describedby="{{id}}-error-text" {{#if error-text}}aria-invalid="true"{{/if}}>
<input class="nsw-form-checkbox__input" type="checkbox" name="{{name}}" id="{{id}}"{{#if error-text}} aria-describedby="{{id}}-error-text" aria-invalid="true"{{/if}}>
<label class="nsw-form-checkbox__label" for="{{id}}">{{{label}}}</label>
{{#if error-text}}<span id="{{id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{error-text}}</span>{{/if}}
2 changes: 1 addition & 1 deletion src/components/forms/_radio.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<input class="nsw-form-radio__input" type="radio" name="{{name}}" id="{{id}}" aria-describedby="{{id}}-error-text" {{#if has-error}}aria-invalid="true"{{/if}}>
<input class="nsw-form-radio__input" type="radio" name="{{name}}" id="{{id}}"{{#if error-text}} aria-describedby="{{id}}-error-text" aria-invalid="true"{{/if}}>
<label class="nsw-form-radio__label" for="{{id}}">{{label}}</label>
{{#if has-error}}<span id="{{id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{error-text}}</span>{{/if}}
10 changes: 5 additions & 5 deletions src/components/forms/_select.hbs
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<label for="{{id}}" class="nsw-form-label">{{label}}</label>
{{#if helper-text}}<span id="{{id}}-helper-text" class="nsw-form-helper">{{helper-text}}</span>{{/if}}
<select id="{{id}}" class="nsw-form-select" aria-describedby="{{id}}-helper-text {{id}}-error-text" {{#if error-text}}aria-invalid="true"{{/if}}>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<select id="{{id}}" class="nsw-form-select" {{#if helper-text}}aria-describedby="{{#if helper-text}}{{id}}-helper-text{{/if}}{{#if error-text}} {{id}}-error-text{{/if}}"{{/if}} {{#if error-text}}aria-invalid="true"{{/if}}>
<option value="">Please select</option>
<option value="1">{{#if option-1}}{{option-1}}{{else}}Option 1{{/if}}</option>
<option value="2">{{#if option-2}}{{option-2}}{{else}}Option 2{{/if}}</option>
<option value="3">{{#if option-3}}{{option-3}}{{else}}Option 3{{/if}}</option>
</select>
{{#if error-text}}<span id="{{id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{error-text}}</span>{{/if}}
2 changes: 1 addition & 1 deletion src/components/forms/_text-input.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<label for="{{id}}" class="nsw-form-label{{#if required}} nsw-form-required{{/if}}">{{label}}{{#if required}}<span class="sr-only"> (required)</span>{{/if}}</label>
{{#if helper-text}}<span id="{{id}}-helper-text" class="nsw-form-helper">{{helper-text}}</span>{{/if}}
<input id="{{id}}" name="text" class="nsw-form-input" aria-describedby="{{id}}-helper-text {{id}}-error-text" {{#if error-text}}aria-invalid="true"{{/if}}>
<input type="{{#if type}}{{type}}{{else}}text{{/if}}" id="{{id}}" name="{{id}}" class="nsw-form-input" {{#if helper-text}}aria-describedby="{{#if helper-text}}{{id}}-helper-text{{/if}}{{#if error-text}} {{id}}-error-text{{/if}}"{{/if}} {{#if error-text}}aria-invalid="true"{{/if}}>
{{#if error-text}}<span id="{{id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{error-text}}</span>{{/if}}
2 changes: 1 addition & 1 deletion src/components/forms/_textarea.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<label for="{{id}}" class="nsw-form-label">{{label}}</label>
{{#if helper-text}}<span id="{{id}}-helper-text" class="nsw-form-helper">{{helper-text}}</span>{{/if}}
<textarea class="nsw-form-input" name="textarea" id="{{id}}" aria-describedby="{{id}}-helper-text {{id}}-error-text" {{#if error-text}}aria-invalid="true"{{/if}}></textarea>
<textarea class="nsw-form-input" name="textarea" id="{{id}}" {{#if helper-text}}aria-describedby="{{#if helper-text}}{{id}}-helper-text{{/if}}{{#if error-text}} {{id}}-error-text{{/if}}"{{/if}} {{#if error-text}}aria-invalid="true"{{/if}}></textarea>
{{#if error-text}}<span id="{{id}}-error-text" class="nsw-form-helper nsw-form-helper--error">{{error-text}}</span>{{/if}}
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
title: Two column - Sidebar right align [Forms]
title: Two column - Sidebar on the right [empty]
model:
nav-basic: ../../components/main-navigation/json/main-navigation.json
nav-mega: ../../components/main-navigation/json/mega-navigation.json
breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
card-blog-1: ../../components/card/json/card-blog-1.json
card-blog-2: ../../components/card/json/card-blog-2.json
card-blog-3: ../../components/card/json/card-blog-3.json
card-media-1: ../../components/card/json/card-media-1.json
card-media-2: ../../components/card/json/card-media-2.json
card-media-3: ../../components/card/json/card-media-3.json
footer: ../../components/footer/json/footer.json
---

Expand All @@ -31,12 +31,15 @@ model:
id="contact-type"
label="Type of feedback:"
helper-text="Choose the category that best suits your feedback"
option-1="Complaints"
option-2="Compliments"
option-3="Other enquiry"
}}
</div>

<div class="nsw-form-group">
{{>_textarea
id="txta1"
id="contact-feedback"
label="Give us your feedback:"
helper-text="The more information you provide, the better we'll be able to action your feedback"
}}
Expand All @@ -46,19 +49,21 @@ model:

<div class="nsw-form-group">
{{>_text-input
id="personal-1"
id="contact-first-name"
label="First name"
}}
{{>_text-input
id="personal-2"
id="contact-last-name"
label="Last name"
}}
{{>_text-input
id="personal-3"
id="contact-email"
type="email"
label="Email address"
}}
{{>_text-input
id="personal-4"
id="contact-phone"
type="tel"
label="Phone number (optional)"
}}
{{>_button-input type="submit" style="primary" text="Submit"}}
Expand All @@ -67,30 +72,6 @@ model:
</div>
</main>
<div class="nsw-page-layout__sidebar">
<div class="nsw-section--box">
<form class="nsw-form" action="#">
<h4 class="nsw-section-title">Want to stay in touch?</h4>
<p>Find out about work happening across NSW Government in the digital space. </p>
{{>_text-input
id="subscribe-full-name"
label="Full name"
required=true
}}
{{>_text-input
id="subscribe-email"
label="Email"
required=true
}}
<div class="nsw-form-checkbox">
{{>_checkbox
id="subscribe-tc"
name="single-checkbox"
label="I have read the information regarding <a href='#'>privacy policy</a>"
}}
</div>
{{>_button-input type="submit" style="primary" text="Submit"}}
</form>
</div>
</div>
</div>
</div>
Expand All @@ -99,16 +80,15 @@ model:
<div class="nsw-container">
<div class="nsw-page-layout">
<div class="nsw-page-layout__main">
<h3 class="nsw-section-title">Similar blog posts</h3>
<div class="nsw-grid">
<div class="nsw-col nsw-col-md-4">
{{>_card model.card-blog-1}}
{{>_card model.card-media-1}}
</div>
<div class="nsw-col nsw-col-md-4">
{{>_card model.card-blog-2}}
{{>_card model.card-media-2}}
</div>
<div class="nsw-col nsw-col-md-4">
{{>_card model.card-blog-3}}
{{>_card model.card-media-3}}
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Two column - Side navigation left align (nav hides on mobile)
title: Two column - Sidebar on the left [side nav]
model:
nav-basic: ../../components/main-navigation/json/main-navigation.json
breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json
Expand Down
27 changes: 26 additions & 1 deletion src/templates/sidebar-right/index.hbs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Two column - Sidebar right align
title: Two column - Sidebar on the right
model:
nav-basic: ../../components/main-navigation/json/main-navigation.json
nav-mega: ../../components/main-navigation/json/mega-navigation.json
Expand Down Expand Up @@ -54,6 +54,31 @@ model:

</main>
<div class="nsw-page-layout__sidebar">
<div class="nsw-section--box">
<form class="nsw-form" action="#">
<h4 class="nsw-section-title">Want to stay in touch?</h4>
<p>Find out about work happening across NSW Government in the digital space. </p>
{{>_text-input
id="subscribe-full-name"
label="Full name"
required=true
}}
{{>_text-input
id="subscribe-email"
label="Email"
required=true
}}
<div class="nsw-form-checkbox">
{{>_checkbox
id="subscribe-tc"
name="single-checkbox"
label="I have read the information regarding <a href='#'>privacy policy</a>"
}}
</div>
{{>_button-input type="submit" style="primary" text="Submit"}}
</form>
</div>

{{>_link-list model.link-list}}
</div>
</div>
Expand Down

0 comments on commit 6c96e95

Please sign in to comment.