By the way, if we need to change any element width in a different language, feel free to create a new SCSS module called “_locale.scss” or something like this and import into wok.scss or kimchi.scss. You can change the width based on locale using the “lang” attribute.

In SCSS:

[lang="pt-br"] {

span.column-longfield {

                width: 350px;

}

}

[lang="en-us"] {

span.column-longfield {

                width: 120px;

}

}

CSS output:

[lang="pt-br"] span.column-longfield { width: 350px; }

[lang="en-us"] span.column-longfield { width: 120px; }

From: kimchi-devel-bounces@ovirt.org [mailto:kimchi-devel-bounces@ovirt.org] On Behalf Of Samuel Henrique De Oliveira Guimaraes
Sent: terça-feira, 10 de maio de 2016 12:08
To: Daniel Henrique Barboza <dhbarboza82@gmail.com>; kimchi-devel@ovirt.org
Subject: Re: [Kimchi-devel] [Wok][PATCH v2 0/7] Multi-Culture Support

Exactly. If you inspect the current code for username and password, they both have the placeholder attribute (html5) and hidden labels. Please note that elements with CSS property “display: none” are always ignored by screen reader software. The bootstrap class “sr-only” hides the content in the negative space of the element keeping the element display property unchanged.

Samuel

From: kimchi-devel-bounces@ovirt.org [mailto:kimchi-devel-bounces@ovirt.org] On Behalf Of Daniel Henrique Barboza
Sent: terça-feira, 10 de maio de 2016 11:12
To: kimchi-devel@ovirt.org
Subject: Re: [Kimchi-devel] [Wok][PATCH v2 0/7] Multi-Culture Support

On 05/09/2016 04:44 PM, Samuel Henrique De Oliveira Guimaraes wrote:

Hi,

I don’t think the new login.html is good for accessibility with screen reader software. I don’t have the tools to test it, but the form fields were added to a <dl> element (Definition list) when just the <form>, <label> and <input> elements should be enough for accessibility, usability and styling.

From my experience with screen readers, the output from a screen reader would be something like this:

-Definition List

-Definition term: Username.

-Definition description: input type text Username.

-Definition term: Password.

-Definition description: input type password Password.

-Definition term: Language.

-Definition description: Select.

-Selected option: English (US).

If we move the Locale and display it under the <select> element, it should be done with CSS only. Personally, I think it doesn’t look good. Instead I think we could align it in the middle, just like we do with the Log In button.

I don’t think displaying the label and the select in a single line is good for mobile usability with the login page and it doesn’t make sense to create a different login page for mobile and desktop just to move a label: http://baymard.com/blog/mobile-form-usability-label-position

I am no UI expert but we need to be sure that we do not add any
HTML5 code that will gives us trouble when dealing with Accessibility.

Thanks,

Samuel

From: kimchi-devel-bounces@ovirt.org [mailto:kimchi-devel-bounces@ovirt.org] On Behalf Of Aline Manera
Sent: segunda-feira, 9 de maio de 2016 10:39
To: pkulkark@linux.vnet.ibm.com; Kimchi Devel <kimchi-devel@ovirt.org>
Subject: Re: [Kimchi-devel] [Wok][PATCH v2 0/7] Multi-Culture Support

Hi all,

I'd like suggest changes on UI layout.


I am not sure about the best practices to display language and locale to users but I will suggest to put:

<label> <drop down menu> in a single line, instead of having the label under the drop down menu.

Samuel, any suggestion on that area?

Regards,
Aline Manera

On 05/05/2016 04:02 AM, pkulkark@linux.vnet.ibm.com wrote:

From: Pooja Kulkarni <pkulkark@linux.vnet.ibm.com>
 
This patch set provides multi-culture
support by adding another drop down
list during login for user locale
selection. The numeric data and datetime
fields are formatted based on the locale
selected.
 
Pooja Kulkarni (7):
  Multi-Culture Support - Add a separate drop down list for locale
  Multi-Culture support - Add methods to get and set locales in
    wok.lang.js
  Multi-Culture support - Add locale in format settings in
    wok.line-chart.js
  Multi-Culture support : Format datetime as per locale in wok.list.js
  Multi-Culture support : Implement new drop down list for locale in
    wok.login.js
  Multi-Culture support : Modify wok.formatMeasurement util to include
    formatting based on locale
  Multi-Culture support : Format datetime in user activity log as per
    locale
 
 ui/js/src/wok.lang.js       |  8 ++++++++
 ui/js/src/wok.line-chart.js |  3 ++-
 ui/js/src/wok.list.js       |  6 +++++-
 ui/js/src/wok.login.js      |  9 +++++++++
 ui/js/src/wok.utils.js      | 10 +++++++---
 ui/js/wok.bootgrid.js       | 10 +++++++++-
 ui/js/wok.user-log.js       |  3 ++-
 ui/pages/login.html.tmpl    | 34 ++++++++++++++++++++++++++++++++++
 8 files changed, 76 insertions(+), 7 deletions(-)
 

_______________________________________________
Kimchi-devel mailing list
Kimchi-devel@ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel