[Kimchi-devel] [PATCH] Assign HTML labels to their corresponding elements

[Aline Manera]

Reviewed-by: Aline Manera <alinefm at linux.vnet.ibm.com>

On 13/03/2015 11:26, Crístian Viana wrote:
> Somea UI form fields have labels which aren't assigned to those fields,
> which makes it more difficult to click and interact with them.
>
> Assign the labels to their corresponding elements, so when the user
> clicks on a label, the element also receives the click event. Also, some
> indentation levels have been changed.
>
> The elements which have their labels assigned to are:
>
> - The text box where the user types the file path in "New Template" >
> "Local image file";
> - All form elements in "Templates" > "Actions" > "Edit", tab
> "Processor";
> - The checkbox used to select a device in "Storage pools" > "Actions" >
> "Extend";
>
> Signed-off-by: Crístian Viana <vianac at linux.vnet.ibm.com>
> ---
>   ui/pages/tabs/storage.html.tmpl  |  2 +-
>   ui/pages/template-add.html.tmpl  |  4 +++-
>   ui/pages/template-edit.html.tmpl | 20 ++++++++++++++++----
>   3 files changed, 20 insertions(+), 6 deletions(-)
>
> diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
> index dbbaef9..6af7327 100644
> --- a/ui/pages/tabs/storage.html.tmpl
> +++ b/ui/pages/tabs/storage.html.tmpl
> @@ -128,7 +128,7 @@
>   </script>
>   <script id="logicalPoolExtendTmpl" type="html/text">
>       <div>
> -        <input type="checkbox" value="{path}" name="devices">
> +        <input type="checkbox" value="{path}" name="devices" id="{name}">
>           <label for="{name}">{path}</label>
>       </div>
>   </script>
> diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
> index eaafaa7..3b82c6c 100644
> --- a/ui/pages/template-add.html.tmpl
> +++ b/ui/pages/template-add.html.tmpl
> @@ -130,7 +130,9 @@
>                       <h2 class="step-title">$_("Local Image File")</h2>
>                   </header>
>                   <div class="body">
> -                    <span>File Path:</span><input type="text"><button class="ui-button-primary">$_("Create")</button>
> +                    <label for="vm-image-local-text">File Path:</label>
> +                    <input type="text" id="vm-image-local-text" />
> +                    <button class="ui-button-primary">$_("Create")</button>
>                   </div>
>               </div>
>   
> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
> index 7177bf0..3a84870 100644
> --- a/ui/pages/template-edit.html.tmpl
> +++ b/ui/pages/template-edit.html.tmpl
> @@ -118,11 +118,23 @@
>                   <div class="template-tab-body"></div>
>               </form>
>               <form id="form-template-processor">
> -                <div>$_("CPU Number"):<input type="text" value="1" id="cpus"></div>
> -                <div class="manual"><input type="checkbox">$_("Manually set CPU topology")</div>
> +                <div>
> +                    <label for="cpus">$_("CPU Number"):</label>
> +                    <input type="text" value="1" id="cpus" />
> +                </div>
> +                <div class="manual">
> +                    <input type="checkbox" id="cpus-check" />
> +                    <label for="cpus-check">$_("Manually set CPU topology")</label>
> +                </div>
>                   <div class="topology hide">
> -                    <div>$_("Cores"):<input type="text" value="1"  id="cores"></div>
> -                    <div>$_("Threads"):<select id="threads"></select></div>
> +                    <div>
> +                        <label for="cores">$_("Cores"):</label>
> +                        <input type="text" value="1" id="cores" />
> +                    </div>
> +                    <div>
> +                        <label for="threads">$_("Threads"):</label>
> +                        <select id="threads"></select>
> +                    </div>
>                   </div>
>               </form>
>           </div>