add aria-labels

snapcrunch · Sep 18, 2021 · 243c48a · 243c48a
1 parent 7d4fb5b
commit 243c48a
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 24 deletions.
diff --git a/example/preferences.js b/example/preferences.js
@@ -19,7 +19,7 @@ const preferences = new ElectronPreferences({
 		},
 		// ...
 	},
-	debug: true, //true will open the dev tools
+	debug: false, //true will open the dev tools
 	webPreferences: {
 		webSecurity: true
 	},

diff --git a/src/app/components/main/components/group/components/fields/accelerator/index.jsx b/src/app/components/main/components/group/components/fields/accelerator/index.jsx
@@ -79,7 +79,7 @@ const AcceleratorField = ({ field, value, onChange }) => {
 	return (
 		<div className="field field-accelerator">
 			<div className="field-label">{ field.label }</div>
-			<input type="text" value={ (pressing && accelerator) || value } onKeyDown={ handleKeyDown } onKeyUp={ handleKeyUp } readOnly />
+			<input type="text" value={ (pressing && accelerator) || value } aria-label={ field.label } onKeyDown={ handleKeyDown } onKeyUp={ handleKeyUp } readOnly />
 			{ field.help && <span className="help">{ field.help }</span> }
 		</div>
 	);

diff --git a/src/app/components/main/components/group/components/fields/checkbox/index.jsx b/src/app/components/main/components/group/components/fields/checkbox/index.jsx
@@ -33,7 +33,7 @@ class CheckboxField extends React.Component {
 			return (
 				<label htmlFor={ id } className="checkbox-option" key={idx}>
 					{ option.label }
-					<input type="checkbox" id={ id } onChange={ this.onChange.bind(this) } checked={ checked } />
+					<input type="checkbox" id={ id } onChange={ this.onChange.bind(this) } checked={ checked } aria-label={ option.label } />
 					<span className="check-square" />
 				</label>
 			);
@@ -42,7 +42,7 @@ class CheckboxField extends React.Component {
 
 		return (
 			<div className="field field-checkbox">
-				<div className="field-label">{ label }</div>
+				<div className="field-label" aria-label={ label }>{ label }</div>
 				{ options }
 				{ help && <span className="help">{ help }</span> }
 			</div>

diff --git a/src/app/components/main/components/group/components/fields/directory/index.jsx b/src/app/components/main/components/group/components/fields/directory/index.jsx
@@ -25,7 +25,7 @@ class DirectoryField extends React.Component {
 
 		return (
 			<div className="field field-directory">
-				<div className="field-label">{ label }</div>
+				<div className="field-label" aria-label={ label }>{ label }</div>
 				<div className="value" onClick={ this.choose }>
 					{multiSelections ? 'Folders' : 'Folder'}:&nbsp;
 					{
@@ -38,7 +38,7 @@ class DirectoryField extends React.Component {
 							: 'None'
 					}
 				</div>
-				<button className="bt" onClick={ this.choose }>
+				<button className="bt" onClick={ this.choose } aria-label={ btLabel }>
 					{ btLabel }
 				</button>
 				{ help && <span className="help">{ help }</span> }

diff --git a/src/app/components/main/components/group/components/fields/dropdown/index.jsx b/src/app/components/main/components/group/components/fields/dropdown/index.jsx
@@ -8,13 +8,13 @@ class DropdownField extends React.Component {
 	render() {
 
 		const options = this.options.map((option, idx) => (
-			<option value={option.value} key={idx}>{option.label}</option>
+			<option value={option.value} key={idx} aria-label={ option.label }>{option.label}</option>
 		));
 
 		return (
 			<div className="field field-dropdown">
 				<div className="field-label">{ this.label }</div>
-				<select onChange={ this.onChange.bind(this) } value={ this.value }>
+				<select onChange={ this.onChange.bind(this) } value={ this.value } aria-label={ this.label }>
 					<option value="">-- Select One --</option>
 					{ options }
 				</select>

diff --git a/src/app/components/main/components/group/components/fields/file/index.jsx b/src/app/components/main/components/group/components/fields/file/index.jsx
@@ -25,7 +25,7 @@ class FileField extends React.Component {
 
 		return (
 			<div className="field field-file">
-				<div className="field-label">{label}</div>
+				<div className="field-label" aria-label={ label }>{label}</div>
 				<div className="value" onClick={this.choose}>
 					{multiSelections ? 'Files' : 'File'}:&nbsp;
 					{
@@ -38,7 +38,7 @@ class FileField extends React.Component {
 							: 'None'
 					}
 				</div>
-				<button className="bt" onClick={this.choose}>
+				<button className="bt" onClick={this.choose} aria-label={ btLabel }>
 					{btLabel}
 				</button>
 				{help && <span className="help">{help}</span>}

diff --git a/src/app/components/main/components/group/components/fields/list/index.jsx b/src/app/components/main/components/group/components/fields/list/index.jsx
@@ -30,7 +30,7 @@ class ListField extends React.Component {
 
 		return (
 			<div className="field field-list">
-				<div className="field-label">{ this.label }</div>
+				<div className="field-label" aria-label={ this.label }>{ this.label }</div>
 				<div>
 					<div>
 						<select style={ this.style } className="ep-list" size={ this.size } onChange={ this.selectItem.bind(this) }>
@@ -39,37 +39,37 @@ class ListField extends React.Component {
 
 									if (index === this.state.selectedIndex) {
 
-										return (<option selected value={item} key={index}>{item}</option>);
+										return (<option selected value={item} key={index} aria-label={ item }>{item}</option>);
 
 									}
 
-									return (<option value={item} key={index}>{item}</option>);
+									return (<option value={item} key={index} aria-label={ item }>{item}</option>);
 
 								})
 							}
 						</select>
 					</div>
 					<div className="ep-list-button-container">
-						<button className="ep-list-button" onClick={ this.addClick }><span className="ep-list-button-text">+</span></button>
-						<button className="ep-list-button" onClick={ this.removeClick }><span className="ep-list-button-text">-</span></button>
+						<button className="ep-list-button" onClick={ this.addClick } aria-label="Add"><span className="ep-list-button-text">+</span></button>
+						<button className="ep-list-button" onClick={ this.removeClick } aria-label="Remove"><span className="ep-list-button-text">-</span></button>
 						{ this.orderable
 					&& <React.Fragment>
-						<button className="ep-list-button" onClick={ this.upClick }><span className="ep-list-button-text">↑</span></button>
-						<button className="ep-list-button" onClick={ this.downClick }><span className="ep-list-button-text">↓</span></button>
+						<button className="ep-list-button" onClick={ this.upClick } aria-label="Move up"><span className="ep-list-button-text">↑</span></button>
+						<button className="ep-list-button" onClick={ this.downClick } aria-label="Move down"><span className="ep-list-button-text">↓</span></button>
 					</React.Fragment>
 						}
 					</div>
 					<ReactModal style={ this.modalStyle } shouldCloseOnOverlayClick={true} isOpen={ this.state.showInputModal } contentLabel="Add Item" closeTimeoutMS={ this.modalCloseTimeoutMS }>
 						<div className="ep-list-modal-container">
 							<div className="ep-list-modal-input-container">
 								<label className="ep-list-modal-input-label">{ this.addItemLabel }</label>
-								<input className="ep-list-modal-input" type="text" value={ this.state.itemToAdd } autoFocus={ true } onChange={ this.itemToAddChanged } />
+								<input className="ep-list-modal-input" type="text" value={ this.state.itemToAdd } autoFocus={ true } onChange={ this.itemToAddChanged } aria-label={ this.addItemLabel } />
 							</div>
 							<div className="ep-list-modal-button-container">
-								<button className="ep-list-modal-button" onClick={ this.cancelAdd.bind(this) }>Cancel</button>
+								<button className="ep-list-modal-button" onClick={ this.cancelAdd.bind(this) } aria-label="Cancel">Cancel</button>
 								{ (this.addItemValidator.test(this.state.itemToAdd)
-									&& <button className="ep-list-modal-button" onClick={ this.saveItem.bind(this) }>Save</button>)
-									|| <button className="ep-list-modal-button" disabled="disabled">Save</button>
+									&& <button className="ep-list-modal-button" onClick={ this.saveItem.bind(this) } aria-label="Save">Save</button>)
+									|| <button className="ep-list-modal-button" disabled="disabled" aria-label="Save">Save</button>
 								}
 							</div>
 						</div>

diff --git a/src/app/components/main/components/group/components/fields/radio/index.jsx b/src/app/components/main/components/group/components/fields/radio/index.jsx
@@ -17,7 +17,7 @@ class RadioField extends React.Component {
 			return (
 				<label htmlFor={ id } className="radio-option" key={ idx }>
 					{ option.label }
-					<input type="radio" id={ id } onChange={ this.onChange.bind(this) } checked={ option.value === this.value } name={ fieldID } />
+					<input type="radio" id={ id } onChange={ this.onChange.bind(this) } checked={ option.value === this.value } name={ fieldID } aria-label={ option.label } />
 					<span className="check-circle" />
 				</label>
 			);

diff --git a/src/app/components/main/components/group/components/fields/slider/index.jsx b/src/app/components/main/components/group/components/fields/slider/index.jsx
@@ -10,7 +10,7 @@ class SliderField extends React.Component {
 		return (
 			<div className="field field-slider">
 				<div className="field-label">{ this.label }</div>
-				<input type="range" onChange={ this.onChange.bind(this) } min={ this.min } max={ this.max } step={ this.step } value={ this.value }/>
+				<input type="range" onChange={ this.onChange.bind(this) } min={ this.min } max={ this.max } step={ this.step } value={ this.value } aria-label={ this.label }/>
 				<label>{ this.value }</label>
 				{ this.help && <span className="help">{ this.help }</span> }
 			</div>

diff --git a/src/app/components/main/components/group/components/fields/text/index.jsx b/src/app/components/main/components/group/components/fields/text/index.jsx
@@ -10,7 +10,7 @@ class TextField extends React.Component {
 		return (
 			<div className="field field-text">
 				<div className="field-label">{ this.label }</div>
-				<input type={ this.inputType } onChange={ this.onChange.bind(this) } value={ this.value }/>
+				<input type={ this.inputType } onChange={ this.onChange.bind(this) } value={ this.value } aria-label={ this.label }/>
 				{ this.help && <span className="help">{ this.help }</span> }
 			</div>
 		);

diff --git a/src/app/components/sidebar/index.jsx b/src/app/components/sidebar/index.jsx
@@ -21,6 +21,7 @@ class Sidebar extends React.Component {
             return (
                 <li key={ section.id } className={ className } role="tab" id={ `tab-${section.id}` }
                     aria-selected={ isActive } aria-controls={ `tabpanel-${section.id}` } tabIndex={ isActive ? 0 : -1 }
+                    aria-label={ section.label }
                     onClick={ this.selectSection.bind(this, section.id) }>
                     <div className="section-icon" style={ style } />
                     <span className="section-label">{ section.label }</span>