[LEFT][CSS] Fix scrolling when tabbing, navigating through notes is more obvious now. Timeline navigation fix for screen readers to know that the navigation title matters.

This commit is contained in:
Eliseu Amaro 2021-09-07 20:34:45 +01:00 committed by Hugo Sales
parent 3abf71b707
commit c4b328c03b
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 21 additions and 7 deletions

View File

@ -1,3 +1,8 @@
html * {
scroll-behavior: smooth;
scroll-margin-top: 4rem;
}
:root { :root {
/* FONTS */ /* FONTS */
--main-font: 'Inter var', sans-serif; --main-font: 'Inter var', sans-serif;
@ -167,7 +172,8 @@ summary:hover .icon-details-open {
/* CONTAINS ALL ELEMENTS BESIDES HEADER */ /* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container { .container {
margin-top: 3rem; position: relative;
top: 3rem;
margin-left: 20%; margin-left: 20%;
margin-right: 20%; margin-right: 20%;
@ -285,8 +291,12 @@ summary:hover .icon-details-open {
align-items: center; align-items: center;
align-self: center; align-self: center;
} }
.note-author:focus-within {
border: 2px solid var(--bg3);
transition: border ease-in-out;
}
.note-info .avatar { .note-author .avatar {
width: auto; width: auto;
height: var(--medium-size); height: var(--medium-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
@ -350,6 +360,10 @@ summary:hover .icon-details-open {
padding: var(--small-size); padding: var(--small-size);
} }
.note-content:focus-within {
border: 2px solid var(--bg3);
transition: border ease-in-out;
}
.note-content p { .note-content p {
padding-left: var(--small-size); padding-left: var(--small-size);

View File

@ -3,9 +3,9 @@
{% set nickname = note.getActorNickname() %} {% set nickname = note.getActorNickname() %}
{# TODO: this should link to the note's user profile? #} {# TODO: this should link to the note's user profile? #}
<h2 title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#"> <h2 tabindex="0" title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#" aria-relevant="all">
{# Microformat's h-card properties indicates a face icon is a "u-logo" #} {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
<img title='{{ 'This note author\'s avatar.' | trans }}' class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }} <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
</h2> </h2>
{% set reply_to = note.getReplyToNickname() %} {% set reply_to = note.getReplyToNickname() %}
@ -33,7 +33,7 @@
</div> </div>
{% endif %} {% endif %}
</header> </header>
<div class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}"> <div tabindex="0" class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}" aria-relevant="all">
{% block markdown %} {% block markdown %}
{% apply markdown_to_html %} {% apply markdown_to_html %}
{{ note.getContent() }} {{ note.getContent() }}

View File

@ -53,9 +53,9 @@
{% endif %} {% endif %}
<div class="timeline-nav"> <div class="timeline-nav">
<strong id="timeline-nav-header" title="{{ 'Navigate each timeline.' | trans }}" aria-relevant="all">Timeline</strong> <strong id="timeline-nav-header">Timeline</strong>
<nav class='sec-nav'> <nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}" aria-relevant="all">
<ul> <ul>
<li> <li>
<a href="{{ path('main_public') }}" <a href="{{ path('main_public') }}"