Merge pull request #64 from bindable-ui/form-accessibility

Form accessibility
bindable-ui · Jul 2, 2020 · 9e32bee · 9e32bee
2 parents 9874e48 + 6f4aa6e
commit 9e32bee
Show file tree

Hide file tree

Showing 34 changed files with 84 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![Coverage Status](https://coveralls.io/repos/github/bindable-ui/bindable/badge.svg?branch=master)](https://coveralls.io/github/bindable-ui/bindable?branch=master)
 
-Bindable is a design system that aims to provide the video products in <a href="https://www.verizondigitalmedia.com" target="_blank">Verizon Media</a> tools to build cohesive and consistent interfaces. Bindable will provide a common pattern for desginers and engineers to follow. Bindable is developed as an <a href="https://aurelia.io" target="_blank">Aurelia</a> plugin and built with the <a href="https://github.com/aurelia/cli" target="_blank">aurelia-cli</a>.
+Bindable is a design system that aims to provide the video products in <a href="https://www.verizondigitalmedia.com" target="_blank" rel="noopener">Verizon Media</a> tools to build cohesive and consistent interfaces. Bindable will provide a common pattern for desginers and engineers to follow. Bindable is developed as an <a href="https://aurelia.io" target="_blank" rel="noopener">Aurelia</a> plugin and built with the <a href="https://github.com/aurelia/cli" target="_blank" rel="noopener">aurelia-cli</a>.
 
 ## Table of Contents
 
@@ -93,7 +93,7 @@ This Aurelia plugin project has a built-in dev app to simplify development.
 3. You can use normal `npm start` and `npm test` in development just like developing an app.
 4. To ensure compatibility to other apps, always use `PLATFORM.moduleName()` wrapper in files inside `src/`. You don't need to use the wrapper in `dev-app/` folder as CLI built-in bundler supports module name without the wrapper.
 
-The dev-app contains the <a href="https://bindable-ui.com" target="_blank">docs</a>. Use that to view what parameters are available when using the components in Bindable.
+The dev-app contains the <a href="https://bindable-ui.com" target="_blank" rel="noopener">docs</a>. Use that to view what parameters are available when using the components in Bindable.
 
 ### Run dev app
 

diff --git a/dev-app/app.html b/dev-app/app.html
@@ -14,6 +14,7 @@
                 <a
                     href="#/home"
                     class="logo"
+                    title="Link to the Bindable home page"
                 >
                     <svg
                         width="28"
@@ -51,7 +52,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.2.3"
+                        title="v1.2.4"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>
@@ -70,13 +71,15 @@
                         class="logo-vdms"
                         href="http://verizondigitalmedia.com"
                         target="_blank"
+                        rel="noopener"
                     >
                         Verizon Media
                     </a>
                     <a
                         class="footer-links"
                         href="https://github.com/bindable-ui/bindable/issues"
                         target="_blank"
+                        rel="noopener"
                     >
                         Report An Issue
                     </a>

diff --git a/dev-app/routes/components/forms/file/properties/index.ts b/dev-app/routes/components/forms/file/properties/index.ts
@@ -33,6 +33,11 @@ export class FileProperties {
             name: 'error-msg',
             value: '',
         },
+        {
+            description: 'Set if you need an id on the input field.',
+            name: 'id',
+            value: 'string',
+        },
         {
             description: 'Set if this file picker is going to be for choosing an image.',
             name: 'image-picker',

diff --git a/dev-app/routes/components/forms/slider/properties/index.ts b/dev-app/routes/components/forms/slider/properties/index.ts
@@ -35,6 +35,11 @@ export class SliderProperties {
             name: 'error-msg',
             value: '',
         },
+        {
+            description: 'Set if you need an id on the textarea.',
+            name: 'id',
+            value: 'string',
+        },
         {
             default: '4',
             description: 'Set how many increments you want in the slider. It is zero based.',

diff --git a/dev-app/routes/components/forms/textarea/properties/index.ts b/dev-app/routes/components/forms/textarea/properties/index.ts
@@ -29,6 +29,11 @@ export class TextAreaProperties {
             name: 'error-msg',
             value: '',
         },
+        {
+            description: 'Set if you need an id on the textarea.',
+            name: 'id',
+            value: 'string',
+        },
         {
             description: 'Set the label text. If left off no label will be placed.',
             name: 'label',

diff --git a/dev-app/routes/home/index.html b/dev-app/routes/home/index.html
@@ -282,6 +282,8 @@ <h1>bindable</h1>
                             <a
                                 href="https://aurelia.io"
                                 target="_blank"
+                                rel="noopener"
+                                title="Link to the Aurelia home page"
                             >
                                 <svg
                                     width="347"
@@ -569,6 +571,8 @@ <h1>bindable</h1>
                             <a
                                 href="https://www.typescriptlang.org/"
                                 target="_blank"
+                                rel="noopener"
+                                title="Link to the Typescript home page"
                             >
                                 <svg
                                     width="329"
@@ -612,6 +616,7 @@ <h1>bindable</h1>
                         <a
                             href="https://github.com/css-modules/css-modules"
                             target="_blank"
+                            rel="noopener"
                         ><img
                                 class="css-modules"
                                 src="resources/img/css-modules-logo.png"

diff --git a/dev-app/routes/introduction/contribute/contribute.html b/dev-app/routes/introduction/contribute/contribute.html
@@ -26,7 +26,7 @@
                         size="large"
                         max-width="40rem"
                     >
-                        It's hard for us to keep an eye on all parts of Bindable. As you are using it you might come across a bug. If so you can report it on the <a href="https://github.com/bindable-ui/bindable/issues" target="_blank">Github page</a>.
+                        It's hard for us to keep an eye on all parts of Bindable. As you are using it you might come across a bug. If so you can report it on the <a href="https://github.com/bindable-ui/bindable/issues" target="_blank" rel="noopener">Github page</a>.
                     </c-p>
                 </l-stack>
             </div>

diff --git a/dev-app/routes/introduction/theming/theming.html b/dev-app/routes/introduction/theming/theming.html
@@ -50,7 +50,7 @@
                             size="large"
                             max-width="40rem"
                         >
-                            To make your own theme it is easiest to download a copy of the <a href="https://github.com/bindable-ui/bindable/blob/master/src/global-styles/themes/main.css" target="_blank">main theme</a> and then make edits to it. Doing this will let you see all the available configurations and allow you set your own values. There is a legend at the top of the main.css file that you could use to search for section titles to jump to difference sections of the file.
+                            To make your own theme it is easiest to download a copy of the <a href="https://github.com/bindable-ui/bindable/blob/master/src/global-styles/themes/main.css" target="_blank" rel="noopener">main theme</a> and then make edits to it. Doing this will let you see all the available configurations and allow you set your own values. There is a legend at the top of the main.css file that you could use to search for section titles to jump to difference sections of the file.
                         </c-p>
                         <c-code>...
  *  BUTTON

diff --git a/dev-app/routes/layouts/box-link/index.html b/dev-app/routes/layouts/box-link/index.html
@@ -127,7 +127,7 @@
                     <c-h3>href &amp; target</c-h3>
                     <c-code-sample>
                         <l-stack>
-                            <l-box-link background="var(--c_darkGray)" href="http://google.com" target="_blank">
+                            <l-box-link background="var(--c_darkGray)" href="http://google.com" target="_blank" rel="noopener">
                                 <span>I will open in a new tab</span>
                             </l-box-link>
                         </l-stack>

diff --git a/dev-app/routes/layouts/examples/index.html b/dev-app/routes/layouts/examples/index.html
@@ -73,6 +73,7 @@
                                 <a
                                     href="#/layout-examples/basic"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">
@@ -97,6 +98,7 @@
                                 <a
                                     href="#/layout-examples/basic-centered"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover" style="height: 100%;">
@@ -121,6 +123,7 @@
                                 <a
                                     href="#/layout-examples/sidebar"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">
@@ -153,6 +156,7 @@
                                 <a
                                     href="#/layout-examples/sidebar-scrolling"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">
@@ -185,6 +189,7 @@
                                 <a
                                     href="#/layout-examples/nested-cover-scrolling"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">
@@ -238,6 +243,7 @@
                                 <a
                                     href="#/layout-examples/nested-sidebar-scrolling"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">
@@ -302,6 +308,7 @@
                                 <a
                                     href="#/layout-examples/nested-cover-table-scrolling"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">
@@ -365,6 +372,7 @@
                                 <a
                                     href="#/layout-examples/nested-cover-table-horizontal-scrolling"
                                     target="_blank"
+                                    rel="noopener noreferrer"
                                 >
                                     <l-cover bottom-gutter="var(--s1)">
                                         <div data-value="cover">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"

diff --git a/src/components/buttons/c-button/c-button.html b/src/components/buttons/c-button/c-button.html
@@ -33,6 +33,7 @@
     <a
         href.bind="href"
         target="${targetNew ? '_blank' : '_self'}"
+        rel="noopener"
         class="
             ${styles.button}
             ${styles[color]}

diff --git a/src/components/copy/c-copy/c-copy.html b/src/components/copy/c-copy/c-copy.html
@@ -31,6 +31,7 @@
                 "
                 href="${content}"
                 target="_blank"
+                rel="noopener noreferrer"
             >
                 ${content}
             </a>

diff --git a/src/components/forms/c-label/c-label.html b/src/components/forms/c-label/c-label.html
@@ -11,6 +11,7 @@
             ${styles.label}
             ${styles[state]}
         "
+        for="${for}"
     >
         <l-icon
             icon="${icon}"

diff --git a/src/components/forms/c-label/c-label.ts b/src/components/forms/c-label/c-label.ts
@@ -7,6 +7,8 @@ import {bindable} from 'aurelia-framework';
 import * as styles from './c-label.css.json';
 
 export class CLabel {
+    @bindable
+    public for;
     @bindable
     public icon;
     @bindable

diff --git a/src/components/forms/date/c-form-date/c-form-date.html b/src/components/forms/date/c-form-date/c-form-date.html
@@ -12,6 +12,7 @@
     >
         <c-label
             state="${_state}"
+            for="${id}"
             icon="${labelIcon}"
             label-icon-color="${labelIconColor}"
             if.bind="label"

diff --git a/src/components/forms/file/c-file-input/c-file-input.html b/src/components/forms/file/c-file-input/c-file-input.html
@@ -18,6 +18,7 @@
                 ${styles.file}
                 ${state === 'error' ? styles.error : ''}
             "
+            id="${id}"
             type="file"
             change.delegate="filesUploaded($event)"
             accept="image/*"
@@ -28,6 +29,7 @@
             ${styles.file}
             ${state === 'error' ? styles.error : ''}
         "
+        id="${id}"
         type="file"
         if.bind="!imagePicker"
         change.delegate="filesUploaded($event)"

diff --git a/src/components/forms/file/c-file-input/c-file-input.ts b/src/components/forms/file/c-file-input/c-file-input.ts
@@ -7,6 +7,8 @@ import {bindable, bindingMode} from 'aurelia-framework';
 import * as styles from './c-file-input.css.json';
 
 export class CFileInput {
+    @bindable
+    public id;
     @bindable({defaultBindingMode: bindingMode.twoWay})
     public files;
     @bindable

diff --git a/src/components/forms/file/c-form-file/c-form-file.html b/src/components/forms/file/c-form-file/c-form-file.html
@@ -12,6 +12,7 @@
     >
         <c-label
             state="${_state}"
+            for="${id}"
             if.bind="label"
         >
             ${label}
@@ -43,6 +44,7 @@
     </div>
     <c-file-input
         image-picker.bind="imagePicker"
+        id="${id}"
         state.bind="_state"
         files.bind="files"
         if.bind="_state !== 'disabled' && _state !== 'hidden'"

diff --git a/src/components/forms/file/c-form-file/c-form-file.ts b/src/components/forms/file/c-form-file/c-form-file.ts
@@ -5,13 +5,15 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 import {bindable, bindingMode} from 'aurelia-framework';
 import {authState} from '../../../../decorators/auth-state';
-
+import {generateRandom} from '../../../../helpers/generate-random';
 import * as styles from './c-form-file.css.json';
 
 @authState
 export class CFormFile {
     @bindable
     public errorMsg;
+    @bindable
+    public id = generateRandom();
     @bindable({defaultBindingMode: bindingMode.twoWay})
     public files;
     @bindable

diff --git a/src/components/forms/select/c-form-select/c-form-select.html b/src/components/forms/select/c-form-select/c-form-select.html
@@ -10,7 +10,10 @@
         class="${styles.labelWrapper}"
         show.bind="_state !== 'hidden' && label"
     >
-        <c-label state="${_state}">
+        <c-label
+            state="${_state}"
+            for="${id}"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
@@ -34,6 +37,7 @@
                 ${styles[_state]}
                 ${multiple ? styles.multiple : ''}
             "
+            id="${id}"
             value.bind="selectValue"
             multiple.bind="multiple"
             scroll.trigger="onScroll() & throttle"

diff --git a/src/components/forms/select/c-form-select/c-form-select.ts b/src/components/forms/select/c-form-select/c-form-select.ts
@@ -4,9 +4,8 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 */
 
 import {bindable, bindingMode, inject} from 'aurelia-framework';
-
 import {authState} from '../../../../decorators/auth-state';
-
+import {generateRandom} from '../../../../helpers/generate-random';
 import {lazyLoadCheck} from '../../../../helpers/lazy-load-check';
 import multiIndexSplicer from '../../../../helpers/multi-index-splicer';
 
@@ -18,6 +17,8 @@ export class CFormSelect {
     @bindable
     public actions;
     @bindable
+    public id = generateRandom();
+    @bindable
     public errorMsg;
     @bindable
     public warningMsg;

diff --git a/src/components/forms/slider/c-form-slider/c-form-slider.html b/src/components/forms/slider/c-form-slider/c-form-slider.html
@@ -13,6 +13,7 @@
         >
             <c-label
                 state="${_state}"
+                for="${id}"
                 if.bind="label"
             >
                 ${label}
@@ -21,6 +22,7 @@
         </div>
         <c-slider
             slider-value.bind="sliderValue"
+            id="${id}"
             increments.bind="increments"
             state.bind="_state"
             on-change.call="valueChanged(val)"

diff --git a/src/components/forms/slider/c-form-slider/c-form-slider.ts b/src/components/forms/slider/c-form-slider/c-form-slider.ts
@@ -5,13 +5,16 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 import {bindable, bindingMode} from 'aurelia-framework';
 import {authState} from '../../../../decorators/auth-state';
+import {generateRandom} from '../../../../helpers/generate-random';
 import * as styles from './c-form-slider.css.json';
 
 @authState
 export class CFormSlider {
     @bindable
     public errorMsg;
     @bindable
+    public id = generateRandom();
+    @bindable
     public increments = 4;
     @bindable
     public inline = false;