Skip to content

Allow to override #app-content and #app-navigation hrefs for content skipping #33247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PVince81 merged 2 commits into from
Jul 18, 2022
Merged

Allow to override #app-content and #app-navigation hrefs for content skipping #33247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca04353
Allow to override #app-content and #app-navigation hrefs for content …
juliusknorr Jul 16, 2022
87320cb
Fix styling for single skip buttons globally
juliusknorr Jul 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions apps/dashboard/css/dashboard.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion apps/dashboard/css/dashboard.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 0 additions & 9 deletions apps/dashboard/css/dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
// Suppress "Skip to navigation of app" link since the app does not have a navigation
.skip-navigation:not(.skip-content) {
display: none;
}
// Fix position of "Skip to main content" link since the other link is gone
.skip-navigation.skip-content {
left: 3px;
}

#header {
background: transparent !important;
--color-header: rgba(24, 24, 24, 1);
Expand Down
5 changes: 4 additions & 1 deletion apps/dashboard/lib/Controller/DashboardController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,10 @@ public function index(): TemplateResponse {
$this->inititalState->provideInitialState('version', $this->config->getUserValue($this->userId, 'dashboard', 'backgroundVersion', 0));
$this->config->setUserValue($this->userId, 'dashboard', 'firstRun', '0');

$response = new TemplateResponse('dashboard', 'index');
$response = new TemplateResponse('dashboard', 'index', [
'id-app-content' => '#app-dashboard',
'id-app-navigation' => null,
]);

// For the weather widget we should allow the geolocation
$featurePolicy = new Http\FeaturePolicy();
Expand Down
30 changes: 4 additions & 26 deletions core/css/header.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion core/css/header.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 4 additions & 28 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,23 +28,6 @@
}
}

/* removed until content-focusing issue is fixed */
#skip-to-content a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
&:focus {
left: 76px;
top: -9px;
color: var(--color-primary-text);
width: auto;
height: auto;
}
}

/* HEADERS ------------------------------------------------------------------ */
#body-user #header,
#body-settings #header,
Expand Down Expand Up @@ -648,23 +631,16 @@ nav[role='navigation'] {


/* Skip navigation links – show only on keyboard focus */
.skip-navigation {
padding: 11px;
#skip-actions {
position: absolute;
overflow: hidden;
z-index: 9999;
top: -999px;
left: 3px;
/* Force primary color, otherwise too light focused color */
background: var(--color-primary) !important;

&.skip-content {
left: variables.$navigation-width;
margin-left: 3px;
}
height: 50px;
padding: 11px;

&:focus,
&:active {
&:focus-within {
top: variables.$header-height;
}
}
Expand Down
30 changes: 4 additions & 26 deletions core/css/server.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion core/css/server.css.map
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions core/templates/layout.user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,10 @@
<input type="hidden" id="initial-state-<?php p($app); ?>" value="<?php p(base64_encode($initialState)); ?>">
<?php }?>

<a href="#app-content" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a>
<a href="#app-navigation" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a>
<div id="skip-actions">
<?php if ($_['id-app-content'] !== null) { ?><a href="<?php p($_['id-app-content']); ?>" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a><?php } ?>
<?php if ($_['id-app-navigation'] !== null) { ?><a href="<?php p($_['id-app-navigation']); ?>" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a><?php } ?>
</div>

<div id="notification-container">
<div id="notification"></div>
Expand Down
3 changes: 3 additions & 0 deletions lib/private/TemplateLayout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,9 @@ public function __construct($renderAs, $appId = '') {
}

$this->assign('initialStates', $this->initialState->getInitialStates());

$this->assign('id-app-content', '#app-content');
$this->assign('id-app-navigation', '#app-navigation');
}

/**
Expand Down