Vuetify and Screenreader issue - label of v-select isn't read - vue.js

I am actually using Vuetify 2.6.6, sticking to the standard components.
Beeing asked to make it accessible for screen reader users I struggle with the label not read by NVDA in case of v-select. (it must be read on hovering the label)
<v-select :items="items" label="name">
</v-select>
I already played around with some of the examples on https://vuetifyjs.com/en/features/accessibility/ but nothing really helps.
Interesting: Not even the examples on the vuetifyjs site are read.
Also: Clicking in the input field makes NVDA read the label. Unfortunately, having selected sth. it says nothing is selected or blank.
Having finally selected sth. and hovering an inch to the right of the label... it is read.
The items in the v-select are just an array of strings.
If I understood right, semantic tags like label and input do not need to have additional aria attributes but my knowledge in this field is limited.
However, this is what gets rendered:
<div class="v-input theme--light v-text-field v-text-field--is-booted v-select">
<div class="v-input__control">
<div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-14" class="v-input__slot">
<div class="v-select__slot">
<label for="input-14" class="v-label theme--light"
style="left: 0px; right: auto; position: absolute;">Name</label>
<div class="v-select__selections"><input id="input-14" readonly="readonly" type="text"
aria-readonly="false" autocomplete="off" control-id="ControlID-2"></div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--append">
<i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light"></i>
</div>
</div>
<input type="hidden">
</div>
<div class="v-menu">
<!---->
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>

Related

handle vue-js dropdown plugin in selenium webdriver

I am testing a web application which has v-select vuejs dropdown plugin for Country field. How Can I select values in dropdown using selenium webdriver.
It has no select/div.
Below is the HTML before selecting the country from the dropwdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="false">
<div class="dropdown-toggle clearfix">
<input type="search" autocomplete="false" placeholder="Country" aria-label="Search for option" class="form-control" style="width: 100%;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
And this is the HTML after selecting the country as United States from the dropdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="true">
<div class="dropdown-toggle clearfix">
<span class="selected-tag">
United States
<!---->
</span>
<input type="search" autocomplete="false" aria-label="Search for option" class="form-control" style="width: auto;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
Please specify the language binding you are using and the things you've tried so far.
Algo in Java:
click the 'dropdown' field: driver.findElement(By.name("country")).click()
click the option: driver.findElement(By.name("country-1")).click()
These kinds of 'dropdown' fields are usually tied to another div / element.
E.g., when you click the 'dropdown' field (item 1), another dynamic div may appear containing the options in some form of tag.
Most common examples would be, <li>, <div>, <span>. You'll then have to do another click() on the option you want. (item 2)
There are even cases where the dropdown div encloses an input tag to which you can do sendKeys() or setAttribute() as well as cases where you can do a javascript click directly into one of the options.
Suggest you provide more info so we can help you better.
selenium language bindings
html snippet of the dropdown - please avoid using screenshots for snippets
html element of the options that appear when you click the dropdown

How to card-reveal button make like FAB button in MaterializeCSS?

I want to make close function of card-reveal like FAB button.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Here is my JSFiddle
What I need? Although material design Icon now work in this example, I need to make "close" button as fab. It means, even card-reveal content scroll down, close button keeps position in card-reveal section and visible.
Is it possible?
The nature of the card component seems to make this tough to achieve without getting hacky and mixing strange CSS properties. I think the best I can achieve that still looks pleasing is a FAB that travels up and down with the card-reveal. Another solution may exist, but it may not be as clean.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Card Title
</span>
<a class="activator btn-floating red right"></a>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title
<a class="card-title btn-floating red right"></a>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>

Bootstrap3 horizontal forms with rows or inline forms

I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/

Bootstrap 3 in line form or input group

I am trying to create a search form, something like below..
http://tinypic.com/r/2py0scy/8
I am new to front end development and confused if an in-line form or a input group should be used?
The issue with inline forms is I am unable to size the input box (width) so any pointer there would also be really helpful.
Thanks!
Code Update
from home.HTML
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
from the layouts - application.html.erb
<div class="container">
<%= yield %>
</div>
To play with the width in Bootstrap, see the grid system and the use the columns:
For instance, if you want a form on the right and the width at the 50% of the container, you can do:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
This is div on the left
</div>
<div class="col-xs-12 col-md-6">
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
</div>
</div>
</div>
The previous code, is designed to change the behavior on small devices.
You can use both depending on what you're trying to accomplish. Bootstrap is well-documented, did you read their documentation regarding forms ? http://getbootstrap.com/css/#forms
By default input items are 100% width in bootstrap (e.g. they fill the containing element they are in). For instance:
<input type="text" class="form-control" placeholder="Text input">
would result in a 100% width input field and
<style>
.smallwidth {max-width: 200px;}
</style>
<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>
would result in a 200px width input field, because it is restricted by the outer div I put around it.

Boostrap 3 : alignment problems of an input control inside nested "row" div class

I am using Boostrap 3. Is it normal that an input control inside a DIV with "row" class is not aligned left with the parent ?
It is shifted on the left. I think it might be a bug ?
Is there a way to make it aligned properly without tweaking CSS (meaning through Bootsrap-only CSS classes).
Please find the demonstration of the problem here :
http://jsfiddle.net/7vRQr/2/
<div class="col-xs-11">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<h2 class="main-info-title">Following input should be aligned</h2>
<div class="row">
<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
<label class="col-xs-12">But I am aligned!</label>
</div>
</div>
</div>
<span class="col-xs-12">So texts are aligned, I would have expected the input control to be aligned instead of the text inside the input</span>
Try this :
<style>
.form-horizontal .control-label {
text-align: left;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-10">
<h2>Following input should be aligned</h2>
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="textbox">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Might be the only one facing this issue...
Well, so for now I wrap every form control (input, textarea, select) inside a div with col-xs-12, and then it works OK.
So in my question, replacing this :
<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
By this (encapsulating inside a div with col-xs-12) :
<div class="col-xs-12">
<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
</div>
Fixes indentation issue. Please find the fully updated example here :
http://jsfiddle.net/7vRQr/5
Anyone with information about whether it is a bug or not (seems like one) or any other method to workaround is highly welcome. Because this solution does add a lot of extra HTML markups.