Fixed a11y issue on edit instance button (#90)

* fixed a11y issue on edit instance button * Capitalized the first character of aria-label.
microsoft · Jan 22, 2019 · b2f4ec6 · b2f4ec6
1 parent d920bbb
commit b2f4ec6
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/src/DetailsView/components/assessment-instance-table.tsx b/src/DetailsView/components/assessment-instance-table.tsx
@@ -34,7 +34,7 @@ export interface IAssessmentInstanceRowData<P = {}> extends IObjectWithKey {
 
 export interface ICapturedInstanceRowData extends IObjectWithKey {
     instance: IUserCapturedInstance;
-    removeButton: JSX.Element;
+    instanceActionButtons: JSX.Element;
 }
 
 export class AssessmentInstanceTable extends React.Component<IAssessmentInstanceTableProps> {

diff --git a/src/DetailsView/components/assessment-table-column-config-handler.tsx b/src/DetailsView/components/assessment-table-column-config-handler.tsx
@@ -39,11 +39,11 @@ export class AssessmentTableColumnConfigHandler {
             onRender: this.onRenderCapturedInstanceDetailsColumn,
         },
         {
-            key: 'removeButton',
-            name: 'remove instance',
+            key: 'instanceActionButtons',
+            name: 'instance actions',
             isIconOnly: true,
-            ariaLabel: 'remove instance',
-            fieldName: 'removeButton',
+            ariaLabel: 'Instance actions',
+            fieldName: 'instanceActionButtons',
             minWidth: 100,
             maxWidth: 100,
             isResizable: false,

diff --git a/src/DetailsView/handlers/assessment-instance-table-handler.tsx b/src/DetailsView/handlers/assessment-instance-table-handler.tsx
@@ -99,7 +99,7 @@ export class AssessmentInstanceTableHandler {
         return instances.map((instance: IUserCapturedInstance) => {
             return {
                 instance: instance,
-                removeButton: this.renderRemoveButton(instance, test, step),
+                instanceActionButtons: this.renderInstanceActionButtons(instance, test, step),
             };
         });
     }
@@ -147,7 +147,7 @@ export class AssessmentInstanceTableHandler {
     }
 
     @autobind
-    private renderRemoveButton(instance: IUserCapturedInstance, test: VisualizationType, step: string): JSX.Element {
+    private renderInstanceActionButtons(instance: IUserCapturedInstance, test: VisualizationType, step: string): JSX.Element {
         return (
             <AssessmentInstanceEditAndRemoveControl
                 test={test}

diff --git a/src/tests/unit/tests/DetailsView/components/assessment-table-column-config-handler.test.tsx b/src/tests/unit/tests/DetailsView/components/assessment-table-column-config-handler.test.tsx
@@ -92,7 +92,7 @@ describe('AssessmentTableColumnConfigHandlerTest', () => {
                 id: 'id',
                 description: 'comment',
             },
-            removeButton: null,
+            instanceActionButtons: null,
         };
         const expected = (
             <AssessmentInstanceDetailsColumn
@@ -126,10 +126,10 @@ describe('AssessmentTableColumnConfigHandlerTest', () => {
                 isResizable: true,
             },
             {
-                key: 'removeButton',
-                name: 'remove instance',
-                ariaLabel: 'remove instance',
-                fieldName: 'removeButton',
+                key: 'instanceActionButtons',
+                name: 'instance actions',
+                ariaLabel: 'Instance actions',
+                fieldName: 'instanceActionButtons',
                 minWidth: 100,
                 maxWidth: 100,
                 isResizable: false,

diff --git a/src/tests/unit/tests/DetailsView/handlers/assessment-instance-table-handler.test.tsx b/src/tests/unit/tests/DetailsView/handlers/assessment-instance-table-handler.test.tsx
@@ -133,7 +133,7 @@ describe('AssessmentInstanceTableHandlerTest', () => {
             assessmentNavState.selectedTestStep,
         );
 
-        const removeButton: JSX.Element = (
+        const instanceActionButtons: JSX.Element = (
             <AssessmentInstanceEditAndRemoveControl
                 test={assessmentNavState.selectedTestType}
                 step={assessmentNavState.selectedTestStep}
@@ -147,7 +147,7 @@ describe('AssessmentInstanceTableHandlerTest', () => {
         const expectedRows: ICapturedInstanceRowData[] = [
             {
                 instance: instance,
-                removeButton: removeButton,
+                instanceActionButtons: instanceActionButtons,
             },
         ];
         actionMessageCreatorMock.verifyAll();