Skip to content

Commit 02def48

Browse files
Dhruvi16Dhruvi16
authored
Merge branch 'master' into add_final_blog
2 parents 3ae8142 + 7534634 commit 02def48

35 files changed

+537
-72
lines changed

‎content/blog/authors/blank_profile.svg

-10
This file was deleted.

‎content/blog/entries/blank_profile.svg

-10
This file was deleted.

‎content/blog/entries/cc-search-accessibility-week9-10/contents.lr

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
title: Accessibility Improvements: Final Changes and Modal Accessilibity
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-08-12
15+
---
16+
body:
17+
18+
These are the last two weeks of my internship with CC. I am working on improving the accessibility of cc-search and internationalizing it as well.
19+
This post contains details of my work done to make accessibility improvements to the search result page and the image detail page and also covers some advanced accessiblity improvement details.
20+
21+
The topics included in this post cover:
22+
23+
1. Tooltip accessibility and keyboard interactions
24+
2. Improve modal accessibility and implement trap focus
25+
3. Fix `<label>` for form elements
26+
27+
The first stage involved fixing the license explanation tooltips. These tooltips worked fine on click but did not respond to keypress events.
28+
The solution to overcome this was to use an event listener on the element which would would execute the `showLicenseExplanation` function onClick.
29+
Luckily `VueJS` provides this function inbuilt via the `v-on:keyup` attribute. So after change the code looks as follows:
30+
31+
```html
32+
<img
33+
:aria-label="$t('browse-page.aria.license-explanation')"
34+
tabindex="0"
35+
v-if="filterType == 'licenses'"
36+
src="@/assets/help_icon.svg"
37+
alt="help"
38+
class="license-help is-pulled-right padding-top-smallest padding-right-smaller"
39+
@click.stop="toggleLicenseExplanationVisibility(item.code)"
40+
v-on:keyup.enter="toggleLicenseExplanationVisibility(item.code)"
41+
/>
42+
```
43+
44+
Similar change was made to all the tooltips. The reason behind this error was that non-semantic element representation
45+
(i.e. using `<div>`, `<span>` or `<img>` instead of a `<button>`) does not register a keypress listener for these tags and hence they don't respond on keypress.
46+
47+
The second change is related to modals. Modals have some stringent accessilibity parameters that have to be carefully handled.
48+
The criteria are:
49+
50+
1. On opening the modal the remaining elements should get disabled.
51+
2. The modal should have trap-focus(the user should not exit the modal when using tab to navigate).
52+
3. The modal should close on pressing **esc** or on clicking the overlay.
53+
54+
To meet the criteria we developed a new [modal component](https://github.com/creativecommons/cccatalog-frontend/blob/develop/src/components/AppModal.vue).
55+
This modal has an overlay and closes when we press the **esc** key or click on the overlay. The modal also disables other elements when it is opened.
56+
57+
The final task achieved in the modal was the implementation of trap focus. For this we used the [vue-trap-focus library](https://github.com/posva/focus-trap-vue)
58+
The library exposes a `<focus-trap>` component which acts as wrapper to enable focus-trap. The implementation we used was:
59+
60+
```html
61+
<focus-trap :active="true">
62+
<div class="modal relative" aria-modal="true" role="dialog">
63+
<header
64+
v-if="title"
65+
class="modal-header padding-top-bigger padding-left-bigger padding-right-normal padding-bottom-small"
66+
>
67+
<slot name="header">
68+
<h3>{{ title }}</h3>
69+
</slot>
70+
<button
71+
type="button"
72+
class="close-button has-color-gray is-size-6 is-size-4-touch"
73+
@click="$emit('close')"
74+
:aria-label="$t('browse-page.aria.close')"
75+
>
76+
<i class="icon cross" />
77+
</button>
78+
</header>
79+
<slot default />
80+
</div>
81+
</focus-trap>
82+
```
83+
84+
Apart from these the modal also has the `aria-modal` attribute and the `role="dialog"` attribute.
85+
These attributes direct our screen readers to recognise this component as a modal and declare it whenever the modal opens.
86+
87+
The last improvement involves using appropriate label tags for the form elements. A lot of elements did not have proper labels or were nested in wrong way.
88+
These elements were fixed and after the fixing the nestings the elements had proper labels which the screen readers were able to identify.
89+
An example a proper input elements with correct label nesting is:
90+
91+
```html
92+
<label class="checkbox" :for="item.code" :disabled="block(item)">
93+
<input
94+
type="checkbox"
95+
class="filter-checkbox margin-right-small"
96+
:id="item.code"
97+
:key="index"
98+
:checked="item.checked"
99+
:disabled="block(item)"
100+
@change="onValueChange"
101+
/>
102+
<license-icons v-if="filterType == 'licenses'" :license="item.code" />
103+
{{ $t(item.name) }}
104+
</label>
105+
```
106+
Notice how the input is a child of the `<label>` tag which has the `for` attribute to point which element it labels.
107+
108+
Apart from these changes, the eslint configuration of the project were also changed to include a11y-linting for the elments.
109+
We used the [eslint-plugin-vue-a11y](https://github.com/maranran/eslint-plugin-vue-a11y) to enforce accessibility guidelines for our components via lint checks.
110+
Furthermore all the aria-labels were internationalized to enforce the i18n standard in our repo that we had setup earlier this summer.
111+
112+
After all these changes we had the following inprovements in the accessibility scores(computed from lighthouse):
113+
114+
1. Browse Page: 76 -> 98 | +22
115+
2. Collections Browse Page: 86 -> 96 | +10
116+
3. Photo Detail Page: 75 -> 95 | +20
117+
118+
And we are officially done with our work for the summer internship. The next blog will be the culmination of this series.
119+
120+
You can track the work done for these weeks through these PRs:
121+
122+
1. [Accessibility Improvements](https://github.com/creativecommons/cccatalog-frontend/pull/1072)
123+
2. [setup vue-a11y for eslint](https://github.com/creativecommons/cccatalog-frontend/pull/1121)
124+
3. [Aria labels and internationalization](https://github.com/creativecommons/cccatalog-frontend/pull/1123)
125+
4. [internationalize aria-labels for about page and feedback page](https://github.com/creativecommons/cccatalog-frontend/pull/1120)
126+
5. [add trap focus to modals](https://github.com/creativecommons/cccatalog-frontend/pull/1153)
127+
128+
The progress of the project can be tracked on [cc-search](https://github.com/creativecommons/cccatalog-frontend)
129+
130+
CC Search Accessiblity is my GSoC 2020 project under the guidance of [Zack Krida](https://creativecommons.org/author/zackcreativecommons-org/) and [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
131+
Godey](https://creativecommons.org/author/kriticreativecommons-org/), have been very supportive.

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
title: Accessibility and Internationalization: WrapUp GSoC 2020
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-08-31
15+
---
16+
body:
17+
18+
These is the final blog of my internship with CC. I am working on improving the accessibility of cc-search and internationalizing it as well.
19+
This blog is the conclusion of my work. These past 10 weeks with CC have taught me a lot and I am really grateful to have got this opportunity.
20+
The experience was just amazing and the poeple are so helpful I really enjoyed working with them and am looking forward to continue working with the CC team.
21+
22+
You can glance through my work through these blog posts:
23+
24+
1. [CC Search, Proposal Drafting and Community Bonding](http://opensource.creativecommons.org/blog/entries/cc-search-accessibility-and-internationalization/)
25+
2. [CC Search, Setting up vue-i18n and internationalizing homepage](http://opensource.creativecommons.org/blog/entries/cc-search-accessibility-week1-2/)
26+
3. [Internationalization Continued: Handling strings in the store](http://opensource.creativecommons.org/blog/entries/cc-search-accessibility-week3-4/)
27+
4. [Internationalization continued: Modifying tests](http://opensource.creativecommons.org/blog/entries/cc-search-accessibility-week5-6/)
28+
5. [CC Search, Initial Accessibility Improvements](http://opensource.creativecommons.org/blog/entries/cc-search-accessibility-week7-8/)
29+
6. [Accessibility Improvements: Final Changes and Modal Accessilibity](http://opensource.creativecommons.org/blog/entries/cc-search-accessibility-week9-10/)
30+
31+
The progress of the project can be tracked on [cc-search](https://github.com/creativecommons/cccatalog-frontend)
32+
33+
CC Search Accessiblity is my GSoC 2020 project under the guidance of [Zack Krida](https://creativecommons.org/author/zackcreativecommons-org/) and [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
34+
Godey](https://creativecommons.org/author/kriticreativecommons-org/), have been very supportive.

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/bookmarks-in-new-version.gif

6.09 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/bookmarks-in-old-version.gif

23.1 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/contents.lr

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
title: CC Search Extension: Wrapping up GSoC 2020
2+
---
3+
categories:
4+
gsoc
5+
gsoc-2020
6+
cc-browser-extension
7+
cc-search
8+
open-source
9+
---
10+
author: makkoncept
11+
---
12+
series: gsoc-2020-browser-extension
13+
---
14+
pub_date: 2020-08-27
15+
---
16+
body:
17+
18+
19+
In this post, I'll give an overview of the improvements and features that were added to the CC Search browser extension. I am delighted to state that the goals that were set for Google Summer of Code 2020 have been successfully completed.
20+
21+
## Widen the integration with CC Catalog API
22+
Both [CC Search](search.creativecommons.org) and CC Search Extension are powered by [CC Catalog REST API](https://api.creativecommons.engineering/v1/). The API allows programmatic access to search for CC-licensed and public domain digital media. Better integration with the API was one of the major targets during this internship because it significantly improves and adds new searching workflows to the extension.
23+
24+
This can be sub-divided into _New Filters_, _Browse By Sources_, _search by tags_, and _related images_.
25+
26+
### New Filters
27+
The `/image` endpoint of the API is used for searching. We can also provide several query parameters that can filter the result. Previously, the extension only supported filtering the content using `license`, `sources`, and `use case`. Now, besides these filters, the extension also supports filtering by `image type`, `file type`, `aspect ratio`, and `image size`.
28+
29+
<figure >
30+
<img src="old-extension-filters.gif" style="width: 70%">
31+
<figcaption>
32+
<em>Filters in the old version</em>
33+
</figcaption>
34+
</figure>
35+
36+
<figure>
37+
<img src="new-extension-filters.gif" style="width: 70%">
38+
<figcaption>
39+
<em>Filters in the new version</em>
40+
</figcaption>
41+
</figure>
42+
43+
_Rationale_: This will allow users to be more precise in their queries when searching.
44+
45+
### Browsing by source
46+
The extension now has a dynamically updated "sources" section. Clicking a source link triggers a request to the `/image` endpoint to get the images associated with it.
47+
48+
<figure >
49+
<img src="source-section-light.gif" style="width: 70%">
50+
<figcaption>
51+
<em>Source section</em>
52+
</figcaption>
53+
</figure>
54+
55+
<figure>
56+
<img src="source-section-dark.gif" style="width: 70%">
57+
<figcaption>
58+
<em>Source section in dark mode</em>
59+
</figcaption>
60+
</figure>
61+
62+
_Rationale_: This opens an avenue for exploration of all the different sources which are available in the catalog. This is advantageous for the users who are not familiar with the type of content a particular source provides. They might run into a source that has a huge catalog of high-quality images that they are looking for.
63+
64+
### Search by tags
65+
Most of the images have some tags associated with them, which are also sent along with the image data by the API. This, and the flexibility of the `/image` endpoint, paved the way for the addition of searching for images using image-tags.
66+
67+
<figure >
68+
<img src="search-by-image-tag.gif" style="width: 70%">
69+
<figcaption>
70+
<em>Search by image tag</em>
71+
</figcaption>
72+
</figure>
73+
74+
_Rational_ - Image tags will allow users to incrementally make their queries better and more specific.
75+
76+
### Related images
77+
In the image detail section of any particular image, you can now see several recommendations. This has been made possible by adding support for the [`/recommendations/images/{identifier}`](https://api.creativecommons.engineering/v1/#tag/recommendations) endpoint of the API.
78+
79+
<figure >
80+
<img src="related-images.gif" style="width: 70%">
81+
<figcaption>
82+
<em>Image recommendations</em>
83+
</figcaption>
84+
</figure>
85+
86+
_Rationale_ - This will help users find a variety of images that fit their requirements and also explore the images that would not usually show up on the initial pages of the search result.
87+
88+
## Improvements to bookmarks section
89+
The bookmark section has great prominence in CC Search Extension because the export/import workflow is tied to it and unlike the search result data, the bookmarks data is preserved across user sessions (closing the extension does not wipe out the bookmarks). It has undergone some crucial improvements like caching, voluntary loading and increase in the number bookmarks that it can hold (the limit now is 300 which earlier was ~50).
90+
91+
The bookmarks section is significantly faster now as caching has eliminated the need to make many simultaneous network requests to the API when bookmarks are loaded. Voluntary loading also helps reduce perceived lag by reducing the number of bookmarks that load at once.
92+
93+
Though the improvement in performance is better recognized when you are using the extension, I tried to demonstrate that by comparing the rendering of the bookmarked images.
94+
95+
<figure >
96+
<img src="bookmarks-in-old-version.gif" style="width: 70%">
97+
<figcaption>
98+
<em>Bookmark section in the old version</em>
99+
</figcaption>
100+
</figure>
101+
102+
<figure >
103+
<img src="bookmarks-in-new-version.gif" style="width: 70%">
104+
<figcaption>
105+
<em>Bookmarks section in the new version</em>
106+
</figcaption>
107+
</figure>
108+
109+
110+
## A better use of sync storage
111+
The bookmarks and the user settings are synced between user systems. There are very tight write limits and bytes quotas associated with this storage([documentation link](https://developer.chrome.com/apps/storage#properties)). Due to this, the way the extension used this storage, and the assumptions it made about its schema was improved multiple times. Since the extension was already in production, and had around 5,000 weekly users, the code for migrating the user's sync storage was pushed along with these updates. Also, the support was added for legacy bookmark files that some users might still be using.
112+
113+
## Integration with Vocabulary
114+
The extension now supports the latest version of [CC vocabulary](https://github.com/creativecommons/vocabulary). The challenging part of this was to rethink, mold, and update each and every workflow of the extension according to the new design.
115+
116+
<figure >
117+
<img src="image-detail-old-version.gif" style="width: 70%">
118+
<figcaption>
119+
<em>Old version — Image detail</em>
120+
</figcaption>
121+
</figure>
122+
123+
<figure >
124+
<img src="image-detail-new-version.gif" style="width: 70%">
125+
<figcaption>
126+
<em>New version — Image detail</em>
127+
</figcaption>
128+
</figure>
129+
130+
<figure >
131+
<img src="deletion-in-old-version.gif" style="width: 70%">
132+
<figcaption>
133+
<em>Old version — Deleting bookmarks</em>
134+
</figcaption>
135+
</figure>
136+
137+
<figure >
138+
<img src="deletion-in-new-version.gif" style="width: 70%">
139+
<figcaption>
140+
<em>New version — Deleting bookmarks</em>
141+
</figcaption>
142+
</figure>
143+
144+
<figure >
145+
<img src="dark-mode-old-version.gif" style="width: 70%">
146+
<figcaption>
147+
<em>Old version — Dark mode</em>
148+
</figcaption>
149+
</figure>
150+
151+
<figure >
152+
<img src="dark-mode-new-version.gif" style="width: 70%">
153+
<figcaption>
154+
<em>New version — Dark mode</em>
155+
</figcaption>
156+
</figure>
157+
158+
## Release on Microsoft Edge
159+
I am also testing the extension on Microsoft Edge. We also have it [listed](https://microsoftedge.microsoft.com/addons/detail/cc-search/djolilnbndifmlfmcdnifdfjfbglipgc) on the Edge store. You can soon expect the latest version of CC Search Extension available for install there.
160+
161+
## Code
162+
163+
The project repository is hosted on [Github](https://github.com/creativecommons/ccsearch-browser-extension). During this period, I have made [more than 320](https://github.com/creativecommons/ccsearch-browser-extension/compare/v1.3.0...master) commits.
164+
165+
The Major pull requests: [#249](https://github.com/creativecommons/ccsearch-browser-extension/pull/249), [#255](https://github.com/creativecommons/ccsearch-browser-extension/pull/255), [#268](https://github.com/creativecommons/ccsearch-browser-extension/pull/268), [#270](https://github.com/creativecommons/ccsearch-browser-extension/pull/270), [#271](https://github.com/creativecommons/ccsearch-browser-extension/pull/271), [#272](https://github.com/creativecommons/ccsearch-browser-extension/pull/272), [#275](https://github.com/creativecommons/ccsearch-browser-extension/pull/275), [#276](https://github.com/creativecommons/ccsearch-browser-extension/pull/276)
166+
167+
Also, during this period, 5 updates of the extension were pushed to the extension stores. You can check out the [releases page](https://github.com/creativecommons/ccsearch-browser-extension/releases).
168+
169+
170+
## Acknowledgements
171+
I would like to thank [Alden](https://creativecommons.org/author/aldencreativecommons-org/) and [Kriti](https://creativecommons.org/author/kriticreativecommons-org/) for their valuable guidance during this journey. Special thanks to [Fransisco](https://github.com/panchovm), for designing the mockups of the extension, and to the wonderful contributors of CC Vocabulary.

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/dark-mode-new-version.gif

6.59 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/dark-mode-old-version.gif

5.77 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/deletion-in-new-version.gif

1.28 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/deletion-in-old-version.gif

3.07 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/image-detail-new-version.gif

3.41 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/image-detail-old-version.gif

1.78 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/new-extension-filters.gif

1.67 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/old-extension-filters.gif

115 KB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/related-images.gif

1.84 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/search-by-image-tag.gif

2.73 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/source-section-dark.gif

4.77 MB
Loading

‎content/blog/entries/cc-search-extension-wrapping-up-gsoc-2020/source-section-light.gif

4.68 MB
Loading

‎content/blog/entries/linked-commons-autocomplete-feature/contents.lr

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ pub_date: 2020-07-31
1717
---
1818

1919
body:
20-
## Introduction
20+
2121
The following blog intends to explain the very recent feature integrated to the Linked Commons. Be it the giant Google Search or any small website having a form field, everyone wishes to predict what’s on the user’s mind. For every keystroke, a nice search bar always renders some possible options the user could be looking for. The core ideology behind having this feature is — *do as much work as possible for the user!*
2222

2323

‎content/blog/entries/linked-commons-gsoc-wrap-up/api-call.png

58.5 KB
Loading

0 commit comments

Comments
 (0)