[RFE] Declutter Nebraska Browser Console

[ErvinRacz]

Current situation

The console is cluttered with different kinds of warning messages and logs.

Impact

• Warning messages not being resolved creates annoyance which comes especially during development where additional warnings are appended by react and other libraries.
• Risk of UI anomalies

Ideal future situation

Warning messages are resolved and there is no unnecessary log in the console in both environments: during Nebraska development and in production mode too.

Implementation options

• Remove console logs
• Apply recommended ARIA practices
• Fix the configuration of libraries
• Some warnings might be resolved only by updating dependencies. If the dependency update is easy, it can be part of this issues completion, otherwise leave it for a future PR.

Additional information

Examples:

i18next.js:22  i18next::backendConnector: loading namespace translation for language en failed Error: Cannot find module './en/translation.json'

ThemeProviderNexti18n.tsx:53  MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.

i18next::translator: key "Applications" for languages "en" won't get resolved as namespace "applications" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

ModalButton.tsx:62  i18next::translator: key "add" for languages "en" won't get resolved as namespace "frequent" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

ChannelItem.tsx:37  i18next::translator: key "No package" for languages "en" won't get resolved as namespace "channels" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

versionBreakdown [{"version":"4186.0.0","instances":1,"percentage":100}]

Hundreds of such log entries:

i18next.js:22 i18next::translator: missingKey en frequent add add
i18next.js:22 i18next::translator: missingKey en applications Must be less than 50 characters Must be less than 50 characters
i18next.js:22 i18next::translator: missingKey en applications Must be a reverse domain ID like io.example.MyApp Must be a reverse domain ID like io.example.MyApp
i18next.js:22 i18next::translator: missingKey en applications Must be less than 155 characters Must be less than 155 characters

hook.js:608  Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`? Error Component Stack

Opening the Edit Group modal we get:

New axe issues
index.js:303 moderate: Heading levels should only increase by one https://dequeuniversity.com/rules/axe/4.10/heading-order?application=axeAPI
index.js:162 Element: <h5 class=​"MuiTypography-root MuiTypography-h5 css-xqgeko-MuiTypography-root">​1​</h5>​
index.js:303 moderate: All page content should be contained by landmarks https://dequeuniversity.com/rules/axe/4.10/region?application=axeAPI
index.js:162 Element: <div id=​"root">​…​</div>​

Opening the Edit Group modal we also get:

hook.js:608  Warning: MuiInputInput contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components Error Component Stack

hook.js:608  Warning: <Formik render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Formik render={(props) => ...} /> with <Formik>{(props) => ...}</Formik> Error Component Stack