A11y fixes - Add a skip link and remove duplicate ids (#381)

* Add a skip link to allow people who navigate sequentially through content more direct access to the primary content of the Data Explorer

Co-authored-by: Chris Cao (Zen3 Infosolutions America Inc) <v-yiqcao@microsoft.com>

* Rename id of partition key field in  Add Collection Pane to ensure no  elements contain duplicate attributes.

Co-authored-by: Chris Cao (Zen3 Infosolutions America Inc) <v-yiqcao@microsoft.com>
This commit is contained in:
Armando Trejo Oliver 2021-01-12 09:55:04 -08:00 committed by GitHub
parent 767d46480e
commit 9247a6c4a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 11 deletions

View File

@ -13,6 +13,11 @@
@NavMediumSpace: 10px; @NavMediumSpace: 10px;
@NavLargeSpace: 15px; @NavLargeSpace: 15px;
.skip-link {
position: fixed;
top: -200px;
}
html { html {
font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
padding: 0px; padding: 0px;

View File

@ -257,7 +257,7 @@
range of values and is likely to have evenly distributed access patterns.</span> range of values and is likely to have evenly distributed access patterns.</span>
</span> </span>
</p> </p>
<input type="text" id="partitionKeyValue" data-test="addCollection-partitionKeyValue" aria-required="true" size="40" <input type="text" id="addCollection-partitionKeyValue" data-test="addCollection-partitionKeyValue" aria-required="true" size="40"
class="textfontclr collid" data-bind="textInput: partitionKey, class="textfontclr collid" data-bind="textInput: partitionKey,
attr: { attr: {
placeholder: partitionKeyPlaceholder, placeholder: partitionKeyPlaceholder,

View File

@ -7,6 +7,7 @@
</head> </head>
<body> <body>
<a class="skip-link" href="#data-explorer-content">Skip to content</a>
<header> <header>
<div class="items" role="menubar"> <div class="items" role="menubar">
<div class="cosmosDBTitle"> <div class="cosmosDBTitle">
@ -48,16 +49,18 @@
<switch-directory-pane params="{data: switchDirectoryPane}"></switch-directory-pane> <switch-directory-pane params="{data: switchDirectoryPane}"></switch-directory-pane>
<!-- TODO generate version number dynamically --> <div id="data-explorer-content">
<iframe <!-- TODO generate version number dynamically -->
id="explorerMenu" <iframe
name="explorer" id="explorerMenu"
class="iframe" name="explorer"
title="explorer" class="iframe"
src="explorer.html?v=1.0.1&platform=Hosted" title="explorer"
data-bind="visible: navigationSelection() === 'explorer'" src="explorer.html?v=1.0.1&platform=Hosted"
> data-bind="visible: navigationSelection() === 'explorer'"
</iframe> >
</iframe>
</div>
<div data-bind="react: firewallWarningComponentAdapter"></div> <div data-bind="react: firewallWarningComponentAdapter"></div>
<div data-bind="react: dialogComponentAdapter"></div> <div data-bind="react: dialogComponentAdapter"></div>