ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

adds role of button to all links that are buttons (#11465)

Browse Source
This commit is contained in:
v-bbrady
2020-07-21 19:08:05 -07:00
committed by GitHub
parent 0f2b463536
commit 53ec7585a9
2 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
View File

@@ -13,14 +13,14 @@ export default () => `
<div class="gradient"> <div class="gradient">
<div class="ads-homepage-section tool-tip"> <div class="ads-homepage-section tool-tip">
<div class="tool-tip-container" id="tool-tip-container-wide"> <div class="tool-tip-container" id="tool-tip-container-wide">
<a class="ads-welcome-page-link" aria-describedby="tooltip-text-wide" id="preview-link-wide" class="preview-link" tabindex="0" name="preview"><p>Preview</p><i class="icon-info themed-icon"></i></a> <a role="button" class="ads-welcome-page-link" aria-describedby="tooltip-text-wide" id="preview-link-wide" class="preview-link" tabindex="0" name="preview"><p>Preview</p><i class="icon-info themed-icon"></i></a>
<span role="tooltip" id="tooltip-text-wide" class="tool-tip-text" aria-hidden="true"> <span role="tooltip" id="tooltip-text-wide" class="tool-tip-text" aria-hidden="true">
<h3 tabindex="0" class="preview-tooltip-header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3> <h3 tabindex="0" class="preview-tooltip-header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
<p tabindex="0" class="preview-tooltip-body">${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}</p> <p tabindex="0" class="preview-tooltip-body">${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}</p>
</span> </span>
</div> </div>
<div class="tool-tip-container" id="tool-tip-container-narrow"> <div class="tool-tip-container" id="tool-tip-container-narrow">
<a class="ads-welcome-page-link" aria-haspopup="true" class="preview-link" tabindex="0" id="preview-link-narrow" name="previewNarrow"><p>Preview</p><i class="icon-info themed-icon"></i></a> <a role="button" class="ads-welcome-page-link" aria-haspopup="true" class="preview-link" tabindex="0" id="preview-link-narrow" name="previewNarrow"><p>Preview</p><i class="icon-info themed-icon"></i></a>
</div> </div>
</div> </div>
<div id="preview-modal" class="modal" aria-modal="true" aria-hidden="true"> <div id="preview-modal" class="modal" aria-modal="true" aria-hidden="true">
@@ -51,7 +51,7 @@ export default () => `
</div> </div>
<div class="row header-bottom-nav-tiles ads-grid"> <div class="row header-bottom-nav-tiles ads-grid">
<div class="col"> <div class="col">
<a class="header-bottom-nav-tile-link" href="command:registeredServers.addConnection"> <a role="button" class="header-bottom-nav-tile-link ads-welcome-page-link" href="command:registeredServers.addConnection">
<div class="header-bottom-nav-tile tile tile-connection"> <div class="header-bottom-nav-tile tile tile-connection">
<h3>${escape(localize('welcomePage.createConnection', "Create a connection"))}</h3> <h3>${escape(localize('welcomePage.createConnection', "Create a connection"))}</h3>
<p>${escape(localize('welcomePage.createConnectionBody', "Connect to a database instance through the connection dialog."))}</p> <p>${escape(localize('welcomePage.createConnectionBody', "Connect to a database instance through the connection dialog."))}</p>
@@ -60,7 +60,7 @@ export default () => `
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a class="header-bottom-nav-tile-link" <a role="button" class="header-bottom-nav-tile-link ads-welcome-page-link"
href="command:workbench.action.files.newUntitledFile"> href="command:workbench.action.files.newUntitledFile">
<div class="header-bottom-nav-tile tile tile-query"> <div class="header-bottom-nav-tile tile tile-query">
<h3>${escape(localize('welcomePage.runQuery', "Run a query"))}</h3> <h3>${escape(localize('welcomePage.runQuery', "Run a query"))}</h3>
@@ -70,7 +70,7 @@ export default () => `
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a class="header-bottom-nav-tile-link" href="command:notebook.command.new"> <a role="button" class="header-bottom-nav-tile-link ads-welcome-page-link" href="command:notebook.command.new">
<div class="header-bottom-nav-tile tile tile-notebook"> <div class="header-bottom-nav-tile tile tile-notebook">
<h3>${escape(localize('welcomePage.createNotebook', "Create a notebook"))}</h3> <h3>${escape(localize('welcomePage.createNotebook', "Create a notebook"))}</h3>
<p>${escape(localize('welcomePage.createNotebookBody', "Build a new notebook using a native notebook editor."))}</p> <p>${escape(localize('welcomePage.createNotebookBody', "Build a new notebook using a native notebook editor."))}</p>
@@ -79,7 +79,7 @@ export default () => `
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a class="header-bottom-nav-tile-link" href="command:azdata.resource.deploy"> <a role="button" class="header-bottom-nav-tile-link ads-welcome-page-link" href="command:azdata.resource.deploy">
<div class="header-bottom-nav-tile tile tile-server"> <div class="header-bottom-nav-tile tile tile-server">
<h3>${escape(localize('welcomePage.deployServer', "Deploy a server"))}</h3> <h3>${escape(localize('welcomePage.deployServer', "Deploy a server"))}</h3>
<p>${escape(localize('welcomePage.deployServerBody', "Create a new instance of SQL Server on the platform of your choice."))}</p> <p>${escape(localize('welcomePage.deployServerBody', "Create a new instance of SQL Server on the platform of your choice."))}</p>
@@ -109,7 +109,7 @@ export default () => `
</ul> </ul>
<p class="none detail">No recent folders</p> <p class="none detail">No recent folders</p>
<div class="moreRecent"> <div class="moreRecent">
<a class="ads-welcome-page-link" href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "Show more"))} <a role="button" class="ads-welcome-page-link" href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "Show more"))}
<i class="icon-arrow-down-dark"></i> <i class="icon-arrow-down-dark"></i>
</a> </a>
</div> </div>
@@ -165,8 +165,7 @@ export default () => `
<div class="ads-homepage-section content extensions"> <div class="ads-homepage-section content extensions">
<div class="flex flex-j-between"> <div class="flex flex-j-between">
<h2>Extend your data studio</h2> <h2>Extend your data studio</h2>
<a class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a> <a role="button" class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
<a class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
</div> </div>
<div class="row ads-grid grip-gap-50"> <div class="row ads-grid grip-gap-50">
<div <div
@@ -179,7 +178,7 @@ export default () => `
<div class="extension-pack-extension-list flex flex-d-column flex-j-evenly flex-a-start"></div> <div class="extension-pack-extension-list flex flex-d-column flex-j-evenly flex-a-start"></div>
<div class="flex flex-j-end extension-pack-btn-container flex flex-j-between flex-a-center""> <div class="flex flex-j-end extension-pack-btn-container flex flex-j-between flex-a-center"">
<div class="extensionPack" href="#"></div> <div class="extensionPack" href="#"></div>
<a class="a-self-end link-learn-more flex flex-a-center ads-welcome-page-link" href="command:azdata.extension.open?%7B%22id%22%3A%22microsoft.admin-pack%22%7D">${escape(localize('welcomePage.learnMore', <a role="button" class="a-self-end link-learn-more flex flex-a-center ads-welcome-page-link" href="command:azdata.extension.open?%7B%22id%22%3A%22microsoft.admin-pack%22%7D">${escape(localize('welcomePage.learnMore',
"Learn more "))}<span class="icon-arrow-right"></span></a> "Learn more "))}<span class="icon-arrow-right"></span></a>
</div> </div>
</div> </div>

6
src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
View File

@@ -387,6 +387,7 @@ class WelcomePage extends Disposable {
let openFileButton = this._register(new Button(fileBtnContainer)); let openFileButton = this._register(new Button(fileBtnContainer));
openFileButton.label = openFileText; openFileButton.label = openFileText;
const getNewFileBtn = container.querySelector('#open-file-btn-container .monaco-button') as HTMLAnchorElement; const getNewFileBtn = container.querySelector('#open-file-btn-container .monaco-button') as HTMLAnchorElement;
getNewFileBtn.setAttribute('role', 'button');
const body = document.querySelector('body'); const body = document.querySelector('body');
if (body.classList.contains('windows') || body.classList.contains('linux')) { if (body.classList.contains('windows') || body.classList.contains('linux')) {
@@ -416,6 +417,7 @@ class WelcomePage extends Disposable {
let startTourBtn = new Button(containerRight); let startTourBtn = new Button(containerRight);
startTourBtn.label = localize('welcomePage.startTour', "Start Tour"); startTourBtn.label = localize('welcomePage.startTour', "Start Tour");
const removeTourBtn = document.createElement('a'); const removeTourBtn = document.createElement('a');
removeTourBtn.setAttribute('role', 'button');
const removeBtnClasses = ['btn-remove-tour', 'codicon', 'codicon-close']; const removeBtnClasses = ['btn-remove-tour', 'codicon', 'codicon-close'];
const flexClassesLeft = ['flex', 'flex-a-center']; const flexClassesLeft = ['flex', 'flex-a-center'];
const flexClassesRight = ['flex', 'flex-a-start']; const flexClassesRight = ['flex', 'flex-a-start'];
@@ -656,6 +658,7 @@ class WelcomePage extends Disposable {
a.innerText = name; a.innerText = name;
a.title = relativePath; a.title = relativePath;
a.setAttribute('aria-label', localize('welcomePage.openFolderWithPath', "Open folder {0} with path {1}", name, parentPath)); a.setAttribute('aria-label', localize('welcomePage.openFolderWithPath', "Open folder {0} with path {1}", name, parentPath));
a.setAttribute('role', 'button');
a.href = 'javascript:void(0)'; a.href = 'javascript:void(0)';
a.addEventListener('click', e => { a.addEventListener('click', e => {
@@ -717,6 +720,7 @@ class WelcomePage extends Disposable {
const bodyElm = document.createElement('p'); const bodyElm = document.createElement('p');
outerAnchorContainerElm.classList.add('extension'); outerAnchorContainerElm.classList.add('extension');
outerAnchorContainerElm.classList.add('tile'); outerAnchorContainerElm.classList.add('tile');
outerAnchorContainerElm.setAttribute('role', 'button');
outerAnchorContainerElm.href = extension.link; outerAnchorContainerElm.href = extension.link;
flexDivContainerElm.classList.add(...flexDivContainerClasses); flexDivContainerElm.classList.add(...flexDivContainerClasses);
descriptionContainerElm.classList.add('description'); descriptionContainerElm.classList.add('description');
@@ -752,6 +756,7 @@ class WelcomePage extends Disposable {
getDropdownBtn.title = extension.title || (extension.isKeymap ? localize('welcomePage.installKeymap', "Install {0} keymap", extension.name) : localize('welcomePage.installExtensionPack', "Install additional support for {0}", extension.name)); getDropdownBtn.title = extension.title || (extension.isKeymap ? localize('welcomePage.installKeymap', "Install {0} keymap", extension.name) : localize('welcomePage.installExtensionPack', "Install additional support for {0}", extension.name));
getDropdownBtn.setAttribute('aria-haspopup', 'true'); getDropdownBtn.setAttribute('aria-haspopup', 'true');
getDropdownBtn.setAttribute('aria-controls', 'dropdown'); getDropdownBtn.setAttribute('aria-controls', 'dropdown');
getDropdownBtn.setAttribute('role', 'navigation');
getDropdownBtn.id = 'dropdown-btn'; getDropdownBtn.id = 'dropdown-btn';
getDropdownBtn.classList.add('installExtension'); getDropdownBtn.classList.add('installExtension');
getDropdownBtn.setAttribute('data-extension', extension.id); getDropdownBtn.setAttribute('data-extension', extension.id);
@@ -798,6 +803,7 @@ class WelcomePage extends Disposable {
const outerContainerClasses = ['extension-pack-extension-container', 'flex', 'flex-j-center']; const outerContainerClasses = ['extension-pack-extension-container', 'flex', 'flex-j-center'];
const flexContainerClasses = ['flex', 'flex-a-center']; const flexContainerClasses = ['flex', 'flex-a-center'];
anchorElem.href = j.link; anchorElem.href = j.link;
anchorElem.setAttribute('role', 'button');
outerContainerElem.classList.add(...outerContainerClasses); outerContainerElem.classList.add(...outerContainerClasses);
flexContainerElem.classList.add(...flexContainerClasses); flexContainerElem.classList.add(...flexContainerClasses);
iconContainerElem.classList.add('icon'); iconContainerElem.classList.add('icon');