Vivaldi requires tabindex="0" for <a> with svg icon inside

This commit is contained in:
tophf 2018-03-29 06:37:04 +03:00
parent 5a6a403cc9
commit a2c80f7017
4 changed files with 41 additions and 32 deletions

View File

@ -117,7 +117,7 @@
<br>
<div class="applies-to">
<label i18n-text="appliesLabel">
<a href="#" class="svg-inline-wrapper applies-to-help">
<a href="#" class="svg-inline-wrapper applies-to-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</label>
@ -135,14 +135,14 @@
<div data-type="main">
<div data-type="content"></div>
<div data-type="actions">
<a data-action="case" i18n-title="searchCaseSensitive" href="#">Aa</a>
<a data-action="prev" i18n-title="genericPrevious" href="#" data-hotkey-tooltip="findPrev">
<a data-action="case" i18n-title="searchCaseSensitive" href="#" tabindex="0">Aa</a>
<a data-action="prev" i18n-title="genericPrevious" href="#" data-hotkey-tooltip="findPrev" tabindex="0">
<svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
</a>
<a data-action="next" i18n-title="genericNext" href="#" data-hotkey-tooltip="findNext">
<a data-action="next" i18n-title="genericNext" href="#" data-hotkey-tooltip="findNext" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
</a>
<a data-action="close" i18n-title="confirmClose" href="#" data-hotkey-tooltip="=Esc">
<a data-action="close" i18n-title="confirmClose" href="#" data-hotkey-tooltip="=Esc" tabindex="0">
<svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
</a>
</div>
@ -271,7 +271,7 @@
</div>
<div id="mozilla-format-container">
<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading">
<a id="to-mozilla-help" class="svg-inline-wrapper" href="#">
<a id="to-mozilla-help" class="svg-inline-wrapper" href="#" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</h2>
@ -316,7 +316,7 @@
<input id="editor.colorpicker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
<a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote">
<a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
</a>
</div>
@ -336,7 +336,7 @@
<select id="editor.keyMap"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
<a id="keyMap-help" href="#" class="svg-inline-wrapper">
<a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
@ -368,7 +368,7 @@
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
<a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
<a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
</a>
</div>
@ -376,7 +376,7 @@
<details id="lint" class="hidden" data-pref="editor.lint.expanded">
<summary>
<h2 i18n-text="linterIssues">: <span id="issue-count"></span>
<a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click">
<a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</h2>
@ -391,7 +391,7 @@
</div>
<section id="sections">
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span>
<a id="sections-help" href="#" class="svg-inline-wrapper">
<a id="sections-help" href="#" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</h2>

View File

@ -64,8 +64,8 @@
<a class="style-name-link"></a>
</h2>
<p class="actions">
<a target="_blank" class="homepage"></a>
<a href="#" class="delete" i18n-title="deleteStyleLabel">
<a target="_blank" class="homepage" tabindex="0"></a>
<a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
@ -74,7 +74,7 @@
</p>
<div class="applies-to">
<div class="targets"></div>
<a href="#" class="expander">...</a>
<a href="#" class="expander" tabindex="0">...</a>
</div>
</div>
</template>
@ -93,14 +93,14 @@
</template>
<template data-id="configureIcon">
<a href="#" class="configure-usercss" i18n-title="configureStyle">
<a href="#" class="configure-usercss" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a>
</template>
<template data-id="updaterIcons">
<span class="updater-icons">
<a href="#" class="check-update" i18n-title="checkForUpdate">
<a href="#" class="check-update" i18n-title="checkForUpdate" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
@ -108,7 +108,7 @@
C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
</svg>
</a>
<a href="#" class="update" i18n-title="installUpdate">
<a href="#" class="update" i18n-title="installUpdate" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
<rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
@ -175,7 +175,7 @@
<details id="filters" data-pref="manage.filters.expanded">
<summary>
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
<a id="reset-filters" href="#">
<a id="reset-filters" href="#" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<title i18n-text="genericResetLabel"></title>
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
@ -250,7 +250,7 @@
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
data-filter=":not(.not-matching)"
data-filter-hide=".not-matching">
<a href="#" id="search-help">
<a href="#" id="search-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
@ -262,14 +262,14 @@
<select id="manage.newUI.sort"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
<a href="#" id="sorter-help">
<a href="#" id="sorter-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</div>
<p class="nowrap">
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
<a href="#" id="update-history" i18n-title="genericHistoryLabel">
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
</svg>
@ -292,7 +292,8 @@
<span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
<a id="usercss-wiki"
href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n-title="externalUsercssDocument">
i18n-title="externalUsercssDocument"
tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
@ -315,7 +316,7 @@
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
<input id="manage.newUI.favicons" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<a href="#" data-toggle-on-click="#faviconsHelp">
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
<svg class="svg-icon select-arrow">
<title i18n-text="optionsSubheading"></title>
<use xlink:href="#svg-icon-select-arrow"/>

View File

@ -113,7 +113,11 @@
<div class="items">
<label>
<span i18n-text="optionsUpdateInterval">
<a data-cmd="note" i18n-title="optionsUpdateImportNote" href="#" class="svg-inline-wrapper">
<a data-cmd="note"
i18n-title="optionsUpdateImportNote"
href="#"
class="svg-inline-wrapper"
tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>
@ -125,12 +129,12 @@
<div class="block" id="advanced">
<div class="collapsible-resizer">
<h1 i18n-text="optionsAdvanced">
<a href="#" class="svg-inline-wrapper is-collapsed">
<a href="#" class="svg-inline-wrapper is-collapsed" tabindex="0">
<svg class="svg-icon" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg>
</a>
<a href="#" class="svg-inline-wrapper is-expanded">
<a href="#" class="svg-inline-wrapper is-expanded" tabindex="0">
<svg class="svg-icon" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
</svg>
@ -140,7 +144,11 @@
<div class="items">
<label>
<span i18n-text="optionsAdvancedExposeIframes">
<a data-cmd="note" i18n-title="optionsAdvancedExposeIframesNote" href="#" class="svg-inline-wrapper">
<a data-cmd="note"
i18n-title="optionsAdvancedExposeIframesNote"
href="#"
class="svg-inline-wrapper"
tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>

View File

@ -31,17 +31,17 @@
</label>
</div>
<div class="actions">
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
<a href="#" class="configure" i18n-title="configureStyle">
<a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
</svg>
</a>
<a href="#" class="delete" i18n-title="deleteStyleLabel">
<a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
<svg class="svg-icon remove" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
</svg>