add aria label for password textfield (#648)

src/app/devices/addDevice/components/addDevice.tsx

@@ -113,6 +113,7 @@ export const AddDevice: React.FC = () => {
                     onChange={changePrimaryKey}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!primaryKey.error ? t(primaryKey.error) : ''}
                     description={t(ResourceKeys.deviceIdentity.authenticationType.symmetricKey.primaryKeyTooltip)}
                 />
@@ -124,6 +125,7 @@ export const AddDevice: React.FC = () => {
                     onChange={changeSecondaryKey}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!secondaryKey.error ? t(secondaryKey.error) : ''}
                     description={t(ResourceKeys.deviceIdentity.authenticationType.symmetricKey.secondaryKeyTooltip)}
                 />
@@ -142,6 +144,7 @@ export const AddDevice: React.FC = () => {
                     onChange={changePrimaryThumbprint}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!primaryKey.thumbprintError ? t(primaryKey.thumbprintError) : ''}
                     description={t(ResourceKeys.deviceIdentity.authenticationType.selfSigned.primaryThumbprintTooltip)}
                 />
@@ -153,6 +156,7 @@ export const AddDevice: React.FC = () => {
                     onChange={changeSecondaryThumbprint}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!secondaryKey.thumbprintError ? t(secondaryKey.thumbprintError) : ''}
                     description={t(ResourceKeys.deviceIdentity.authenticationType.selfSigned.secondaryThumbprintTooltip)}
                 />

src/app/devices/deviceIdentity/components/deviceIdentity.tsx

@@ -131,6 +131,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={state.identity.authentication.x509Thumbprint.primaryThumbprint}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             readOnly={true}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.selfSigned.primaryThumbprintTooltip)}
                         />
@@ -140,6 +141,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={state.identity.authentication.x509Thumbprint.secondaryThumbprint}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             readOnly={true}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.selfSigned.secondaryThumbprintTooltip)}
                         />
@@ -149,6 +151,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={generateX509ConnectionString(hostName, identity.deviceId)}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             readOnly={true}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.selfSigned.connectionStringTooltip)}
                         />
@@ -164,6 +167,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={generateX509ConnectionString(hostName, identity.deviceId)}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             readOnly={true}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.ca.connectionStringTooltip)}
                         />
@@ -178,6 +182,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={state.identity.authentication.symmetricKey.primaryKey}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             onChange={changePrimaryKey}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.symmetricKey.primaryKeyTooltip)}
                         />
@@ -188,6 +193,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={state.identity.authentication.symmetricKey.secondaryKey}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             onChange={changeSecondaryKey}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.symmetricKey.secondaryKeyTooltip)}
                         />
@@ -198,6 +204,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={generateConnectionString(hostName, identity.deviceId, identity.authentication.symmetricKey.primaryKey)}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             readOnly={true}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.symmetricKey.primaryConnectionStringTooltip)}
                         />
@@ -208,6 +215,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             value={generateConnectionString(hostName, identity.deviceId, identity.authentication.symmetricKey.secondaryKey)}
                             type={'password'}
                             canRevealPassword={true}
+                            revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                             readOnly={true}
                             description={t(ResourceKeys.deviceIdentity.authenticationType.symmetricKey.secondaryConnectionStringTooltip)}
                         />

src/app/devices/module/addModuleIdentity/components/addModuleIdentity.tsx

@@ -127,6 +127,7 @@ export const AddModuleIdentity: React.FC = () => {
                     onChange={changePrimaryKey}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!primaryKey.error ? t(primaryKey.error) : ''}
                     description={t(ResourceKeys.moduleIdentity.authenticationType.symmetricKey.primaryKeyTooltip)}
                 />
@@ -138,6 +139,7 @@ export const AddModuleIdentity: React.FC = () => {
                     onChange={changeSecondaryKey}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!secondaryKey.error ? t(secondaryKey.error) : ''}
                     description={t(ResourceKeys.moduleIdentity.authenticationType.symmetricKey.secondaryKeyTooltip)}
                 />
@@ -156,6 +158,7 @@ export const AddModuleIdentity: React.FC = () => {
                     onChange={changePrimaryThumbprint}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     errorMessage={!!primaryKey.thumbprintError ? t(primaryKey.thumbprintError) : ''}
                     description={t(ResourceKeys.moduleIdentity.authenticationType.selfSigned.primaryThumbprintTooltip)}
                 />
@@ -167,6 +170,7 @@ export const AddModuleIdentity: React.FC = () => {
                     onChange={changeSecondaryThumbprint}
                     type={'password'}
                     canRevealPassword={true}
+                    revealPasswordAriaLabel={t(ResourceKeys.common.revealPassword)}
                     readOnly={false}
                     errorMessage={!!secondaryKey.thumbprintError ? t(secondaryKey.thumbprintError) : ''}
                     description={t(ResourceKeys.moduleIdentity.authenticationType.selfSigned.secondaryThumbprintTooltip)}

src/localization/locales/en.json

@@ -11,6 +11,7 @@
         "home": "Home",
         "learnMore": "Learn more",
         "loading": "Loading...",
+        "revealPassword": "Show content",
         "maskedCopyableTextField": {
             "toggleMask": {
                 "label": {

src/localization/resourceKeys.ts

@@ -170,6 +170,7 @@ export class ResourceKeys {
          confirm : "common.navigation.confirm",
          expand : "common.navigation.expand",
       },
+      revealPassword : "common.revealPassword",
    };
    public static connectionStrings = {
       addConnectionCommand : {