TUP-517 and TUP-472: MFA pairing UI/accessibility tweaks #265
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
UI review+design working meeting (as TUP-535) scheduled for Friday morning. |
|
TUP-535 comment describes designer changes. TUP-535 has new attached designs. I am available to make the changes after I empty my plate. |
wesleyboar
reviewed
Jul 20, 2023
|
Design changes (and markup and accessibility tweaks) are ready for review: |
* refactor: move link to to docs (TUP-535:4,5) * refactor!: prepare for c-nav--piped (TUP-535:3) The pipe i slost, but will return when core-styles.base.css is v2.12.1. Currently, this requires TACC/Core-CMS to load TACC/Core-Styles v2.12.1. Maybe (later), Portal should use diff version than CMS. BREAKING CHANGE: This removes the pipe. * refactor: change 5m msg, get help link (TUP-535:6) - Change text of the "5 minutes" message. - Add either link to trigger modal open or link to open modal.* * This prevents two modals being hidden into the makup. * refactor: change qr error to reuse a help modal * style: npx nx format:write * refactor: simplify `qr-code-box` markup and styles * refactor: use lists for mfa panels * fix: missing space before "Get help." link * refactor: simpler messages (TUP-535:2.1.1+2.1.2) - use one tag and one class - remove extra markup - refactor panel layout to support new message position * refactor: let modal manage duplicate instances - remove conditional modal opening code - do not say "please" in messages * fix: restore code that I had made text for testing * chore: remove now-unnecessary id form markup * feat: new message if QR code alt. is unavilable * fix: add periods to end of sentences… * chore: remove now-unnecessary id from props * chore: remove now-unnecessary id from props * fix: load v2.13 c-nav component * chore: improve a comment * style: npx nx format:write * fix: bad grammar in error message * fix: bad grammar, remove please * feat: TextCopyField.jsx to .tsx, and enable it * feat: TextCopyModal * fix: FieldWrapper, opt. req. & let desc. be React * fix: FieldWrapperFormik, let desc. be React * feat: text copy modal (TUP-535:2.1.3) * chore: uninstall react-copy-to-clipboard * feat: install @tacc/core-styles 2.14.0 * refactor: FieldWrapper mirror FeildWrapperFormik Make FieldWrapper look like FeildWrapperFormik. Lets FieldWrapper be used independent of Formik. * feat: style text copy modal (TUP-535:2.1.3) * npx nx format:write * fix: qr code box was not 200px until image loaded * fix: remove test logic for msg. about qr alt. code * fix: pass qr alt. verification code * feat: allow markup in label e.g. <a> * fix: markup in label should not be spaced by flex * fix: let core-styles style form error text * fix: use FieldWrapper consistently and correctly Prevents form error messages overlapping qr code messages*. * These should be called mfa messages. Expect a commit/fix. * chore: rename `qr-code-message` to `mfa-message` * chore: remove unused `ButtonWrapper` * chore: load sibling core-components from rel. path * chore: remove unused `SectionMessage` import * fix: resolve "circular dependency" I.E. Moved FieldWrapper to core-components. Error: https://github.com/TACC/tup-ui/actions/runs/5650505534/job/15306952950?pr=270 Docs: https://nx.dev/recipes/other/resolve-circular-dependencies * nx format:write * fix: loose ends after "circular dependency" fix * fix: fieldwrapper css duplication too confusing * chore: remove excess `<span>` tag * chore: no field wrapper desc unless desc exists * npx nx format:write * fix: grammar error from design * chore: use installed @core-styles, not CDN * refactor: simplify TextCopyField (no CopyField) * refactor: simplify TextCopyField (no ButtonWrapper) * refactor: TextCopyModal hint → <TextCopyModalHint> * feat: support and add id attr to <Button> * npx nx format:write * fix: qr code should resize w/ browser base font * refactor: simplify qr code styles * refactor: use variable for qr code size * fix: increase qr coe size back to 200px not 160px * fix(a11y): status msg box needs role before msg https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22 > Check that the container destined to hold the status message has a role attribute with a value of status before the status message occurs. * fix(a11y): no use <label> text for <button> text I.e. let screen reader read the button text. * Revert "fix(a11y): status msg box needs role before msg" This reverts commit f2f325d. * fix: add and pass id to TextCopyField * feat(a11y): title text for qr code img * npx nx format:write * feat: allow custom `tagName` for `<Message>` * chore: describe FieldWrapperFormik global css * refactor: replace FieldWrapper w/ upcoming s-form Core-Styles will add s-form. Allows Portals to create well-styled forms w/out copious class names. * chore: remove FieldWrapper (not Formik) * refactor:return feild wrap CSS to comp. as global Return FieldWrapperFormik CSS back to component, but as global. * npx nx format:write * refactor: simpler id assignment * fix: static mfa panel width so mfa-msg is centered * refactor: no modal for text copty * fix: restore accientally deleted conditions * chore: remove component changes moved to PR #277 #277 * chore: remove component changes moved to PR #276 #276 * chore: remove stray changes * fix: restore TypeScript TextCopyModal * fix: data.otpkey as var not text * fix: disable read-only fields, just to be safe * refactor: use core-styles v2.15, not form.cms.css (#279) * fix: alt. qr otp label as block instead of inline Part of the message for QR code alternative OTP was moved to new line. * fix: add space between mfa msg and section bottom If section short enough to scroll, MFA message touches section bottom. * fix: QR loading div was higher than button and img * fix: darker danger color was not taking effect The need for !important is likely caused by: vitejs/vite#4448 Possible solution: vitejs/vite#4448 (comment) * fix: core-styles v2.16.2 * fix: remove (now?) unnecessary <br /> The label is display block, so <br /> is not needed to make new line. * fix: match action spacing, drop related deviations 1. Match spacing between action or action box. 2. Remove deviant font size on an aciton. * refactor: use SectionHeader / less duplicate code * chore: nx format:write
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
Related
Changes
Testing
UI
Notes