fix(111): Fix color contrast for fields error message

hivemq-edge/src/frontend/cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'cypress'
 import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
 
 export default defineConfig({
+  retries: { runMode: 2, openMode: 0 },
   e2e: {
     baseUrl: 'http://localhost:3000',
     setupNodeEvents(on) {

hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SubscriptionsPanel.spec.cy.tsx

@@ -49,7 +49,7 @@ describe('SubscriptionsPanel', () => {
 
     cy.checkAccessibility(undefined, {
       rules: {
-        // TODO[NVL] Font too small.
+        // TODO[#111] Color-contrast fixed but still not passing. Flaky with expandable panel
         'color-contrast': { enabled: false },
       },
     })

hivemq-edge/src/frontend/src/modules/EdgeVisualisation/components/nodes/NodeAdapter.spec.cy.tsx

@@ -29,12 +29,7 @@ describe('NodeAdapter', () => {
     cy.injectAxe()
     cy.mountWithProviders(mockReactFlow(<NodeAdapter {...MOCK_NODE_ADAPTER} />))
 
-    cy.checkAccessibility(undefined, {
-      rules: {
-        // TODO[16486] Font too small. See https://hivemq.kanbanize.com/ctrl_board/57/cards/16486/details/
-        'color-contrast': { enabled: false },
-      },
-    })
+    cy.checkAccessibility()
     cy.percySnapshot('Component: NodeAdapter')
   })
 })

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx

@@ -2,7 +2,7 @@
 
 import { FieldTemplateProps } from '@rjsf/utils'
 import { RenderFieldTemplate } from './RenderFieldTemplate.tsx'
-import { FormLabel, Input, Text } from '@chakra-ui/react'
+import { FormErrorMessage, FormLabel, Input } from '@chakra-ui/react'
 
 const MOCK_TEXT = 'You will have to type something'
 const MOCK_ERROR = 'This is an error message'
@@ -15,7 +15,7 @@ const makeMockProps = (props: Partial<FieldTemplateProps>): Partial<FieldTemplat
         <Input value={'a dumb value'} />
       </>
     ),
-    errors: <Text>{props.rawErrors?.join(', ')}</Text>,
+    errors: <FormErrorMessage>{props.rawErrors?.join(', ')}</FormErrorMessage>,
     description: <div>{props.rawDescription}</div>,
   }
 }
@@ -42,12 +42,7 @@ describe('CustomFieldTemplate', () => {
     cy.mountWithProviders(<RenderFieldTemplate {...rest} children={children} />)
     cy.get('[role="group"]').should('not.contain.text', MOCK_TEXT)
     cy.get('[role="group"]').should('contain.text', MOCK_ERROR)
-    cy.checkAccessibility(undefined, {
-      rules: {
-        // TODO[93] Need to change the default colour of the error message. See https://discord.com/channels/660863154703695893/1150880181356089374
-        'color-contrast': { enabled: false },
-      },
-    })
+    cy.checkAccessibility()
   })
 
   it('should render the helper text', () => {

hivemq-edge/src/frontend/src/modules/Theme/styles/FormErrorMessage.ts

@@ -5,7 +5,8 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
 
 const hivemq = definePartsStyle({
   text: {
-    color: 'red.700',
+    // Fix "color-contrast" (WCAG)
+    color: 'red.600',
   },
 })
 

hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts

@@ -100,6 +100,6 @@ export const themeHiveMQ = extendTheme({
     Stat: statTheme,
     Drawer: drawerTheme,
     Form: formControlTheme,
-    FormErrorMessage: formErrorMessageTheme,
+    FormError: formErrorMessageTheme,
   },
 })