diff --git a/less/documentDB.less b/less/documentDB.less index bc36d1483..1395c9482 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -2576,6 +2576,10 @@ a:link { .querydropdown.placeholderVisible { font-style: italic; } +.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #767474; + opacity: 1; +} .querydropdown:hover { background-color: @AccentLow; @@ -3087,3 +3091,4 @@ a:link { background: white; height: 100%; } + diff --git a/less/resourceTree.less b/less/resourceTree.less index 68aa3d0de..da7a5c90d 100644 --- a/less/resourceTree.less +++ b/less/resourceTree.less @@ -5,6 +5,7 @@ overflow: auto; .databaseHeader { + padding: 1px; font-size: 14px; } diff --git a/src/Explorer/Controls/Tabs/TabComponent.tsx b/src/Explorer/Controls/Tabs/TabComponent.tsx index 7936321d0..9cfcf8ae5 100644 --- a/src/Explorer/Controls/Tabs/TabComponent.tsx +++ b/src/Explorer/Controls/Tabs/TabComponent.tsx @@ -46,10 +46,13 @@ export class TabComponent extends React.Component { } let className = "toggleSwitch"; + let ariaselected; if (index === this.props.currentTabIndex) { className += " selectedToggle"; + ariaselected = true; } else { className += " unselectedToggle"; + ariaselected = false; } return ( @@ -57,9 +60,10 @@ export class TabComponent extends React.Component { this.setActiveTab(index)} aria-label={`Select tab: ${tab.title}`} + aria-selected={ariaselected} > {tab.title} @@ -77,7 +81,11 @@ export class TabComponent extends React.Component { return (
- {!this.props.hideHeader &&
{this.renderTabTitles()}
} + {!this.props.hideHeader && ( +
+ {this.renderTabTitles()} +
+ )}
{currentTabContent.render()}
); diff --git a/src/Explorer/Controls/TreeComponent/treeComponent.less b/src/Explorer/Controls/TreeComponent/treeComponent.less index e13a9e40d..8be1a3c52 100644 --- a/src/Explorer/Controls/TreeComponent/treeComponent.less +++ b/src/Explorer/Controls/TreeComponent/treeComponent.less @@ -3,7 +3,7 @@ .treeComponent { .nodeItem { &:focus { - outline: 1px dashed @AccentMedium; + outline: 2px @AccentMedium; } .treeNodeHeader { diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx index 540e4d85c..4fff25384 100644 --- a/src/Explorer/Panes/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel.tsx @@ -403,6 +403,7 @@ export class AddCollectionPanel extends React.Component diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx index b289c658b..bcd867756 100644 --- a/src/Explorer/Tabs/Tabs.tsx +++ b/src/Explorer/Tabs/Tabs.tsx @@ -92,6 +92,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind? } }} className={active ? "active tabList" : "tabList"} + style={active ? { fontWeight: "bolder" } : {}} title={useObservable(tab?.tabPath || ko.observable(""))} aria-selected={active} aria-expanded={active}