These are the second two weeks of my internship with CC. I am working on improving the accessibility of cc-search and internationalizing it as well. The internationalization work from the previous post is continued here and we also solve an interesting issue of translating strings from the Vuex store.

During this period I removed all the hardcoded strings from the static pages which include:

1. About Page
2. Collections Page
3. Search Guide Page
4. Feedback Page

All of the above pages were then internationalized following the same procedure as detailed in the previous post. While internationalizing the homepage we ran into an interesting problem:

The licenses strings were being accessed from the store and those too had to be internationalized.

licenseTypes: [
    { code: 'commercial', name: 'Use commercially', checked: false },
    { code: 'modification', name: 'Modify or adapt', checked: false },
]

The code was used to store the licenses in the store in the ordered format. The challenge was to extract the name strings from each license while keeping the changes and dependencies to a minimum. The code which we were using in the templates to load these strings was:

<label
        class="checkbox margin-right-big"
        :for="licenseType.code"
        :key="index"
      >
        <input
          :id="licenseType.code"
          type="checkbox"
          :checked="licenseType.checked"
          name="lt"
          :value="licenseType.code"
          @input="onFilterChanged(licenseType.code)"
        />
</ label>

So after some discussion and a great insight by @brenoferreira we came up with the idea to change to name field from the store to point to our extracted internationalization strings. This proved to be very helpful as we managed to keep changes to a minimum without using any extra dependencies. The code after implementing the changes is:

licenseTypes: [
    { code: 'commercial', name: 'filters.license-types.commercial', checked: false, },
    { code: 'modification', name: 'filters.license-types.modification', checked: false,},
]

<label
        class="checkbox margin-right-big"
        :for="licenseType.code"
        :key="index"
      >
        <input
          :id="licenseType.code"
          type="checkbox"
          :checked="licenseType.checked"
          name="lt"
          :value="licenseType.code"
          @input="onFilterChanged(licenseType.code)"
        />
        {{ $t(licenseType.name) }}
</label>

The rest of the internationalization stuff was string extractions and template modifications to accomodate the the translated strings. And we are done with these two weeks, we be back with another post after two weeks.

You can track the work done for these weeks through these PRs:

1. Internationalize About Page and Search Guide Page
2. Internationalize feedback page, collections page and not found page

The progress of the project can be tracked on cc-search

CC Search Accessiblity is my GSoC 2020 project under the guidance of Zack Krida and Ari Madian, who is the primary mentor for this project, Anna Tumadóttir for helping all along and engineering director Kriti Godey, have been very supportive.