[BASE][NOTE][CSS] Notes are now clearly delimited to visually impaired users. Screen readers will notify when a note begins as well as each reply. Focused elements now provide the same feedback everywhere.
This commit is contained in:
parent
60af533fa4
commit
9e051273f7
GPG Key ID:
7D0C7EAFC9D835A0
@ -3,6 +3,12 @@ html * {
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
*:focus:not(:active) {
|
||||
border: 4px solid var(--bg3);
|
||||
border-radius: var(--unit-size);
|
||||
transition: border ease-in-out;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* FONTS */
|
||||
--main-font: 'Inter var', sans-serif;
|
||||
@ -81,7 +87,6 @@ a:visited {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--white);
|
||||
@ -106,7 +111,7 @@ summary:hover {
|
||||
padding-left: var(--unit-size);
|
||||
padding-right: var(--unit-size);
|
||||
|
||||
background: var(--bg3);
|
||||
background: var(--white);
|
||||
border-radius: var(--unit-size);
|
||||
|
||||
transition: var(--cubic-transition);
|
||||
@ -246,9 +251,6 @@ summary:hover .icon-details-open {
|
||||
.h-entry a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.h-entry a:focus {
|
||||
border: solid 2px var(--bg3);
|
||||
}
|
||||
|
||||
.h-entry .embed header {
|
||||
padding: var(--unit-size);
|
||||
@ -289,10 +291,6 @@ summary:hover .icon-details-open {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
}
|
||||
.note-author:focus-within {
|
||||
border: 2px solid var(--bg3);
|
||||
transition: border ease-in-out;
|
||||
}
|
||||
|
||||
.note-author .avatar {
|
||||
width: auto;
|
||||
@ -358,10 +356,6 @@ summary:hover .icon-details-open {
|
||||
|
||||
padding: var(--small-size);
|
||||
}
|
||||
.note-content:focus-within {
|
||||
border: 2px solid var(--bg3);
|
||||
transition: border ease-in-out;
|
||||
}
|
||||
|
||||
.note-content p {
|
||||
padding-left: var(--small-size);
|
||||
@ -597,7 +591,7 @@ input[type=file] {
|
||||
margin-left: var(--medium-size);
|
||||
}
|
||||
|
||||
#accessibility-menu:focus-within {
|
||||
#accessibility-menu:focus-within:not(:active) {
|
||||
top: var(--unit-size);
|
||||
left: var(--unit-size);
|
||||
}
|
||||
|
||||
@ -86,9 +86,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sec-nav {
|
||||
padding-left: var(--unit-size);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
|
||||
@ -33,17 +33,16 @@
|
||||
|
||||
<body class="bg">
|
||||
|
||||
<aside id="accessibility-menu" aria-live="polite">
|
||||
<a accesskey="z" href="#accessibility-menu" class="anchor-hidden"></a>
|
||||
|
||||
<aside id="accessibility-menu">
|
||||
<h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
|
||||
<h3>{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</h3>
|
||||
<h3 tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</h3>
|
||||
|
||||
<br>
|
||||
|
||||
<p>Provided the following keyboard shortcut, the link is targeted, making navigation faster.</p>
|
||||
<p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
|
||||
<p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}</p>
|
||||
|
||||
<p>
|
||||
<p tabindex="0">
|
||||
{% if is_firefox() == true %}
|
||||
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
|
||||
{% else %}
|
||||
@ -51,8 +50,11 @@
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong tabindex="0">{{'The keyboard key ' | trans }}<kbd>Z</kbd>{{' accesses this menu.' | trans }}</strong>
|
||||
<a accesskey="z" href="#anchor-accessibility-menu" class="anchor-hidden"></a>
|
||||
<a id="anchor-accessibility-menu" class="anchor-hidden"></a>
|
||||
|
||||
<p tabindex="0">
|
||||
<strong>{{'The keyboard key ' | trans }}<kbd>Z</kbd>{{' accesses this menu.' | trans }}</strong>
|
||||
<strong>{{ 'The other access keys are:' | trans }}</strong>
|
||||
</p>
|
||||
|
||||
@ -70,7 +72,7 @@
|
||||
<header id='header' role="banner">
|
||||
{{ block("leftpanel", "stdgrid.html.twig") }}
|
||||
|
||||
<a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
|
||||
<a role="navigation" id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
|
||||
<a class="accessibility-target" id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
|
||||
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
|
||||
</a>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<article class="h-entry hentry note">
|
||||
<header class="note-info">
|
||||
{% set nickname = note.getActorNickname() %}
|
||||
<header tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}." class="note-info">
|
||||
|
||||
{# TODO: this should link to the note's user profile? #}
|
||||
<h2 tabindex="0" title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#" aria-relevant="all">
|
||||
<strong tabindex="0" class="note-author u-url">
|
||||
{# Microformat's h-card properties indicates a face icon is a "u-logo" #}
|
||||
<img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
|
||||
</h2>
|
||||
<img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
|
||||
{{ nickname }}
|
||||
</strong>
|
||||
|
||||
{% set reply_to = note.getReplyToNickname() %}
|
||||
{% if reply_to is not null and not skip_reply_to is defined %}
|
||||
@ -51,6 +52,7 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if note.getLinks() is not empty %}
|
||||
<div tabindex="0" class="note-links" title="{{ 'Shared links in this note.' | trans }}">
|
||||
{% for link in note.getLinks() %}
|
||||
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
|
||||
@ -58,16 +60,17 @@
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
{% if replies is defined and replies is not empty %}
|
||||
<div class="u-in-reply-to replies">
|
||||
<div class="u-in-reply-to replies" tabindex="0" title="{{ 'Begin replies to ' | trans }} {{ nickname }}'s note!">
|
||||
{% for conversation in replies %}
|
||||
{% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if reply_to is not empty %}
|
||||
<hr>
|
||||
<hr tabindex="0" title="{{ 'End of this reply.' | trans }}">
|
||||
{% endif %}
|
||||
</article>
|
||||
@ -6,8 +6,8 @@
|
||||
<aside class="panel-content accessibility-target">
|
||||
{% if app.user %}
|
||||
<section tabindex="0" class='profile' title="{{ 'Your profile information.' | trans }}">
|
||||
<a id="user" href="{{ path('settings') }}" title="{{ 'Access main settngs.' | trans }}">
|
||||
<img src='{{ user_avatar }}' alt="{{ 'Your account\'s avatar.' | trans }}" class="icon icon-avatar">
|
||||
<a id="user" href="{{ path('settings') }}">
|
||||
<img src='{{ user_avatar }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
|
||||
<div id="user-info">
|
||||
<strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong>
|
||||
|
||||
@ -21,61 +21,83 @@
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<section id="user-stats" title="{{ 'Your account statistics.' | trans }}">
|
||||
<section id="user-stats">
|
||||
{% if user_followers %}<h2>{{ 'Followers' | trans }} {{ user_followers }}</h2> {% endif %}
|
||||
{% if user_followed %}<h2>{{ 'Followed' | trans }} {{ user_followed }}</h2> {% endif %}
|
||||
</section>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
{# {% for extra in profile_extras %}
|
||||
{% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
|
||||
{% endfor %} #}
|
||||
</section>
|
||||
|
||||
<nav class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all">
|
||||
<a href='{{ path('settings') }}' class='{{ active("replies") }}' title="{{ 'Your messages.' | trans }}">Messages</a>
|
||||
<a href="{{ path("replies", {'nickname' : user_nickname}) }}"
|
||||
class='{{ active("replies") }}' title="{{ 'Replies to your notes.' | trans }}">Replies</a>
|
||||
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
|
||||
<a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'>
|
||||
Messages
|
||||
</a>
|
||||
|
||||
<a title='{{ 'Replies to your notes.' | trans }}' href="{{ path('replies', {'nickname' : user_nickname}) }}" class='{{ active("replies") }}'>
|
||||
Replies
|
||||
</a>
|
||||
|
||||
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
|
||||
{{ link | raw }}
|
||||
{% endfor %}
|
||||
<a href="{{ path('settings') }}"
|
||||
class='{{ active('settings') }}' title="{{ 'Access your account settings.' | trans }}">Settings</a>
|
||||
<a href='{{ path('logout') }}' title="{{ 'Logout from your account.' | trans }}">Logout</a>
|
||||
|
||||
<a title='{{ 'Access your account settings.' | trans }}' href="{{ path('settings') }}" class='{{ active('settings') }}'>
|
||||
Settings
|
||||
</a>
|
||||
|
||||
<a title='{{ 'Logout from your account.' | trans }}' href='{{ path('logout') }}'>
|
||||
Logout
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{% else %}
|
||||
<nav class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}" aria-relevant="all">
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}' title="{{ 'Login with your existing account.' | trans }}">Login</a>
|
||||
<a href="{{ path('register') }}" title="{{ 'Register a new account!' | trans }}">Register</a>
|
||||
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
|
||||
|
||||
<a title='{{ 'Login with your existing account.' | trans }}' href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>
|
||||
Login
|
||||
</a>
|
||||
|
||||
<a title='{{ 'Register a new account!' | trans }}' href="{{ path('register') }}">
|
||||
Register
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="timeline-nav">
|
||||
<nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}">
|
||||
<strong id="timeline-nav-header">Timeline</strong>
|
||||
|
||||
<nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}" aria-relevant="all">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ path('main_public') }}"
|
||||
class='{{ active('main_public') }}'>Public</a>
|
||||
<a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
|
||||
Public
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{% if user_nickname is defined %}
|
||||
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
|
||||
class='{{ active("home_all") }}'>Home</a>
|
||||
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}" class='{{ active("home_all") }}'>
|
||||
Home
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
|
||||
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>
|
||||
Network
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% if main_nav_tabs is defined %}
|
||||
{% for tab in main_nav_tabs %}
|
||||
<li>
|
||||
<a href="{{ path(tab['route']) }}"
|
||||
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
|
||||
<a href="{{ path(tab['route']) }}" class='{{ active(tab['route']) }}'>
|
||||
{{ tab['title'] }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
@ -85,11 +107,21 @@
|
||||
|
||||
<footer class="footer">
|
||||
<nav>
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
|
||||
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
|
||||
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
|
||||
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
|
||||
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>
|
||||
FAQ
|
||||
</a>
|
||||
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>
|
||||
TOS
|
||||
</a>
|
||||
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>
|
||||
Privacy
|
||||
</a>
|
||||
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>
|
||||
Source
|
||||
</a>
|
||||
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>
|
||||
Version
|
||||
</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user