wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-09-07 20:34:45 +01:00 committed by Hugo Sales
parent 3abf71b707
commit c4b328c03b
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/assets/css/base.css
View File

@ -1,3 +1,8 @@
html * {
scroll-behavior: smooth;
scroll-margin-top: 4rem;
}
:root {
/* FONTS */
--main-font: 'Inter var', sans-serif;
@ -167,7 +172,8 @@ summary:hover .icon-details-open {
/* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container {
margin-top: 3rem;
position: relative;
top: 3rem;
margin-left: 20%;
margin-right: 20%;
@ -285,8 +291,12 @@ 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-info .avatar {
.note-author .avatar {
width: auto;
height: var(--medium-size);
border-radius: var(--unit-size);
@ -350,6 +360,10 @@ 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);

6
templates/note/view.html.twig
View File

@ -3,9 +3,9 @@
{% set nickname = note.getActorNickname() %}
{# 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" #}
<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>
{% set reply_to = note.getReplyToNickname() %}
@ -33,7 +33,7 @@
</div>
{% endif %}
</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 %}
{% apply markdown_to_html %}
{{ note.getContent() }}

4
templates/sidepanel/left/left.html.twig
View File

@ -53,9 +53,9 @@
{% endif %}
<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>
<li>
<a href="{{ path('main_public') }}"