Is there any way in which I can make my Vaadin-Grid accessible for screen reader users or even simply by tabbing? I'm thinking that only each row would need to be tabbed rather than each cell of each row. I also have a checkbox on each row, so that would also need consideration.
Any help would be greatly appreciated, and please bare in mind that this is still a work in progress so I will be trying to add ARIA labels and things as I go.
Here is a JSBin with the actual code
My vaadin-grid html
<vaadin-grid aria-label="Server properties list" id="material" items="[[uksproperties]]">
<vaadin-grid-selection-column width="66px" flex="0" select-all="{{selectAll}}">
<template class="header">
<paper-checkbox checked="{{selectAll}}"></paper-checkbox>
</template>
<template>
<paper-checkbox checked="{{selected}}"></paper-checkbox>
</template>
</vaadin-grid-selection-column>
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout cell">
<label for="keyFilter" class="keyText cell flex">Key</label>
<vaadin-grid-filter class="cell" id="keyFilterVaadin" path="key" value="[[_filterKey]]">
<paper-input aria-describedby="keyDescription" no-float-label class="keyFilter" id="keyFilter" slot="filter" placeholder="Filter search" value="{{_filterKey::input}}" focus-target on-input="clearAppear" >
<iron-icon suffix icon="clear" class="clearIcon" on-click="clearField" clear-item-id="keyFilter"></iron-icon>
</paper-input>
<span id="keyDescription" style="display:none" class="description">Input text to filter to properties list by "Key" search</span>
</vaadin-grid-filter>
</div>
</template>
<template class="cell"><div class="blue">[[item.key]]</div></template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">
<div class="cell">
value
<div>
</template>
<template class="cell">[[item.value]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout">
<div class="cell last flex ">
Server
</div>
<paper-button slot="filter" class="export" on-click="empty">
<iron-icon icon="launch"></iron-icon>
Export
</paper-button>
</div>
</template>
<template class="cell last">[[item.server]]</template>
</vaadin-grid-column>
</vaadin-grid>
What specific problem are you having with screen readers?
vaadin-grid should be mostly accessible out-of-the-box. Keyboard navigation is supported, and you can navigate the rows with the arrow keys. Just click a row/cell and start using the arrow keys to get the focus outline. You can also focus the grid with the Tab key – header, body and footer is focusable separately, not each row.
If you place focusable elements inside the cells (inputs, buttons, checkboxes, etc.) you need to press Enter to access those, as specified in the WAI-ARIA best practices for data grids.
Related
I'm not able to submit my iron-form. At this point I just need to see the content in the console, but when trying to submit the form i'm only getting error-msg: Uncaught TypeError: Cannot read property 'submit' of null. I've probably missed something obvious. I've been using the page: https://www.webcomponents.org/element/PolymerElements/iron-form
<iron-form id="sizeForm">
<form method="post" action="">
<paper-dropdown-menu label="Choose type" on-iron-select="_typeSelected">
<paper-listbox slot="dropdown-content">
<paper-item value="Sneakers">Sneakers</paper-item>
<paper-item value="Shoes">Shoes</paper-item>
<paper-item value="T-shirts">T-shirts</paper-item>
<paper-item value="Jeans">Jeans</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<add-sneakers hidden$="{{hideSneakers}}"></add-sneakers>
<paper-button onclick="{{_submitForm}}">Accept</paper-button>
<div class="output"></div>
</form>
</iron-form>
<script>
_submitForm() {
document.getElementById('sizeForm').submit();
}
</script>
Change
<paper-button onclick="{{_submitForm}}">Accept</paper-button>
to
<paper-button on-tap="_submitForm">Accept</paper-button>
or
<button onclick="_submitForm()">Accept</button>
Also, it seems the iron-form docs got it wrong: document.getElementById('sizeForm').submit() works with a button but not a paper-button. this.$.sizeForm.submit() works with either. (I'll explore this more, and may submit a pull request on it.)
See this pen for an example.
You need to give the id attribute to the form according to what you have on the javascript.
<form id="form_name" method="post" action="">
and correct it on the javascript, since the id that you are using on your example is (already) defined before.
document.getElementById('form_name').submit();
So, bottom line, you need to add the id in the form and correct it on the js code.
I currently building a custom dropdown component in Angular 4.x, this is its template:
<div class="vet-input-container vet-input-container--select" [ngClass]="inputClass()" [ngSwitch]="type">
<div class="vet-input-area" (click)="toggleOpen($event)">
<button tabindex="-1" type="button" mat-raised-button color="primary" class="vet-input-label vet-btn vet-btn--fit" *ngIf="labeled">
<i [ngClass]="labelIconClass"></i>
</button>
<input type="text" class="vet-input">
<i class="fa fa-caret-down vet-input-dropdown-icon"></i>
</div>
<div class="vet-input-options">
<div class="option" *ngFor="let item of collection">
{{displayFn(item)}}
</div>
</div>
<div class="vet-input-errors">
<ng-content></ng-content>
</div>
</div>
My issue is when i open the "options div", this element is overlaped by others elements sibling than mi custom component. I know about the z-index, but put this on my component, force me to check other sibling elements everytime, and this makes a not reusable component.
I inspected semantic.css and bootstrap dropdown components and these have a z-index style defined in elements within the component and this makes me feel confused.
On the other hand, check angular 2 material select and this is put in a overlay elements, in this way it makes sense that the custom select overlay all elements.
Please, need an explication about how the drowdowns of semantic.css and bootstrap overlay all sibling elements, no matter the level.
UPDATE: I tried replacing my template with semantic-ui and ng-primefaces dropdowns component, but both are overlaped by sibling components.
This the layout that contains my custom inputs and selects components. Sibling input is overlaying the select options.
<div class="flex flex-col-layout ai-stretch">
<app-dnj-input placeholder="Nombre de su veterinaria" formControlName="branchName">
</app-dnj-input>
<app-dnj-input placeholder="Nombres" formControlName="veterinarianName">
</app-dnj-input>
<app-dnj-input placeholder="Apellidos" formControlName="veterinarianLastName">
</app-dnj-input>
<app-dnj-input placeholder="Correo electrónico" formControlName="veterinarianEmail">
</app-dnj-input>
<app-dnj-input placeholder="Repita su correo" formControlName="veterinarianConfirmEmail">
</app-dnj-input>
<app-dnj-input placeholder="Contraseña" formControlName="veterinarianPassword">
</app-dnj-input>
<app-dnj-input placeholder="Repita su contraseña" formControlName="veterinarianConfirmPassword">
</app-dnj-input>
<app-dnj-select placeholder="rol" formControlName="veterinarianRole"[collection]="roleList"
[displayFn]="displayRoleFn">
</app-dnj-select>
<app-dnj-input placeholder="rol" formControlName="veterinarianRole" type="select" [collection]="roleList"
[displayFn]="displayRoleFn">
</app-dnj-input>
</div>
Give the vet-input-container position: relative and then the menu options should be given position: absolute and z-index: 100 (the amount doesn't really matter, as long as its higher than the rest of your content).
I would like to recreate the following Dropdown from Semantic UI, in which a <label> is inserted for the dropdown menu using UI React:
(https://semantic-ui.com/collections/form.html#dropdown)
This is the markdown I'd like my React app to create:
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
I'm struggling to accomplish this with the React UI implementation of Semantic UI.
My current attempt is this:
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
It's very important that this is labeled clearly. I've found in user research that the placeholder is confusing as a question prompt alone.
There is documentation for adding a label, however, it requires nesting child components under Dropdown component, which interferes with my use of the "options" prop. Error is as follows:
Warning: Failed prop type: Prop children in Dropdown conflicts
with props: options, selection. They cannot be defined together,
choose one or the other
Thank you, Stackoverflow!
If you are using it inside a Form you can do:
<Form>
<Form.Dropdown
label='Gender'
options={//your array of options}
selection
/>
</Form>
I am trying to find a way to reset a form inside a dialog back to some default data after the dialog is closed/abandoned.
Say collaborators is a list from the server, each with an associated privilege level. My form provides a way to edit their privilege. If they abandon the dialog (without clicking submit), it should revert to their saved privilege, no matter what they selected in the dropdown.
When they abandon the dialog, I try doing this.$.users.render() to force the dom-repeat to re-compute _computeDropdown (which returns a paper-item index) and get rid of the user selection, even though items hasn't changed.
But render doesn't call the computed binding. Am I overlooking another way to reset the selection to default data here?
<template id="users" is="dom-repeat" items="[[ collaborators ]]">
<div class="field">
<paper-input disabled name="collaborator" label="[[ item.name ]]"></paper-input>
<paper-icon-button icon="close" on-tap="remove"></paper-icon-button>
<paper-dropdown-menu name="privilege">
<paper-listbox class="dropdown-content" selected="[[ _computeDropdown(item.privilege) ]]">
<paper-item>Owner</paper-item>
<paper-item>Collaborator</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</template>
The dom-repeat has an observe attribute.
<template id="users" is="dom-repeat" items="[[ collaborators ]]"
observe="_updateHack">
should do the same.
I have the following markup:
<template>
<div class="layout horizontal">
<paper-input label="Endpoint URL" id="url" value={{url}} class="flex">
<iron-icon icon="language" prefix></iron-icon>
</paper-input>
<paper-dropdown-menu label="Method" alwaysFloatLabel="true" no-animations="true">
<paper-menu class="dropdown-content">
<paper-item>GET</paper-item>
<paper-item>POST</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
</template>
However the dropdown is not lined up with the input box. For whatever reason the dropdown gets pushed down a little.
Any suggestions on how to get the input box and dropdown to line up?
Thank you.
The solution to this issues was to use the classes: "layout horizontal center-center".
By adding "center-center" I was able to get the desired result of having the input box of both paper-input and paper-dropdown-menu to line up.
I hope it helps.