Ying/accessibility (#683)

* fix a few accessibility issues

* fix a few accessibility issues 2

* package update

package.json

@@ -72,6 +72,9 @@
     "@azure/core-amqp": "3.2.0",
     "@azure/event-hubs": "5.6.0",
     "@azure/msal-node": "1.14.6",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@fluentui/react": "8.101.2",
     "@microsoft/applicationinsights-web": "2.8.4",
     "@rjsf/fluent-ui": "5.7.0",
@@ -98,7 +101,6 @@
     "react-jsonschema-form": "1.8.1",
     "react-monaco-editor": "0.54.0",
     "react-router-dom": "5.2.0",
-    "react-smooth-dnd": "0.11.0",
     "react-toastify": "4.4.0",
     "redux-saga": "1.1.3",
     "semver": "6.3.1",

src/app/css/_deviceDetail.scss

@@ -37,6 +37,12 @@
     margin-bottom: 15px;
 }
 
+.ms-ContextualMenu-secondaryText {
+    @include themify($themes) {
+        color: themed('disabledText') !important;
+    }
+}
+
 .properties-section-command-bar {
     .ms-CommandBar {
         border-bottom: 0px !important;

src/app/devices/cloudToDeviceMessage/components/__snapshots__/cloudToDeviceMessage.spec.tsx.snap

@@ -32,6 +32,7 @@ exports[`cloudToDeviceMessage matches snapshot 1`] = `
       cloudToDeviceMessage.body
     </LabelWithTooltip>
     <StyledTextFieldBase
+      ariaLabel="cloudToDeviceMessage.body"
       className="cloud-to-device-message-text-field"
       multiline={true}
       onChange={[Function]}

src/app/devices/cloudToDeviceMessage/components/cloudToDeviceMessage.tsx

@@ -192,7 +192,13 @@ export const CloudToDeviceMessage: React.FC = () => {
                 >
                     {t(ResourceKeys.cloudToDeviceMessage.body)}
                 </LabelWithTooltip>
-                <TextField className="cloud-to-device-message-text-field" multiline={true} rows={textFieldRows} onChange={onTextFieldChange}/>
+                <TextField
+                    className="cloud-to-device-message-text-field"
+                    multiline={true}
+                    rows={textFieldRows}
+                    onChange={onTextFieldChange}
+                    ariaLabel={t(ResourceKeys.cloudToDeviceMessage.body)}
+                />
                 <Checkbox
                     label={t(ResourceKeys.cloudToDeviceMessage.addTimestamp)}
                     ariaLabel={t(ResourceKeys.cloudToDeviceMessage.addTimestamp)}