feat(styles, documentation): Update spinner style, animation, accessibility and migrate documentation #2612
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
…bility and migrate documentation
imagoiq
requested review from
b1aserlu,
davidritter-dotcom and
a team
as code owners
🦋 Changeset detectedLatest commit: 4bbf046 The changes in this PR will be included in the next version bump. This PR includes changesets to release 10 packages
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 |
This was
linked to
issues
Feb 6, 2024
Closed
Closed
|
Preview environment ready: https://preview-2612--swisspost-web-frontend.netlify.app |
imagoiq
commented
Feb 8, 2024
|
|
||
| return html` <div class="spinner-bg"> | ||
| <div class="loading-modal"> | ||
| <div class="${classes}" role="status"> |
There was a problem hiding this comment.
About using role=status.
We might want to discuss it, there is no clear recommendation.
For me, it makes more sense to use the role=status as the loading aspect is important, but is not important enough to interrupt all other actions, but it might be different from the context.
Also we can use aria-live=polite only instead of being implied by role=status. The main difference would be that the screen reader may prefix the message with Status: when used with role=status.
Note that for maximum compatibility, MDN recommends using both aria-live=polite and role=status.
The role=progressbar could be used as well with an infinite reload between the progression, but it's way too complicated to implement for almost no benefit.
Links
There was a problem hiding this comment.
I think going with the MDN recommendation is the right way for us, thanks for the explanation.
gfellerph
requested changes
Feb 12, 2024
packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
Outdated
Show resolved
Hide resolved
packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
Outdated
Show resolved
Hide resolved
…cessibility.docs.mdx Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
…cessibility.docs.mdx Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
…eat/2445-update-spinner
|
gfellerph
approved these changes
Feb 16, 2024
gfellerph
pushed a commit
that referenced
this pull request
Feb 20, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @swisspost/design-system-icons@1.3.0 ### Minor Changes - Added icon number 2575. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2677](#2677)) ## @swisspost/design-system-components@2.0.2 ### Patch Changes - Fixed double lines between accordion items on chrome/safari. (by [@imagoiq](https://github.com/imagoiq) with [#2615](#2615)) - Fixed two issues with tooltips and Angular integration. Tooltips are now being displayed on buttons that are added to the DOM asynchronously and tooltip elements are no longer duplicated on route change. (by [@gfellerph](https://github.com/gfellerph) with [#2621](#2621)) - Updated dependencies: - @swisspost/design-system-styles@6.6.2 ## @swisspost/design-system-components-angular@1.0.1 ### Patch Changes - Updated dependencies: - @swisspost/design-system-components@2.0.2 ## @swisspost/internet-header@1.13.6 ### Patch Changes - Added secure flag for cookies. (by [@imagoiq](https://github.com/imagoiq) with [#2629](#2629)) - Fixed display of internet-header icons on high-contrast mode with light theme. (by [@imagoiq](https://github.com/imagoiq) with [#2669](#2669)) - Fixed missing accessible labels on post-meta navigation links. (by [@gfellerph](https://github.com/gfellerph) with [#2700](#2700)) - Updated dependencies: - @swisspost/design-system-styles@6.6.2 ## @swisspost/design-system-intranet-header@5.0.9 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.6.2 ## @swisspost/design-system-styles@6.6.2 ### Patch Changes - Updated high contrast styles for the form switch component. (by [@alizedebray](https://github.com/alizedebray) with [#2667](#2667)) - Fixed display of icons in high-contrast mode in webkit. (by [@imagoiq](https://github.com/imagoiq) with [#2638](#2638)) - Deprecated sizes `loader-sm` and `loader-xs` for the spinner. They are replace respectively with `loader-40` and `loader-16`. (by [@imagoiq](https://github.com/imagoiq) with [#2612](#2612)) - Removed transparent background for notification in high-contrast mode. (by [@imagoiq](https://github.com/imagoiq) with [#2653](#2653)) - Fixed visibility of select arrow in icon in high-contrast mode with light theme. (by [@imagoiq](https://github.com/imagoiq) with [#2696](#2696)) - Sets the font-size of h5 on small mobile devices to 16px as defined in Figma. (by [@gfellerph](https://github.com/gfellerph) with [#2610](#2610)) ## @swisspost/design-system-documentation@3.1.0 ### Minor Changes - Added contrast ratios agains black & white to color documentation. (by [@b1aserlu](https://github.com/b1aserlu) with [#2376](#2376)) - Added override classes to the heading documentation and removed the utitlites/headings, which was previouvly used to document the override classes. (by [@b1aserlu](https://github.com/b1aserlu) with [#2640](#2640)) - Added a documentation page for the post spinner component. (by [@imagoiq](https://github.com/imagoiq) with [#2612](#2612)) - Migrated documentation for card-button to storybook. (by [@b1aserlu](https://github.com/b1aserlu) with [#2619](#2619)) ### Patch Changes - Fixed missing archive links in migrated page. (by [@imagoiq](https://github.com/imagoiq) with [#2663](#2663)) - Removed empty pages. (by [@imagoiq](https://github.com/imagoiq) with [#2666](#2666)) - Documented `post-accordion-item` properties on Accordion page. (by [@imagoiq](https://github.com/imagoiq) with [#2630](#2630)) - Removed input type color variant as it is not compatible with the current input styles. (by [@imagoiq](https://github.com/imagoiq) with [#2628](#2628)) - Documented collapseChange event from post-accordion-item on post-accordion. (by [@imagoiq](https://github.com/imagoiq) with [#2620](#2620)) - Improved rendering of the home page for high-contrast mode. (by [@imagoiq](https://github.com/imagoiq) with [#2653](#2653)) - Updated dependencies: - @swisspost/design-system-icons@1.3.0 - @swisspost/design-system-styles@6.6.2 - @swisspost/internet-header@1.13.6 - @swisspost/design-system-components@2.0.2 - @swisspost/design-system-intranet-header@5.0.9 - @swisspost/design-system-components-angular@1.0.1 - @swisspost/design-system-components-react@1.0.28 ## @swisspost/design-system-components-angular-workspace@1.0.2 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.6.2 - @swisspost/design-system-components@2.0.2 ## @swisspost/design-system-components-react@1.0.28 ### Patch Changes - Updated dependencies: - @swisspost/design-system-components@2.0.2 ## @swisspost/design-system-demo@7.2.2 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.6.2 - @swisspost/design-system-intranet-header@5.0.9 ## @swisspost/design-system-intranet-header-workspace@3.0.9 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.6.2 ## @swisspost/design-system-nextjs-integration@0.1.1 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.6.2 - @swisspost/internet-header@1.13.6 - @swisspost/design-system-components-react@1.0.28 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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