Skip to content

Commit 2170d14

Browse files
ritesh-pandeyritesh-pandey
authored
Merge branch 'master' into 303-fix-relative-paths
2 parents fa199d1 + d9ca7d4 commit 2170d14

File tree

7 files changed

+120
-11
lines changed

7 files changed

+120
-11
lines changed

‎content/blog/authors/AyanChoudhary/contents.lr

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
username: AyanChoudhary
2+
---
3+
name: Ayan Choudhary
4+
---
5+
md5_hashed_email: ba5f8ac4afb162644051544e25b5cfe8
6+
---
7+
about:
8+
Ayan Choudhary is an Electrical Engineering undergraduate student from India and will be interning with Creative Commons during the summer. He has been involved with coding quite heavily for the past couple of years which is one of his numerous hobbies. Some of the sectors which really fascinate him include network security, blockchain, and data science. Apart from this he loves reading and painting and is quite interested in PC gaming and binge-watching online shows.
9+
He is working on [ccsearch](https://github.com/creativecommons/cccatalog-frontend) as a part of GSoC20.
10+
He is `@ayan` on slack.

‎content/blog/entries/cc-search-accessibility-and-internationalization/contents.lr

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
title: CC Search, Proposal Drafting and Community Bonding
2+
---
3+
categories:
4+
cc-search
5+
community
6+
gsoc
7+
open-source
8+
9+
---
10+
author: AyanChoudhary
11+
---
12+
series: gsoc-2020-ccsearch-accessibility
13+
---
14+
pub_date: 2020-05-22
15+
---
16+
body:
17+
18+
### Proposal Drafting
19+
20+
The majority of my time in March was spent on drafting the proposal for my project **Improve CC Search Accessibility**.
21+
While drafting my proposal I had two broad topic that I had to focus on: Accessibility and Internationalization.
22+
23+
So the first thing which I did was go through the various resources available with me such as w3 guidelines for accessibility, dequeuniversity accessibility insights and MDN notes on accessibility.
24+
After I made myself acquainted myself wih all of these, the next challenge was to sort out which of the metrics were relevant and important enough to be detailed in the proposal and also some of the others metrics which made notable appearances.
25+
Finally by including all of these I had the accessibility part of my proposal complete. Next, I had to work out the part for internationalization. Since it was already decided upon that we will be using vue-i18n, I did some research as to how to we can leverage it to gain the best possible result.
26+
27+
One of the important parts of internationalization happens to be deciding upon the JSON structure which was a highlighted section in my proposal.
28+
The other notable sections included strategies for modification of templates while translating and also how the translations would be carried out without hindering any further development of the platform.
29+
30+
### Community Bonding
31+
32+
Community Bonding involved getting to the mentors and the people whom I will be working with during this internship. Also we decided upon running the audit tests for the cc-search website during this time as it would help identify the key issues we would be facing and also would provide a suitable foundation to start working upon.
33+
The audits were done using Lighthouse, Accessibility Insights and pa11y and they provided useful insights on which parts of the website we should be focusing on such as the contrast issues and the aria-label fixes.
34+
35+
Coming up next will be the progress on the first 2 weeks of the project.

‎content/blog/entries/cc-search-accessibility-week1-2/audit.png

122 KB
Loading

‎content/blog/entries/cc-search-accessibility-week1-2/contents.lr

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
title: CC Search, Setting up vue-i18n and internationalizing homepage
2+
---
3+
categories:
4+
cc-search
5+
community
6+
gsoc
7+
open-source
8+
9+
---
10+
author: AyanChoudhary
11+
---
12+
series: gsoc-2020-ccsearch-accessibility
13+
---
14+
pub_date: 2020-06-10
15+
---
16+
body:
17+
18+
These are the first two weeks of my internship with CC. I am working on improving the accessibility of cc-search and internationalizing it as well.
19+
We started with first compiling the accessibility reports from accessibility insights, lighthouse and pa11y into a single document and then opening up appropriate issues ont he repo to address them.
20+
21+
The accessibility issues are listed here:
22+
1. [Accessibility - Improve labels](https://github.com/creativecommons/cccatalog-frontend/issues/996)
23+
2. [Evaluate keyboard navigation effectiveness](https://github.com/creativecommons/cccatalog-frontend/issues/997)
24+
3. [Fix color contrast problems](https://github.com/creativecommons/cccatalog-frontend/issues/998)
25+
4. [Improve elements markup](https://github.com/creativecommons/cccatalog-frontend/issues/999)
26+
5. [Evaluate any accessibility linter tools](https://github.com/creativecommons/cccatalog-frontend/issues/1000)
27+
28+
The decision was made to audit the tab indices along with internationalizing the page.
29+
The accessibility changes will be done after the completion of internationalization as the aria-labels will have to be internationalized as well.
30+
31+
The first two weeks involved setting up vue-i18n, auditing the tab index for homepage and internationalizing it.
32+
The tab index adit for homepage is displayed:
33+
34+
![audit.png](audit.png)
35+
36+
The internationalization part was pretty straightforward, we just had to export all the strings to the JSON files and load transaltions through the i18n module.
37+
For complex elements of the type ```string <tag>string</tag> string``` I went for the templating method.
38+
Here we use the v-slot attribute of the i18n functional component to convert the element into a template where the tag occupies a slot in the syntax.
39+
40+
```
41+
<i18n path="footer.caption.label" tag="p" class="caption">
42+
<template v-slot:noted>
43+
<a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">{{$t('footer.caption.noted')}}</a>
44+
</template>
45+
<template v-slot:attribution>
46+
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">
47+
{{$t('footer.caption.attribution')}}
48+
</a>
49+
</template>
50+
<template v-slot:icons>
51+
<a href="https://fontawesome.com/" target="_blank" rel="noopener" class="has-text-white">
52+
{{$t('footer.caption.icons')}}
53+
</a>
54+
</template>
55+
</i18n>
56+
```
57+
58+
The final outcome looks pretty good:
59+
60+
![final.png](final.png)
61+
62+
And voila we are done with the first two weeks. I also internationalized the header and the footer along with the homepage.
63+
You can track the work done for these weeks through these PRs:
64+
65+
1. [setup internationalization plugin](https://github.com/creativecommons/cccatalog-frontend/pull/1007)
66+
2. [Internationalize homepage, header and footer](https://github.com/creativecommons/cccatalog-frontend/pull/1013)
67+
68+
The progress of the project can be tracked on [cc-search](https://github.com/creativecommons/cccatalog-frontend)
69+
70+
CC Search Accessiblity is my GSoC 2020 project under the guidance of [Ari Madian](https://opensource.creativecommons.org/blog/authors/akmadian/), who is the primary mentor for this project, [Anna Tumadóttir](https://creativecommons.org/author/annacreativecommons-org/) for helping all along and engineering director [Kriti
71+
Godey](https://creativecommons.org/author/kriticreativecommons-org/), have been very supportive.

‎content/blog/entries/cc-search-accessibility-week1-2/final.png

78.7 KB
Loading

‎content/blog/series/gsoc-2020-ccsearch-accessibility/contents.lr

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
name: GSoC 2020: CC Search

‎webpack/package-lock.json

+3-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)