GNUsocial
/
gnusocial.rocks
4
0
Fork 1
Code Issues Pull Requests Releases Activity

[BLOG][Milestone] Automatic Acessibility Test

This commit is contained in:
Diogo Peralta Cordeiro 2022-01-18 13:57:01 +00:00
parent 7459875db7
commit b7199fbe35
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
6 changed files with 443 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
v3/assets/a11y/report.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
v3/assets/a11y/violations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

507
v3/feed.rss
View File

@ -2,139 +2,177 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel><title>GNU social V3</title><link>https://gnusocial.rocks/v3/index.html</link>
<description>Development blog where we announce our progress.</description><language>en</language>
<lastBuildDate>Tue, 18 Jan 2022 13:13:44 +0000</lastBuildDate>
<pubDate>Tue, 18 Jan 2022 13:13:44 +0000</pubDate>
<lastBuildDate>Tue, 18 Jan 2022 13:56:41 +0000</lastBuildDate>
<pubDate>Tue, 18 Jan 2022 13:56:41 +0000</pubDate>
<atom:link href="https://gnusocial.rocks/v3/feed.rss" rel="self" type="application/rss+xml" />
<item><title>
Updates: Local Groups
Milestone: Automatic Accesibility (A11Y) testing
</title><description><![CDATA[
<p><img src="assets/groups/profile.png" alt="" title="" /></p>
<p>We use <code>pa11y-ci</code> to run our accesibility testing on all GNU social
pages. The process of setting this up was a bit of a ride, but the
results are quite useful:</p>
<p>We haven't implemented federation of Groups yet, but group tags and <a href="https://socialhub.activitypub.rocks/t/decentralised-group/2200/17?u=diogo">discussion
on how unbounded groups can be federated via ActivityPub</a> has already started.</p>
<p><img src="assets/a11y/report.png" alt="Accesibility report generated by Pa11y" title="" /></p>
<p>Concerning federation of traditional groups, we will port our logic from v2 and
translate following the same rules as AndStatus <a href="https://github.com/andstatus/andstatus/issues/248#issuecomment-558703558">because they work</a>, as yvolk beautifully stated :)</p>
<p>We also take screenshots of all pages and compare them with the
previous, allowing us to spot (possibly) unintended changes in the UI.</p>
<p>Finally, also note that the group actors now have "self-tags", as the other actors, which was a milestone.</p>
<p>The way we do this is by using a <code>docker</code> image derived from <code>node</code>,
with <code>pa11y-ci</code> installed, which doesn't have an entrypoint. This then
allows us to spin up a webserver, PHP and Redis containers, mimiking a
staging environment. <code>pa11y-ci</code> uses a JSON config file to tell it
what to do, and handles visiting all pages with the given resolution,
logging in and registering any accesibility violations found.</p>
<p><img src="assets/a11y/violations.png" alt="Accesibility violations found by Pa11y" title="" /></p>
<p>Note that most of these errors are actually the same.</p>
<p>The saved screenshots are then used to detect changes, with
ImageMagik's <code>compare</code>, to generate a report on visual changes.</p>
<p><img src="assets/a11y/compare.png" alt="Screenshot comparisons" title="" /></p>
<p>We were already striving for making GNU social accesible, which is
clear from the really low number of violations found, but there's
always room for improvement :)</p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/updates-local-groups.html</link>
<guid>https://gnusocial.rocks/v3/./updates-local-groups.html</guid>
]]></description><link>https://gnusocial.rocks/v3/milestone-automatic-accesibility-a11y-testing.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-automatic-accesibility-a11y-testing.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 13:13:38 +0000</pubDate></item>
<pubDate>Tue, 18 Jan 2022 13:56:33 +0000</pubDate></item>
<item><title>
Milestone: Pinned Notes
Milestone: ActivityStreams 2.0 and WebFinger
</title><description><![CDATA[
You can now pin notes in your profile! Given you have suficient permissions to do so (e.g. you created the note), an additional action is represented, allowing you to highlight your favourite notes.</p>
<p>With this feature, an actor has more ways to express itself to the community as a whole. This activity is federated using <a href="https://docs.joinmastodon.org/spec/activitypub/#featured">Mastodon's featured collection extension</a>.</p>
<p>The primary use of GNU social is to access the <a href="https://blog.diogo.site/what-is-the-fediverse">free network</a>, be it ActivityWeb (ActivityPub) or Fediverse (OStatus).</p>
<p>Contrary to the original plan, we have merged <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/nightly/modules/TheFreeNetwork">The Free Network Module</a>, <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/nightly/plugins/WebFinger">WebFinger</a> and <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/nightly/plugins/LRDD">LRDD</a> into a single component named <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/components/FreeNetwork">FreeNetwork</a>. Likewise, ActivityPub and ActivityStreams 2.0 was kept the same plugin instead of separated.</p>
<h2>Understanding the organisation chosen</h2>
<p>The FreeNetwork component adds WebFinger (RFC7033) lookup and implements Link-based Resource Descriptor Discovery (LRDD) based on RFC6415, Web Host Metadata. It takes and produces both Extensible Resource Descriptor (XRD) and JSON (JavaSript Object Notation). Furthermore, and different from v2, every federation protocol will use the same distribution queue maintained by this component instead of holding its own.</p>
<p>We originally intended to have data modelling plugins that would extend the GS's "language". We then understood that it added more complexity than we wanted without any considerable advantage because we cannot dissociate data reception handling of the protocol itself.</p>
<h2>Situation Report</h2>
<p><a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/ActivityPub">ActivityPub</a> already translates between activity and entity and allows plugins to extend it (thus serving a similar purpose to data modelling and representation plugins).</p>
<p>GNU social v3 now supports <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/src/Util/Formatting.php#L292">mentions</a>, which is a process that starts in the <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/components/Posting/Posting.php#L197">Posting component</a>. The processing of local mentions naturally finds its entire handling here.</p>
<p>For remote ActivityPub mentions, <a href="(https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/ActivityPub/Entity/ActivitypubActor.php#L179">ActivityPub handles it aided by the FreeNetwork component</a>).</p>
<h2>Next steps</h2>
<p>We still have to port OStatus (and ActivityStreams 1.0) and implement the distribution by FreeNetwork, although the base work is done. Regarding ActivityPub, although some of it already works, expanding the existing plugins to supplement ActivityPub, and full validation isn't ready yet. We will most likely finish the implementation of the whole federation stack in the next week.</p>
<p><a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/PinnedNotes">Source</a>
<img src="assets/profile/pin_note.png" alt="Default view of the actor profile, showing the 'Pin this note' action, and its respective representation" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-pinned-notes.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-pinned-notes.html</guid>
]]></description><link>https://gnusocial.rocks/v3/milestone-activitystreams-20-and-webfinger.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-activitystreams-20-and-webfinger.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 12:36:14 +0000</pubDate></item>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Notes with LaTeX
Milestone: Actor colour theme plugin
</title><description><![CDATA[
<p>LaTeX content types is now supported.</p>
<p>Actors are now able to set their own colours, through a brand new plugin: "Oomox".
Those accustomed to customising their own desktop should know where the name comes from ;)</p>
<p><img src="assets/notes/content_type.png" alt="" title="" /></p>
<h2>Here's how it works!</h2>
<h2>latex</h2>
<p>The Oomox plugin main class catches the "PopulateProfileSettingsTabs" event upon visiting user panel.</p>
<p><img src="assets/notes/latex_content.png" alt="" title="" />
<img src="assets/notes/latex_rendered.png" alt="" title="" /></p>
<pre><code>public function onPopulateProfileSettingsTabs(Request $request, array &amp;$tabs): bool
{
$tabs[] = [
'title' =&gt; 'Light theme colours',
'desc' =&gt; 'Change the theme colours.',
'controller' =&gt; C\Oomox::oomoxSettingsLight($request),
];
$tabs[] = [
'title' =&gt; 'Dark theme colours',
'desc' =&gt; 'Change the theme colours.',
'controller' =&gt; C\Oomox::oomoxSettingsDark($request),
];
return Event::next;
}
</code></pre>
<p>As made evident by the code, two new tabs are added to profile settings, light and dark theme colours.
Since the page styling follows the system theme, actors may want to style each theme differently, therefore they are treated separately.</p>
<p>The actor's defined colours are then saved in the respective entity and cached.
Finally, the colour preferences are used to render the corresponding CSS file which defines the various colour variables used:</p>
<pre><code>public function oomoxCSS(): Response
{
$user = Common::ensureLoggedIn();
$oomox_table = PluginOomox::getEntity($user);
if (is_null($oomox_table)) {
throw new ClientException(_m('No custom colours defined', 404));
}
$content = Formatting::twigRenderFile('/oomox/root_override.css.twig', ['oomox' =&gt; $oomox_table]);
return new Response($content, status: 200, headers: ['content-type' =&gt; 'text/css']);
}
</code></pre>
<p>Please note, upon rendering for the first time, page render may be blocked until the resulting file is served. Nonetheless, subsequent page renders
won't experience the issue again. That is, if the file is cached by the browser.</p>
<h2>How it looks</h2>
<p>Tabs added using the "PopulateProfileSettingsTabs" event:
<img src="assets/actor_colour_theme_plugin/settings_change_theme_colours.png" alt="User panel Oomox sections" title="" /></p>
<p>Changing the dark theme colours!
<img src="assets/actor_colour_theme_plugin/settings_change_theme_colours3.png" alt="Dark theme colours selection" title="" /></p>
<p>The result of given changes, please note it's no longer a 'dark' theme.
Given a valid colour, it's the actor's responsibility whether or not the colours make sense. So, go wild!
<img src="assets/actor_colour_theme_plugin/settings_change_theme_colours4.png" alt="The resulting colours in action!" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-notes-with-latex.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-notes-with-latex.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 11:41:47 +0000</pubDate></item>
<item><title>
Milestone: Notes with Markdown
</title><description><![CDATA[
<p>Markdown content types is now supported.</p>
<p><img src="assets/notes/content_type.png" alt="" title="" /></p>
<h2>Markdown</h2>
<p><img src="assets/notes/markdown_content.png" alt="" title="" />
<img src="assets/notes/markdown_rendered.png" alt="" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-notes-with-markdown.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-notes-with-markdown.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 11:40:49 +0000</pubDate></item>
<item><title>
Milestone: Web Monetization
</title><description><![CDATA[
<p><a href="https://webmonetization.org/">Web Monetization</a> is being proposed as a W3C
standard at the Web Platform Incubator Community Group.</p>
<p>GNU social now supports that initiative with the <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/WebMonetization">Web Monetization plugin</a>.</p>
<p>With this, we also introduce an ActivityPub (FEP pending) GS extension
<code>gs:webmonetizationWallet</code>. This enables actors to support other actors with Web
Monetization in the fediverse.</p>
<p>It looks like this:</p>
<h2>Own profile</h2>
<p><img src="assets/web_monetization/address.png" alt="" title="" /></p>
<h2>In the profile of other actors</h2>
<p><img src="assets/web_monetization/donate.png" alt="" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-web-monetization.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-web-monetization.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 01:57:40 +0000</pubDate></item>
<item><title>
Milestone: Mute notifications from a conversation
</title><description><![CDATA[
<p>If a conversation in which you have interacted becomes very active and you wish
to stop receiving notifications derived from that, it is now possible:
<img src="assets/conversation/mute.png" alt="" title="" /></p>
@ -147,10 +185,10 @@ to stop receiving notifications derived from that, it is now possible:
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-mute-notifications-from-a-conversation.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-mute-notifications-from-a-conversation.html</guid>
]]></description><link>https://gnusocial.rocks/v3/milestone-actor-colour-theme-plugin.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-actor-colour-theme-plugin.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 01:39:10 +0000</pubDate></item>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Albums
</title><description><![CDATA[
@ -191,7 +229,7 @@ specialisation of a collection.</p>
]]></description><link>https://gnusocial.rocks/v3/milestone-albums.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-albums.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 01:23:27 +0000</pubDate></item>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Collections
</title><description><![CDATA[
@ -258,132 +296,72 @@ automatically</a>.</p>
]]></description><link>https://gnusocial.rocks/v3/milestone-collections.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-collections.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 00:21:29 +0000</pubDate></item>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: ActivityPub
Milestone: Documentation and Tests Infrastructure
</title><description><![CDATA[
<p><a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/ActivityPub">ActivityPub Plugin source</a>.</p>
<p><strong><a href="https://agile.gnusocial.rocks/doku.php?id=milestones:initial_test_documentation_infrastructure">>WIKI Milestone entry</a></strong></p>
<p>This milestone could be just this, what's different from any other ActivityPub
plugin? How is it better than v2's?</p>
<p>It's better in how it's organised and extensible, check the <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/ActivityPub/EVENTS.md">EVENTS.md</a> for examples.</p>
<h2>Video of GNU social v3 exchanging notes with GNU social v2.</h2>
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 federating with GNU social v2 via ActivityPub" src="https://tube.tchncs.de/videos/embed/ca778b22-1af2-4b6f-af3d-f24aac7af9f4" frameborder="0" allowfullscreen></iframe>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-activitypub.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-activitypub.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Fri, 10 Dec 2021 16:34:39 +0000</pubDate></item>
<item><title>
Milestone: Tags
</title><description><![CDATA[
<p>GNU social now has its documentation available in
<a href="https://docs.gnusocial.rocks/">https://docs.gnusocial.rocks/</a>. It features four
different books. These are automatically generated from the <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/docs">source</a> using <a href="https://rust-lang.github.io/mdBook/">mdBook</a>.</p>
<blockquote>
<p>Due to the high density of technical aspects, we decided to keep this blog
post more on the light side and focus on explaining the new functionalities.
Check our Wiki Milestone entry for all the juicy details.</p>
<p>Only the development book is in an elaborated state, the other books are
holding for more ready code.</p>
</blockquote>
<p><strong><a href="https://agile.gnusocial.rocks/doku.php?id=milestones:tags">>WIKI Milestone entry</a></strong></p>
<p>GNU social v2 has tags and lists. It allows you to:</p>
<p>And two of them are new:</p>
<ul>
<li>search for an <code>#hashtag</code> and see a stream of notes tagged with it;</li>
<li>make lists of actors and mention them with <code>@#list_name</code></li>
<li>self tag and enter a list of people in your instance with the same self tag</li>
<li>The <a href="https://docs.gnusocial.rocks/developer">Developer</a> is both intended to guide third-party plugin developers and to make it easier of contributing to the code.</li>
<li>The <a href="https://docs.gnusocial.rocks/designer">Designer</a> is the most recent of the four and came from a necessity of keeping some standardization between templates and ensuring the same principles are kept in mind when designing new themes.</li>
</ul>
<p>It is limited with regards to federation of self tags and the <code>@#list_name</code> can't
target remote actors even when they are inside your list.</p>
<p>And two of them are updates from existing documentation:</p>
<ul>
<li>The <a href="https://docs.gnusocial.rocks/user">User</a> one is adapted
from the existing GNU social documentation for users that was provided in v2.</li>
<li>The <a href="https://docs.gnusocial.rocks/administrator">Administrator</a> one is adapted
from the "Unofficial GNU social docs" by Thomask who <a href="https://notabug.org/diogo/gnu-social/issues/246">asked us to make it official</a>.</li>
</ul>
<p>Together with the documentation we've introduced a
<a href="https://agile.gnusocial.rocks/">wiki</a>. Its purpose is to walk-through decisions,
convention, terminology. It's where we document the reasoning the development team went
through before implementing more sophisticated functionalities.</p>
<p>Finally, when the documentation doesn't explain, and to ensure the whole code
is properly tested, we have the
<a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/tests">tests</a>. And the coverage is available <a href="https://coverage.gnusocial.rocks/">here</a>. At the time of writing the coverage has 98.76% code lines tested.</p>
<h2>What's new with v3?</h2>
<h3>Federated self tags</h3>
<p>We now federate self tags and lists, so that constraint from v2 was moved out of
the way.</p>
<p>In the future, the use of these tags can allow you to find people,
groups and even individual notes that have a tag you're interested in. We only
mean filtering, not magic recommendation algorithms.</p>
<h3>Tag Wrangling</h3>
<p>Proposed by <a href="https://archiveofourown.org/users/licho">@licho</a> in Tue, 02 Jun 2019 17:52:07 GMT:</p>
<blockquote>
<p>I like the tag wrangling feature of AO3, which I think would help for cases of synonymous tags like #introduction and #introductions</p>
<p>https://archiveofourown.org/wrangling_guidelines/11</p>
<p>Is it feasible for !gnusocial ? Or would it cause problems?</p>
</blockquote>
<p>The answer is <strong>yes</strong> and will be released with v3. With the addition of
<a href="https://gnusocial.rocks/v3/milestone-notes-and-actors-with-languages.html">Languages in notes and actors</a> there was little excuse not to be feasible.</p>
<p><img src="assets/tags/feed-note-tag-run.png" alt="" title="" />
<img src="assets/tags/feed-note-tag-running.png" alt="" title="" /></p>
<p>Whenever you post a note containing tags, you can choose whether to
make those tags canonical. This means that, for instance, the tags
<code>#run</code> and <code>#running</code> become the 'same', meaning that when you click on
the link for the <code>#run</code> tag, you'll also see notes tagged #running. You
can opt out of the behaviour by unchecking the "Make note tags
canonical". An identical process occurs for people tags.</p>
<p><img src="assets/tags/checked_make_canonical.png" alt="" title="" /></p>
<p>Internally, this transformation is accomplished by splitting the tag
into words and <a href="https://en.wikipedia.org/wiki/Stemming">stemming</a> each word.</p>
<h3>Related Tags</h3>
<p>In a tag feed, you can see tags that are often used together with the
one you're seeing. This can be useful, for instance, for finding other
content you'd be interested in.</p>
<p><img src="assets/tags/feed-related-notes-shoes.png" alt="" title="" />
<img src="assets/tags/feed-related-notes-running.png" alt="" title="" /></p>
<h3>Improved Tag feeds</h3>
<p><img src="assets/tags/selftag-feed.png" alt="" title="" /></p>
<p>When you click on a tag, be it a note tag or a person tag, you'll see
a feed of notes/people with that tag. You can also edit the feeds you
see in your left panel, so you can follow a given tag.</p>
<h3>Mute Self Tags and Note Tags</h3>
<p><img src="assets/tags/note-options.png" alt="" title="" />
<img src="assets/tags/note-muting.png" alt="" title="" />
<img src="assets/tags/tag-mute-settings.png" alt="" title="" /></p>
<p>If you don't like seeing a given tag in your feeds, for whatever
reason, you can choose to mute it. You can mute a note tag or a person
tag, in which case you wouldn't see any notes from people with that
tag.</p>
@ -402,8 +380,143 @@ tag.</p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-tags.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-tags.html</guid>
]]></description><link>https://gnusocial.rocks/v3/milestone-documentation-and-tests-infrastructure.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-documentation-and-tests-infrastructure.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Thu, 09 Dec 2021 15:21:18 +0000</pubDate></item>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Mute notifications from a conversation
</title><description><![CDATA[
<p>If a conversation in which you have interacted becomes very active and you wish
to stop receiving notifications derived from that, it is now possible:
<img src="assets/conversation/mute.png" alt="" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-mute-notifications-from-a-conversation.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-mute-notifications-from-a-conversation.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Notes and Actors with languages
</title><description><![CDATA[
<p>Well, it's that, our notes now have a language attribute.</p>
<p>... All right, all right, it's not <em>just</em> it.</p>
<h2>Here's what comes with it:</h2>
<ul>
<li><a href="">Filter the streams with only the languages you know</a></li>
<li><a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/components/Tag/Tag.php#L135-L146">Make Tag Wrangling possible and transversal to languages</a></li>
<li><a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/plugins/ActivityPub/Util/Model/Note.php#L123">Federate the language for a more inclusive free network</a></li>
</ul>
<h2>Here's how it looks</h2>
<p>First, the user panel section where the desired preferences are selected:
<img src="assets/notes_and_actors_with_languages/settings_language.png" alt="User panel language settings section" title="" /></p>
<p>Upon sending the previous form, the user is redirected to order their selection:
<img src="assets/notes_and_actors_with_languages/settings_language_order.png" alt="Ordering the selections made in previous page" title="" /></p>
<p>Finally, when posting the language with the highest priority is selected by default.</p>
<p>However, by accessing "Additional options", another language may be selected. The resulting
note will have the html <code>lang</code> attribute according to it.</p>
<p>The posting widget itself:
<img src="assets/notes_and_actors_with_languages/posting_language_options.png" alt="Selecting the language of a note when posting" title="" /></p>
<h2>What does this mean?</h2>
<p>We can now show you the notes you can read, but for groups, this mean that you
can access umbrella groups and filter the feeds to see what's in your language
and even region.</p>
<p>For too long the fediverse struggled with languages, this step makes it easier
for actual internationalization of the free network.</p>
<h2>A marvellous feed filtered by note language</h2>
<p><img src="assets/notes_and_actors_with_languages/feed-note-lang-pt.png" alt="" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-notes-and-actors-with-languages.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-notes-and-actors-with-languages.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Notes with LaTeX
</title><description><![CDATA[
<p>LaTeX content types is now supported.</p>
<p><img src="assets/notes/content_type.png" alt="" title="" /></p>
<h2>latex</h2>
<p><img src="assets/notes/latex_content.png" alt="" title="" />
<img src="assets/notes/latex_rendered.png" alt="" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-notes-with-latex.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-notes-with-latex.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
<item><title>
Milestone: Notes with Markdown
</title><description><![CDATA[
<p>Markdown content types is now supported.</p>
<p><img src="assets/notes/content_type.png" alt="" title="" /></p>
<h2>Markdown</h2>
<p><img src="assets/notes/markdown_content.png" alt="" title="" />
<img src="assets/notes/markdown_rendered.png" alt="" title="" /></p>
<!-- text end -->
]]></description><link>https://gnusocial.rocks/v3/milestone-notes-with-markdown.html</link>
<guid>https://gnusocial.rocks/v3/./milestone-notes-with-markdown.html</guid>
<dc:creator>GNU social development team</dc:creator>
<pubDate>Tue, 18 Jan 2022 13:56:12 +0000</pubDate></item>
</channel></rss>

54
v3/index.html
View File

@ -45,42 +45,28 @@ Our objective is to further differentiate GNU social from the alternative softwa
<h3>Blog</h3>
<h4 class='allposts_header'>January 2022</h4>
<ul>
<li><a href="./updates-local-groups.html">Updates: Local Groups</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-pinned-notes.html">Milestone: Pinned Notes</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-notes-with-latex.html">Milestone: Notes with LaTeX</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-notes-with-markdown.html">Milestone: Notes with Markdown</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-web-monetization.html">Milestone: Web Monetization</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-mute-notifications-from-a-conversation.html">Milestone: Mute notifications from a conversation</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-automatic-accesibility-a11y-testing.html">Milestone: Automatic Accesibility (A11Y) testing</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-activitystreams-20-and-webfinger.html">Milestone: ActivityStreams 2.0 and WebFinger</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-actor-colour-theme-plugin.html">Milestone: Actor colour theme plugin</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-albums.html">Milestone: Albums</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-collections.html">Milestone: Collections</a> &mdash; January 18, 2022</li>
</ul>
<h4 class='allposts_header'>December 2021</h4>
<ul>
<li><a href="./milestone-activitypub.html">Milestone: ActivityPub</a> &mdash; December 10, 2021</li>
<li><a href="./milestone-tags.html">Milestone: Tags</a> &mdash; December 09, 2021</li>
<li><a href="./milestone-actor-colour-theme-plugin.html">Milestone: Actor colour theme plugin</a> &mdash; December 09, 2021</li>
<li><a href="./updates-interface-structure-and-flexibility-improved.html">Updates: Interface Structure and Flexibility improved</a> &mdash; December 09, 2021</li>
<li><a href="./milestone-notes-and-actors-with-languages.html">Milestone: Notes and Actors with languages</a> &mdash; December 09, 2021</li>
</ul>
<h4 class='allposts_header'>November 2021</h4>
<ul>
<li><a href="./milestone-activitystreams-20-and-webfinger.html">Milestone: ActivityStreams 2.0 and WebFinger</a> &mdash; November 03, 2021</li>
</ul>
<h4 class='allposts_header'>September 2021</h4>
<ul>
<li><a href="./updates-interface-and-accessibility.html">Updates: Interface and accessibility</a> &mdash; September 13, 2021</li>
</ul>
<h4 class='allposts_header'>August 2021</h4>
<ul>
<li><a href="./updates-v3-blog.html">Updates: V3 blog</a> &mdash; August 16, 2021</li>
<li><a href="./updates-implement-storeremotemedia-for-v3-and-port-embed.html">Updates: Implement StoreRemoteMedia for v3 and port Embed</a> &mdash; August 13, 2021</li>
<li><a href="./updates-improve-the-attachments-system.html">Updates: Improve the Attachments system</a> &mdash; August 05, 2021</li>
<li><a href="./updates-finish-the-avatar-component.html">Updates: Finish the Avatar component</a> &mdash; August 04, 2021</li>
<li><a href="./milestone-documentation-and-tests-infrastructure.html">Milestone: Documentation and Tests Infrastructure</a> &mdash; August 04, 2021</li>
</ul>
<h4 class='allposts_header'>May 2021</h4>
<ul>
<li><a href="./milestone-port-media-handling-from-v2.html">Milestone: Port Media handling from v2</a> &mdash; May 03, 2021</li>
<li><a href="./milestone-documentation-and-tests-infrastructure.html">Milestone: Documentation and Tests Infrastructure</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-mute-notifications-from-a-conversation.html">Milestone: Mute notifications from a conversation</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-notes-and-actors-with-languages.html">Milestone: Notes and Actors with languages</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-notes-with-latex.html">Milestone: Notes with LaTeX</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-notes-with-markdown.html">Milestone: Notes with Markdown</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-pinned-notes.html">Milestone: Pinned Notes</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-port-media-handling-from-v2.html">Milestone: Port Media handling from v2</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-tags.html">Milestone: Tags</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-web-monetization.html">Milestone: Web Monetization</a> &mdash; January 18, 2022</li>
<li><a href="./updates-finish-the-avatar-component.html">Updates: Finish the Avatar component</a> &mdash; January 18, 2022</li>
<li><a href="./updates-implement-storeremotemedia-for-v3-and-port-embed.html">Updates: Implement StoreRemoteMedia for v3 and port Embed</a> &mdash; January 18, 2022</li>
<li><a href="./updates-improve-the-attachments-system.html">Updates: Improve the Attachments system</a> &mdash; January 18, 2022</li>
<li><a href="./updates-interface-and-accessibility.html">Updates: Interface and accessibility</a> &mdash; January 18, 2022</li>
<li><a href="./updates-interface-structure-and-flexibility-improved.html">Updates: Interface Structure and Flexibility improved</a> &mdash; January 18, 2022</li>
<li><a href="./updates-local-groups.html">Updates: Local Groups</a> &mdash; January 18, 2022</li>
<li><a href="./updates-v3-blog.html">Updates: V3 blog</a> &mdash; January 18, 2022</li>
<li><a href="./milestone-activitypub.html">Milestone: ActivityPub</a> &mdash; January 18, 2022</li>
</ul>
<div id="all_posts"><a href="all_tags.html">All tags</a> &mdash; <a href="feed.rss">Subscribe</a></div>
</div>

81
v3/milestone-automatic-accesibility-a11y-testing.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
<link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
<link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css"><title>Milestone: Automatic Accesibility (A11Y) testing - GNU social V3</title>
</head><body>
<header>
<div class="home-menu menu menu-horizontal menu-fixed">
<a class="menu-heading" href="https://gnusocial.rocks/">
<img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social">
<b>gnu</b>social
</a>
</div>
<div class="sidebar">
<ul class="menu-list">
<li class="menu-item menu-selected"><a href="index.html" class="menu-link">Blog Index</a></li>
<li class="menu-item"><a href="https://code.gnusocial.rocks/" class="menu-link">Repository</a></li>
<li class="menu-item"><a href="https://coverage.gnusocial.rocks/" class="menu-link">Code Coverage</a></li>
<li class="menu-item"><a href="https://docs.gnusocial.rocks/" class="menu-link">Documentation</a></li>
<li class="menu-item"><a href="https://agile.gnusocial.rocks/" class="menu-link">Wiki</a></li>
<li class="menu-item"><a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463" class="menu-link">Roadmap</a></li>
</ul>
</div>
</header>
<div class="content-wrapper">
<div class="content">
</div></div></div>
<div id="template-wrapper"><div class="template-unit">
<!-- entry begin -->
<h3><a class="ablack" href="milestone-automatic-accesibility-a11y-testing.html">
Milestone: Automatic Accesibility (A11Y) testing
</a></h3>
<!-- bashblog_timestamp: #202201181356.33# -->
<div class="subtitle">January 18, 2022 &mdash;
GNU social development team
</div>
<!-- text begin -->
<p>We use <code>pa11y-ci</code> to run our accesibility testing on all GNU social
pages. The process of setting this up was a bit of a ride, but the
results are quite useful:</p>
<p><img src="assets/a11y/report.png" alt="Accesibility report generated by Pa11y" title="" /></p>
<p>We also take screenshots of all pages and compare them with the
previous, allowing us to spot (possibly) unintended changes in the UI.</p>
<p>The way we do this is by using a <code>docker</code> image derived from <code>node</code>,
with <code>pa11y-ci</code> installed, which doesn't have an entrypoint. This then
allows us to spin up a webserver, PHP and Redis containers, mimiking a
staging environment. <code>pa11y-ci</code> uses a JSON config file to tell it
what to do, and handles visiting all pages with the given resolution,
logging in and registering any accesibility violations found.</p>
<p><img src="assets/a11y/violations.png" alt="Accesibility violations found by Pa11y" title="" /></p>
<p>Note that most of these errors are actually the same.</p>
<p>The saved screenshots are then used to detect changes, with
ImageMagik's <code>compare</code>, to generate a report on visual changes.</p>
<p><img src="assets/a11y/compare.png" alt="Screenshot comparisons" title="" /></p>
<p>We were already striving for making GNU social accesible, which is
clear from the really low number of violations found, but there's
always room for improvement :)</p>
<!-- text end -->
<!-- entry end -->
</div>
</div></div>
<footer class="footer l-box is-center">
This site's source is
<a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
</footer></body></html>

32
v3/milestone-automatic-accesibility-a11y-testing.md Normal file
View File

@ -0,0 +1,32 @@
Milestone: Automatic Accesibility (A11Y) testing
We use `pa11y-ci` to run our accesibility testing on all GNU social
pages. The process of setting this up was a bit of a ride, but the
results are quite useful:
![Accesibility report generated by Pa11y](assets/a11y/report.png)
We also take screenshots of all pages and compare them with the
previous, allowing us to spot (possibly) unintended changes in the UI.
The way we do this is by using a `docker` image derived from `node`,
with `pa11y-ci` installed, which doesn't have an entrypoint. This then
allows us to spin up a webserver, PHP and Redis containers, mimiking a
staging environment. `pa11y-ci` uses a JSON config file to tell it
what to do, and handles visiting all pages with the given resolution,
logging in and registering any accesibility violations found.
![Accesibility violations found by Pa11y](assets/a11y/violations.png)
Note that most of these errors are actually the same.
The saved screenshots are then used to detect changes, with
ImageMagik's `compare`, to generate a report on visual changes.
![Screenshot comparisons](assets/a11y/compare.png)
We were already striving for making GNU social accesible, which is
clear from the really low number of violations found, but there's
always room for improvement :)