Fix: Add aria-labels and correct colour contrast (#645)

Fix: Add aria-labels and correct colour contrast
microsoftgraph · Jul 21, 2020 · 9ab439e · 9ab439e
2 parents 012d794 + 39ef73b
commit 9ab439e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
@@ -91,9 +91,12 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
                 calloutProps={{ gapSpace: 0 }}
                 styles={{ root: { display: 'inline-block' } }}
               >
-                <IconButton onClick={this.handleShareQuery} className='share-query-btn' iconProps={{
-                  iconName: 'Share'
-                }} />
+                <IconButton
+                  onClick={this.handleShareQuery}
+                  className='share-query-btn'
+                  iconProps={{ iconName: 'Share'}}
+                  aria-label={'Share query message'}
+                />
               </TooltipHost>
             </div>
 
@@ -108,9 +111,12 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
                 calloutProps={{ gapSpace: 0 }}
                 styles={{ root: { display: 'inline-block' } }}
               >
-                <IconButton onClick={this.toggleModal} className='share-query-btn' iconProps={{
-                  iconName: 'MiniExpandMirrored'
-                }} />
+                <IconButton
+                  onClick={this.toggleModal}
+                  className='share-query-btn'
+                  iconProps={{ iconName: 'MiniExpandMirrored'}}
+                  aria-label={'Expand response'}
+                />
               </TooltipHost>
             </div>
           </>}

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -330,6 +330,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
           placeholder={messages['Search sample queries']}
           onChange={this.searchValueChanged}
           styles={{ field: { paddingLeft: 10 } }}
+          aria-label={'Search'}
         />
         <hr />
         {error && <MessageBar messageBarType={MessageBarType.warning}

diff --git a/src/themes/light.ts b/src/themes/light.ts
@@ -18,7 +18,7 @@ export const light = {
     neutralQuaternary: '#d0d0d0',
     neutralTertiaryAlt: '#c8c8c8',
     neutralTertiary: '#c2c2c2',
-    neutralSecondary: '#858585',
+    neutralSecondary: '#535353',
     neutralPrimaryAlt: '#4b4b4b',
     neutralPrimary: '#333333',
     neutralDark: '#272727',