Improve Accessibility of Modals, update DaisyUI

Sharqiewicz commented 1 month ago

What:

Modals in the application currently do not follow accessibility best practices, which can lead to a confusing user experience, especially for users relying on keyboard navigation or assistive technologies.

How:

✅ 💅 Update DaisyUI to 4.11.1 from 2.52.0 ✅ 💅 Update TailwindCSS ✅ 💅 Update react-daisyui to 5.0.0 from 3.1.2 ✅ 💅 Refactor components to use newest DaisyUI components and classes ✅ ⚠️ Override unwanted styles from DaisyUI that spoiled the look of the site (src/index.css) ✅ 🐛 Fix Buttons in the app to be disabled why loading (i.e. When an extrinsic is submitted - it was possible to submit it again and again - now it's not possible) ✅ 🐛 Fix AssetSelector alt property to show currently chosen asset ✅ 🦸 Refactor Dialog component ✅ 🦸 Extend Dashboard Assets page (in the Portfolio table) from 5 to 8

Closes: #451

netlify[bot] commented 1 month ago

Deploy Preview for rococo-souffle-a625f5 ready!

Name	Link
Latest commit	90b631eb5252ef5447c7fadc798545cdd7ff3b96
Latest deploy log	https://app.netlify.com/sites/rococo-souffle-a625f5/deploys/664f930a791a3b0008e51cbc
Deploy Preview	https://deploy-preview-450--rococo-souffle-a625f5.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ebma commented 1 month ago

`yarn.lock` changes

Summary

Status	Count
	1
	60
	1
	3

Click to toggle table visibility

| Name | Status | Previous | Current | | :- | :-: | :-: | :-: | | `@graphql-codegen/client-preset` | [](#) | 4.2.5 | 4.2.6 | | `@graphql-codegen/gql-tag-operations` | [](#) | 4.0.6 | 4.0.7 | | `@graphql-codegen/plugin-helpers` | [](#) | 5.0.3 | 5.0.4 | | `@graphql-codegen/typed-document-node` | [](#) | 5.0.6 | 5.0.7 | | `@graphql-codegen/typescript` | [](#) | 4.0.6 | 4.0.7 | | `@graphql-codegen/typescript-operations` | [](#) | 4.2.0 | 4.2.1 | | `@graphql-codegen/visitor-plugin-common` | [](#) | 5.1.0 | 5.2.0 | | `@graphql-tools/code-file-loader` | [](#) | 8.1.1 | 8.1.2 | | `@graphql-tools/git-loader` | [](#) | 8.0.5 | 8.0.6 | | `@graphql-tools/graphql-tag-pluck` | [](#) | 8.3.0 | 8.3.1 | | `@npmcli/arborist` | [](#) | 7.5.1 | 7.5.2 | | `@npmcli/config` | [](#) | 8.3.1 | 8.3.2 | | `@remix-run/router` | [](#) | 1.16.0 | 1.16.1 | | `@sigstore/bundle` | [](#) | 2.3.1 | 2.3.2 | | `@sigstore/protobuf-specs` | [](#) | 0.3.1 | 0.3.2 | | `@sigstore/sign` | [](#) | 2.3.1 | 2.3.2 | | `@sigstore/tuf` | [](#) | 2.3.3 | 2.3.4 | | `@sigstore/verify` | [](#) | 1.2.0 | 1.2.1 | | `@substrate/ss58-registry` | [](#) | 1.47.0 | 1.48.0 | | `@tanstack/react-table` | [](#) | 8.16.0 | 8.17.3 | | `@tanstack/table-core` | [](#) | 8.16.0 | 8.17.3 | | `@types/babel__traverse` | [](#) | 7.20.5 | 7.20.6 | | `@types/lodash` | [](#) | 4.17.1 | 4.17.4 | | `@types/react` | [](#) | 18.3.1 | 18.3.2 | | `braces` | [](#) | 3.0.2 | 3.0.3 | | `caniuse-lite` | [](#) | 1.0.30001617 | 1.0.30001621 | | `cli-table3` | [](#) | 0.6.4 | 0.6.5 | | `color` | [](#) | 4.2.3 | - | | `color-string` | [](#) | 1.9.1 | - | | `core-js-compat` | [](#) | 3.37.0 | 3.37.1 | | `culori` | [](#) | - | 3.3.0 | | `daisyui` | [](#) | 2.52.0 | 4.11.1 | | `electron-to-chromium` | [](#) | 1.4.762 | 1.4.777 | | `fill-range` | [](#) | 7.0.1 | 7.1.1 | | `glob` | [](#) | 10.3.14 | 10.3.16 | | `immutable` | [](#) | 4.3.5 | 4.3.6 | | `is-arrayish` | [](#) | 0.3.2 | 0.2.1 | | `jackspeak` | [](#) | 2.3.6 | 3.1.2 | | `jose` | [](#) | 5.2.4 | 5.3.0 | | `libnpmaccess` | [](#) | 8.0.5 | 8.0.6 | | `libnpmdiff` | [](#) | 6.1.1 | 6.1.2 | | `libnpmexec` | [](#) | 8.1.0 | 8.1.1 | | `libnpmfund` | [](#) | 5.0.9 | 5.0.10 | | `libnpmhook` | [](#) | 10.0.4 | 10.0.5 | | `libnpmorg` | [](#) | 6.0.5 | 6.0.6 | | `libnpmpack` | [](#) | 7.0.1 | 7.0.2 | | `libnpmpublish` | [](#) | 9.0.7 | 9.0.8 | | `libnpmsearch` | [](#) | 7.0.4 | 7.0.5 | | `libnpmteam` | [](#) | 6.0.4 | 6.0.5 | | `libnpmversion` | [](#) | 6.0.1 | 6.0.2 | | `micromatch` | [](#) | 4.0.5 | 4.0.7 | | `npm` | [](#) | 10.7.0 | 10.8.0 | | `npm-profile` | [](#) | 9.0.2 | 10.0.0 | | `nwsapi` | [](#) | 2.2.9 | 2.2.10 | | `path-scurry` | [](#) | 1.11.0 | 1.11.1 | | `picocolors` | [](#) | 1.0.0 | 1.0.1 | | `preact` | [](#) | 10.21.0 | 10.22.0 | | `react-daisyui` | [](#) | 3.1.2 | 5.0.0 | | `react-hook-form` | [](#) | 7.51.4 | 7.51.5 | | `react-router` | [](#) | 6.23.0 | 6.23.1 | | `react-router-dom` | [](#) | 6.23.0 | 6.23.1 | | `sass` | [](#) | 1.77.0 | 1.77.2 | | `sigstore` | [](#) | 2.3.0 | 2.3.1 | | `simple-swizzle` | [](#) | 0.2.2 | - | | `update-browserslist-db` | [](#) | 1.0.15 | 1.0.16 |

ebma commented 1 month ago

`yarn.lock` changes

Summary

Status	Count
	1
	60
	1
	3

Click to toggle table visibility

| Name | Status | Previous | Current | | :- | :-: | :-: | :-: | | `@graphql-codegen/client-preset` | [](#) | 4.2.5 | 4.2.6 | | `@graphql-codegen/gql-tag-operations` | [](#) | 4.0.6 | 4.0.7 | | `@graphql-codegen/plugin-helpers` | [](#) | 5.0.3 | 5.0.4 | | `@graphql-codegen/typed-document-node` | [](#) | 5.0.6 | 5.0.7 | | `@graphql-codegen/typescript` | [](#) | 4.0.6 | 4.0.7 | | `@graphql-codegen/typescript-operations` | [](#) | 4.2.0 | 4.2.1 | | `@graphql-codegen/visitor-plugin-common` | [](#) | 5.1.0 | 5.2.0 | | `@graphql-tools/code-file-loader` | [](#) | 8.1.1 | 8.1.2 | | `@graphql-tools/git-loader` | [](#) | 8.0.5 | 8.0.6 | | `@graphql-tools/graphql-tag-pluck` | [](#) | 8.3.0 | 8.3.1 | | `@npmcli/arborist` | [](#) | 7.5.1 | 7.5.2 | | `@npmcli/config` | [](#) | 8.3.1 | 8.3.2 | | `@remix-run/router` | [](#) | 1.16.0 | 1.16.1 | | `@sigstore/bundle` | [](#) | 2.3.1 | 2.3.2 | | `@sigstore/protobuf-specs` | [](#) | 0.3.1 | 0.3.2 | | `@sigstore/sign` | [](#) | 2.3.1 | 2.3.2 | | `@sigstore/tuf` | [](#) | 2.3.3 | 2.3.4 | | `@sigstore/verify` | [](#) | 1.2.0 | 1.2.1 | | `@substrate/ss58-registry` | [](#) | 1.47.0 | 1.48.0 | | `@tanstack/react-table` | [](#) | 8.16.0 | 8.17.3 | | `@tanstack/table-core` | [](#) | 8.16.0 | 8.17.3 | | `@types/babel__traverse` | [](#) | 7.20.5 | 7.20.6 | | `@types/lodash` | [](#) | 4.17.1 | 4.17.4 | | `@types/react` | [](#) | 18.3.1 | 18.3.2 | | `braces` | [](#) | 3.0.2 | 3.0.3 | | `caniuse-lite` | [](#) | 1.0.30001617 | 1.0.30001621 | | `cli-table3` | [](#) | 0.6.4 | 0.6.5 | | `color` | [](#) | 4.2.3 | - | | `color-string` | [](#) | 1.9.1 | - | | `core-js-compat` | [](#) | 3.37.0 | 3.37.1 | | `culori` | [](#) | - | 3.3.0 | | `daisyui` | [](#) | 2.52.0 | 4.11.1 | | `electron-to-chromium` | [](#) | 1.4.762 | 1.4.777 | | `fill-range` | [](#) | 7.0.1 | 7.1.1 | | `glob` | [](#) | 10.3.14 | 10.3.16 | | `immutable` | [](#) | 4.3.5 | 4.3.6 | | `is-arrayish` | [](#) | 0.3.2 | 0.2.1 | | `jackspeak` | [](#) | 2.3.6 | 3.1.2 | | `jose` | [](#) | 5.2.4 | 5.3.0 | | `libnpmaccess` | [](#) | 8.0.5 | 8.0.6 | | `libnpmdiff` | [](#) | 6.1.1 | 6.1.2 | | `libnpmexec` | [](#) | 8.1.0 | 8.1.1 | | `libnpmfund` | [](#) | 5.0.9 | 5.0.10 | | `libnpmhook` | [](#) | 10.0.4 | 10.0.5 | | `libnpmorg` | [](#) | 6.0.5 | 6.0.6 | | `libnpmpack` | [](#) | 7.0.1 | 7.0.2 | | `libnpmpublish` | [](#) | 9.0.7 | 9.0.8 | | `libnpmsearch` | [](#) | 7.0.4 | 7.0.5 | | `libnpmteam` | [](#) | 6.0.4 | 6.0.5 | | `libnpmversion` | [](#) | 6.0.1 | 6.0.2 | | `micromatch` | [](#) | 4.0.5 | 4.0.7 | | `npm` | [](#) | 10.7.0 | 10.8.0 | | `npm-profile` | [](#) | 9.0.2 | 10.0.0 | | `nwsapi` | [](#) | 2.2.9 | 2.2.10 | | `path-scurry` | [](#) | 1.11.0 | 1.11.1 | | `picocolors` | [](#) | 1.0.0 | 1.0.1 | | `preact` | [](#) | 10.21.0 | 10.22.0 | | `react-daisyui` | [](#) | 3.1.2 | 5.0.0 | | `react-hook-form` | [](#) | 7.51.4 | 7.51.5 | | `react-router` | [](#) | 6.23.0 | 6.23.1 | | `react-router-dom` | [](#) | 6.23.0 | 6.23.1 | | `sass` | [](#) | 1.77.0 | 1.77.2 | | `sigstore` | [](#) | 2.3.0 | 2.3.1 | | `simple-swizzle` | [](#) | 0.2.2 | - | | `update-browserslist-db` | [](#) | 1.0.15 | 1.0.16 |

pendulum-chain / portal