feat(dialog): use native HTML dialog element #1865
Closed
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
* feat(skip-link): href attr * docs: skip-link no-anchor * docs: update elements/rh-skip-link/demo/href-attribute.html Co-authored-by: Adam Johnson <[email protected]> --------- Co-authored-by: Adam Johnson <[email protected]>
* docs: remove RTI from sidenav * fix(subnav): remove rti, add accessible-label attr * fix(navigation-secondary): remove rti, add accessible-label attr * chore: add changesets * chore(subnav): update changeset * chore(navigation-secondary): remove orphaned code * docs: readd rti to sidenav taken care of in seperate docs pr * docs(navigation-secondary): add accessible-label documentation * docs(subnav): add accessible-label documentation * chore(subnav): remove unused ifDefined import * fix(navigation-secondary): remvoe preventDefault to allow tab to move to next tabstop * fix(accordion): remove rti * chore(navigation-secondary): update changeset * chore(accordion): add changeet * docs: update changesets --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
* fix(accordion): bold `rh-accordion-header` text * fix(accordion): appease nanocss --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]>
* docs: theming WIP, picking up where #1298 left off * docs: pattern shortcode splits out css * docs: pattern showcase element layout * feat(card): header background theme props * docs(card): asset patterns * docs: pattern elements in typescript * feat: themable surfaces adds: - `--rh-color-surface` - `--rh-color-text-primary` - `--rh-color-border-subtle` - `--rh-color-border-strong` - `--rh-color-border-interactive` * docs(card): patterns with themable properties * style(card): template * docs(card): use themable properties * fix(context): more themable props * style: sort props * feat: add --rh-color-theme-inverse * chore: dev server layouts * refactor(accordion): themable tokens * chore: minor perf improvement for dev server we still have a major problem of trace performance in generator.htmlInject to work through * feat: link colours * docs: port uxdot-installation-tabs to typescript * chore: wireit dependencies * fix: update tokens stuff * chore: deps * chore: stylelint rules * chore: temporarily patch tokens * fix: port element styles * fix(lib): port element styles * docs: port tokens * chore: update temporary patch * style: lint css * refactor(pagination): css * chore: use tokens prerelease * chore: use prerelease tokens * docs: load rhds packages locally * docs: handle theme tokens * fix(context): use new tokens repo * docs: load tokens from node_modules * chore: tokens deps * chore: update tokens prerelease * chore: update prerelease tokens * chore: update prerelease tokens * style: config * chore: update deps * fix: lint css files * chore: prerelease tokens * fix(context-picker): dont swallow event * fix(surface): make it a consumer * docs: token theme swatches * docs: tokens toc, alt-card for themes * docs: ssr the lightness of token swatches * docs: fix tokens page * docs: fancier tags * style: lint * docs: demo dsd fix * docs: icon color themables * fix(surface): act as a pseudo-consumer don't swallow the context-request event, but still propate your own color values * chore: docs server perf * docs: icon,border,etc * perf: remove unused decorator * docs: tokens tables * docs: typography tokens * docs: bodge up token tables these files are due for a serious refactor, but like... another day * docs: themable tokens changeset * docs: update theming prose * test(surface): typescript nudges * test(surface): fix tests * test: console logs * docs: tokens demo * docs: fix tokens * docs: nicer ids * docs: refactor tokens table code * fix(table): theme tokens * docs: refactor token collection * docs: refactor patterns, move links and scripts to head * fix(subnav): use theme tokens * fix(tile): use theme tokens * docs: header, tile patterns * fix(card): host display block * docs: tile patterns and theming * fix(card): surface tokens * fix(tile): surface tokens * fix(subnav): force color palette per guidelines * fix(tile): use theme tokens * feat(context-picker): pass an element ref * docs(tile): theming patterns * style: lint * test: more sleep * style: lint * test: fix audio player tests * docs: element pattern in color palette docs * fix(cta): primary color * fix(tabs): color context * fix(context-demo): import specifier * fix(tile): override surface colors * docs: copy styles over * docs: theming prose * chore: simplify dev server config * docs: footnotes * docs: lint styles * style: lint element css * style: lint css comments * docs: lint css * fix(cta): context css * chore: workaround in dev server for jspm limitation * style: lint * docs: tile lightdom * docs: pullquote margins * docs: bodge for audio-player layouts see also #1264 * docs: fix import map? * docs: remove url filter * docs: theme collage * docs: theming patterns * docs: theming bordeaux example * fix(card): color palettes and layouts * docs(card): color palettes * docs: more theming prose * docs: more theming * docs: bordeaux * fix(code-block): styles * fix(context-demo): context * fix(blockquote): theme tokens --------- Co-authored-by: Mark Caron <[email protected]>
* feat(code-block): wip client-side highlighting * style: type linting * chore: appease typescript for the sake of prism see microsoft/TypeScript#20595 * docs: prism in 11ty * fix(code-block): prism css module * docs: eleventy prism import map * docs: more import map shenanigans * fix(code-block): highlighted line numbers * docs: changeset * docs(code-block): documentation for new attrs * fix(code-block): disclosure aria * fix(code-block): comment colors * fix(code-block): tabindex * fix: update elements/rh-code-block/rh-code-block.ts
🦋 Changeset detectedLatest commit: a8df42a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
This was
linked to
issues
Sep 13, 2024
chore: lit-css ts transform allow css nesting syntax in shadow css. it will be unrolled with postcss
* docs: picker targets * fix(surface): set but don't inherit surface colors * docs(card): bar pattern * fix(accordion): style guidelines * fix(alert): theme tokens * fix(badge): context, styles doesn't implement status tokens, yet * fix(button): disabled on dark does not add semantic tokens * fix(blockquote): border style * fix(health-index): border colors * fix(tabs): context in panel * docs(tabs): links in demo * fix(icon): container size * fix(badge): tests and backgrounds * docs(card): links * docs(theming): backgrounds * docs(theming): stub for developer * docs: deps * docs: more prose * feat(tag): context, compact, href, desaturated Closes #1843 * docs: tag * fix(tag): spacing * fix(tag): spacing * docs(tag): live samples * test(tag): tests pass * fix(blockquote): on * docs(tag): slotted icon * fix(blockquote): on * fix(accordion): drop shadow also refactors expand/collapse code * fix(alert): use rh-icon
|
Size Change: +785 B (+0.43%) Total Size: 184 kB
ℹ️ View Unchanged
|
* docs: icon design update * docs: move icons to foundations * docs(icon): feedback footer * docs(icon): list styles * docs(icon): fix a whoopsie * docs(icon): layouts * docs: copy assets * docs(icons): fix permalink * docs(icon): copy * docs: icons feedback * docs: change title of page and update section heading case * docs: iconography order * docs: align buttons --------- Co-authored-by: marionnegp <[email protected]>
* docs: simplify installation tabs * docs: fix import map on installation page * docs: jspm import maps * docs: no pfe version * docs: install tabs * chore: patch prism-esm see if that lets build complete see KonnorRogers/prism-esm#3 * docs: fail more gracefully when JSPM can't cope * chore: lint nonsense * docs: link to install info * docs: installation tabs styles
* feat: adding automatic data-labels on col-scoped tables * Update elements/rh-table/rh-table.ts Co-authored-by: Adam Johnson <[email protected]> * style(rh-table): linting error on extra curly brace * Update elements/rh-table/rh-table.ts Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * Update elements/rh-table/rh-table.ts Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * feat(table): responsive attr, plus some style linting * docs(table): updating prop definition * refactor: prefer optional chaining to ternary * refactor(table): use hammer operator and dataset to reduce footprint * docs(table): adding responsive table instructions * feat(table): making responsive layout default. Adjusting docs to reflect this. * chore(table): adding changeset * docs: update .changeset/khaki-rings-confess.md * fix(table): mo --------- Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]>
* fix(table): container query, css nesting, logical properties * chore(table): add changeset * chore(table): lint
* docs: add edit this page link * docs: add edit this page to pattern template * docs: edit this page trim leading dot * fix(back-to-top): reconfigure pointer events to be on the trigger not host
Shift tab now works. Shift tab works for a YouTube video dialog but normal tab does not trap focus. Also, there's a glaring issue that, if an RHDS element is the last focusable element, it does not work. WIP!
Current statusWith a lot of help from @zeroedin, he and I were able to get Shift + Tab mostly working for SetbacksJust when we thought we had it cracked, we added an Possible solutionsWe suspect that we'd have to add each focusable OR we could explore implementing a function like this that recursively traverses the Shadow DOM looking for focusable elements. Good to know we're not the first people to run into complexities with web components and focus traps. OR we could add one of the off the shelf solutions as a dependency. If anyone has strong feelings about any of these solutions, weigh in! Video dialog + YouTubeNote that, on a video dialog with a YouTube embed, Shift + Tab works, but Tab does not trap focus. DP Video dialog demo NB: Right now on uxdot for a dialog + YouTube embed, focus trapping works with Tab but not Shift + Tab. 🔁 uxdot production video demo APG Guidelines vs. browser implementationsIt's also worth noting that when a |
bennypowers
reviewed
Sep 19, 2024
There was a problem hiding this comment.
Does the surface need to be in the outside because of the overlay? Can we fix that with CSS and put the surface inside the dialog?
If we're using <dialog>, why do we still need kitty's focus trap javascript? Should we just call showModal by default?
Are we capturing and exposing the return value?
|
Will look into moving
We are calling
Again, browser's have implemented |
|
Closing this PR due to merge conflicts. Continue this discussion in #2078. |
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.
What I did
rh-dialogto use the native HTML<dialog>element.#overlayto use the CSS native::backdroppsuedo-element.#overlayaccessible-labelproperty for when users want to manually label their modals + added docs.accessible-label,aria-labelledby+ IDREF, and thearia-labelof the trigger element.Testing Instructions
To Do's
rh-buttondisplays two buttons (one without a label) in the DP but not locallyNotes to Reviewers
Some docs on the Guidelines page are incorrect as they have the modal body scrolling independently from the
headerandfooter. That needs updated.WIP right now. Come back later for a more accurate description. 😇
Closes #1242 and #1238.