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:
parent
767d46480e
commit
9247a6c4a2
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue