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;
@NavLargeSpace: 15px;
.skip-link {
position: fixed;
top: -200px;
}
html {
font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
padding: 0px;

View File

@ -257,7 +257,7 @@
range of values and is likely to have evenly distributed access patterns.</span>
</span>
</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,
attr: {
placeholder: partitionKeyPlaceholder,

View File

@ -7,6 +7,7 @@
</head>
<body>
<a class="skip-link" href="#data-explorer-content">Skip to content</a>
<header>
<div class="items" role="menubar">
<div class="cosmosDBTitle">
@ -48,6 +49,7 @@
<switch-directory-pane params="{data: switchDirectoryPane}"></switch-directory-pane>
<div id="data-explorer-content">
<!-- TODO generate version number dynamically -->
<iframe
id="explorerMenu"
@ -58,6 +60,7 @@
data-bind="visible: navigationSelection() === 'explorer'"
>
</iframe>
</div>
<div data-bind="react: firewallWarningComponentAdapter"></div>
<div data-bind="react: dialogComponentAdapter"></div>