1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-18 04:21:12 +02:00

add proper aria-label on buttons

This commit is contained in:
Kushagra Gour
2018-07-03 09:59:13 +05:30
parent ed670db395
commit 53faebfe28
2 changed files with 8 additions and 4 deletions

View File

@@ -20,7 +20,7 @@ export default class Footer extends Component {
onClick={this.props.saveHtmlBtnClickHandler} onClick={this.props.saveHtmlBtnClickHandler}
id="saveHtmlBtn" id="saveHtmlBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile" class="mode-btn hint--rounded hint--top-left hide-on-mobile"
data-hint="Save as HTML file" aria-label="Save as HTML file"
> >
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
@@ -67,6 +67,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 1)} onClick={this.layoutBtnClickhandler.bind(this, 1)}
id="layoutBtn1" id="layoutBtn1"
class="mode-btn hide-on-mobile" class="mode-btn hide-on-mobile"
aria-label="Switch to layout with preview on right"
> >
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlinkHref="#mode-icon" /> <use xlinkHref="#mode-icon" />
@@ -76,6 +77,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 2)} onClick={this.layoutBtnClickhandler.bind(this, 2)}
id="layoutBtn2" id="layoutBtn2"
class="mode-btn hide-on-mobile" class="mode-btn hide-on-mobile"
aria-label="Switch to layout with preview on bottom"
> >
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlinkHref="#mode-icon" /> <use xlinkHref="#mode-icon" />
@@ -85,6 +87,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 3)} onClick={this.layoutBtnClickhandler.bind(this, 3)}
id="layoutBtn3" id="layoutBtn3"
class="mode-btn hide-on-mobile" class="mode-btn hide-on-mobile"
aria-label="Switch to layout with preview on left"
> >
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
<use xlinkHref="#mode-icon" /> <use xlinkHref="#mode-icon" />
@@ -94,6 +97,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 5)} onClick={this.layoutBtnClickhandler.bind(this, 5)}
id="layoutBtn5" id="layoutBtn5"
class="mode-btn hide-on-mobile" class="mode-btn hide-on-mobile"
aria-label="Switch to layout with all vertical panes"
> >
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlinkHref="#vertical-mode-icon" /> <use xlinkHref="#vertical-mode-icon" />
@@ -103,7 +107,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 4)} onClick={this.layoutBtnClickhandler.bind(this, 4)}
id="layoutBtn4" id="layoutBtn4"
class="mode-btn hint--top-left hint--rounded hide-on-mobile" class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label="Full Screen" aria-label="Switch to full screen preview"
> >
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" /> <rect x="0" y="0" width="100" height="100" />
@@ -127,7 +131,7 @@ export default class Footer extends Component {
class={`notifications-btn mode-btn hint--top-left hint--rounded ${ class={`notifications-btn mode-btn hint--top-left hint--rounded ${
this.props.hasUnseenChangelog ? 'has-new' : '' this.props.hasUnseenChangelog ? 'has-new' : ''
}`} }`}
aria-label="Notifications" aria-label="See Changelog"
> >
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" /> <path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />

View File

@@ -212,7 +212,7 @@ export default class SavedItemPane extends Component {
<button <button
onClick={this.importBtnClickHandler.bind(this)} onClick={this.importBtnClickHandler.bind(this)}
class="btn--dark hint--bottom-left hint--rounded hint--medium" class="btn--dark hint--bottom-left hint--rounded hint--medium"
aria-label="Only the file that you export through the 'Export' button can be imported." aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
> >
Import Import
</button> </button>