Skip to content

Commit

Permalink
[SDPA-2224] Adds aria-label to datepicker. (#294)
Browse files Browse the repository at this point in the history 
* [SDPA-2224] Adds aria-label to datepicker.

* Add aria-hidden to items not needed for screen readers

* Update snapshots
  • Loading branch information
@dylankelly
dylankelly authored May 27, 2019
1 parent 0df2ef2 commit 2f68ef4
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 7 deletions.
2 changes: 1 addition & 1 deletion packages/Molecules/Form/fields/fieldRpldatepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:name="schema.inputName"
@change="startChange"
@init="startInit" />
<span class="rpl-date-picker__separator">-</span>
<span class="rpl-date-picker__separator" aria-hidden="true">-</span>
<pikaday
class="rpl-date-picker__end"
v-model="modelEnd"
Expand Down
9 changes: 9 additions & 0 deletions packages/Molecules/Form/formPikaday.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
:placeholder="placeholder"
:readonly="readonly"
:name="inputName"
:aria-label="placeholder || 'enter a date'"
@keyup="keyup"
/>
<rpl-icon class="rpl-form-pikaday__icon" symbol="calendar" color="primary" />
<div ref="pikacontainer" class="rpl-form-pikaday__container" aria-hidden="true"></div>
</div>
</template>

Expand Down Expand Up @@ -57,6 +59,7 @@ export default {
const Pikaday = await import('pikaday').then(module => module.default ? module.default : module)
this.picker = new Pikaday(defaults(this.pickerOptions, {
field: this.$el,
container: this.$refs.pikacontainer,
onSelect: () => {
this.displayVal = this.picker.toString()
this.$emit('change', this.picker.getDate())
Expand Down Expand Up @@ -338,6 +341,11 @@ $rpl-pikaday-date-today-text-color: rpl-color('secondary') !default;
position: relative;
flex-grow: 1;
&__container {
position: absolute;
z-index: 1;
}
&__icon {
position: absolute;
top: 0;
Expand All @@ -346,5 +354,6 @@ $rpl-pikaday-date-today-text-color: rpl-color('secondary') !default;
margin: auto;
pointer-events: none;
}
}
</style>
4 changes: 2 additions & 2 deletions src/storybook-components/_data/demoData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1550,8 +1550,8 @@ const demoData = {
range: true,
label: 'Date Range',
model: 'dateRange',
startPlaceholder: 'Start',
endPlaceholder: 'End'
startPlaceholder: 'Enter start date',
endPlaceholder: 'Enter end date'
},

{
Expand Down
65 changes: 61 additions & 4 deletions test/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15047,15 +15047,22 @@ exports[`RippleStoryshots Molecules/Form Form 1`] = `
class="rpl-form-pikaday rpl-date-picker__start"
>
<input
aria-label="Enter start date"
class="rpl-form-pikaday__input"
placeholder="Start"
placeholder="Enter start date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>

<span
aria-hidden="true"
class="rpl-date-picker__separator"
>
-
Expand All @@ -15065,12 +15072,18 @@ exports[`RippleStoryshots Molecules/Form Form 1`] = `
class="rpl-form-pikaday rpl-date-picker__end"
>
<input
aria-label="Enter end date"
class="rpl-form-pikaday__input"
placeholder="End"
placeholder="Enter end date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>
</div>

Expand Down Expand Up @@ -15104,12 +15117,18 @@ exports[`RippleStoryshots Molecules/Form Form 1`] = `
class="rpl-form-pikaday"
>
<input
aria-label="Enter a date"
class="rpl-form-pikaday__input"
placeholder="Enter a date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>
</div>

Expand Down Expand Up @@ -54317,15 +54336,22 @@ exports[`RippleStoryshots Templates Page with form 1`] = `
class="rpl-form-pikaday rpl-date-picker__start"
>
<input
aria-label="Start"
class="rpl-form-pikaday__input"
placeholder="Start"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>

<span
aria-hidden="true"
class="rpl-date-picker__separator"
>
-
Expand All @@ -54335,12 +54361,18 @@ exports[`RippleStoryshots Templates Page with form 1`] = `
class="rpl-form-pikaday rpl-date-picker__end"
>
<input
aria-label="End"
class="rpl-form-pikaday__input"
placeholder="End"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>
</div>

Expand Down Expand Up @@ -54374,12 +54406,18 @@ exports[`RippleStoryshots Templates Page with form 1`] = `
class="rpl-form-pikaday"
>
<input
aria-label="Enter a date"
class="rpl-form-pikaday__input"
placeholder="Enter a date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>
</div>

Expand Down Expand Up @@ -62025,15 +62063,22 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
class="rpl-form-pikaday rpl-date-picker__start"
>
<input
aria-label="Enter start date"
class="rpl-form-pikaday__input"
placeholder="Start"
placeholder="Enter start date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>

<span
aria-hidden="true"
class="rpl-date-picker__separator"
>
-
Expand All @@ -62043,12 +62088,18 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
class="rpl-form-pikaday rpl-date-picker__end"
>
<input
aria-label="Enter end date"
class="rpl-form-pikaday__input"
placeholder="End"
placeholder="Enter end date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>
</div>

Expand Down Expand Up @@ -62082,12 +62133,18 @@ exports[`RippleStoryshots Templates Print Page 1`] = `
class="rpl-form-pikaday"
>
<input
aria-label="Enter a date"
class="rpl-form-pikaday__input"
placeholder="Enter a date"
type="text"
/>

<!---->

<div
aria-hidden="true"
class="rpl-form-pikaday__container"
/>
</div>
</div>

Expand Down

0 comments on commit 2f68ef4

Please sign in to comment.