Add aria-hidden attr to the whole navigation depending on a sidebar state #4016
There are no files selected for viewing
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -59,15 +59,16 @@ emit('toggle-navigation', { | |
| role="navigation" | ||
| :class="{'app-navigation--close':!open }"> | ||
| <NcAppNavigationToggle :open="open" @update:open="toggleNavigation" /> | ||
| <div :aria-hidden="ariaHidden" class="app-navigation__content"> | ||
| <slot /> | ||
| <!-- List for Navigation li-items --> | ||
| <ul class="app-navigation__list"> | ||
| <slot name="list" /> | ||
| </ul> | ||
|
|
||
| <!-- Footer for e.g. AppNavigationSettings --> | ||
| <slot name="footer" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
|
|
@@ -91,6 +92,11 @@ export default { | |
| open: true, | ||
| } | ||
| }, | ||
| computed: { | ||
| ariaHidden() { | ||
| return this.open ? 'false' : 'true' | ||
| }, | ||
| }, | ||
|
|
||
| watch: { | ||
| isMobile() { | ||
|
|
@@ -156,10 +162,6 @@ export default { | |
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| background-color: var(--color-main-background-blur, var(--color-main-background)); | ||
| -webkit-backdrop-filter: var(--filter-background-blur, none); | ||
| backdrop-filter: var(--filter-background-blur, none); | ||
|
|
@@ -183,6 +185,13 @@ export default { | |
| gap: var(--default-grid-baseline, 4px); | ||
| padding: calc(var(--default-grid-baseline, 4px) * 2); | ||
| } | ||
| &__content { | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
|
Comment on lines
+190
to
+193
Contributor
There was a problem hiding this comment. These styles are moved from
Contributor
Author
There was a problem hiding this comment. it is hard to test all apps and the risk to break something is high. I could remove https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/NcAppNavigation/NcAppNavigation.vue#L161-L162 but would like leave it to be safe. |
||
| } | ||
JuliaKirschenheuter marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| // add extra border for high contrast mode | ||
|
|
||
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs reverting it heavily breaks the talk left sidebar:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, I would have blocked if seen on time, this seems absolutely not related to this PR
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@JuliaKirschenheuter @ShGKme⚠️
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, but not all of them.
These styles are flex container styles. They should have been moved.
while these are flex elements styles. They should be only here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
50% of these styles are flex container styles. In this PR there was created a new flex container for all content, and all flex container styles were moved to the new flex container. So, they are related.
Although, another 50% were flex element styles and really not related.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, this what i feared: it is hard to test every app. Thank you @ShGKme for explanation and fixing!