diff --git a/apps/settings/js/panels/keyboard/layout_template.js b/apps/settings/js/panels/keyboard/layout_template.js
index 7c0fd8db44a5..485d9d24e348 100644
--- a/apps/settings/js/panels/keyboard/layout_template.js
+++ b/apps/settings/js/panels/keyboard/layout_template.js
@@ -6,21 +6,22 @@ define(function(require) {
 
   var layoutTemplate = function layoutTemplate(layout, recycled) {
     var container = null;
-    var span;
+    var nameBdi;
     var small;
     if (recycled) {
       container = recycled;
-      span = container.querySelector('span');
+      nameBdi = container.querySelector('bdi');
       small = container.querySelector('small');
     } else {
       container = document.createElement('li');
-      span = document.createElement('span');
+      nameBdi = document.createElement('bdi');
       small = document.createElement('small');
-      container.appendChild(span);
+      container.appendChild(document.createElement('span'));
+      container.lastChild.appendChild(nameBdi);
       container.appendChild(small);
     }
     var refreshName = function() {
-      span.textContent = layout.name;
+      nameBdi.textContent = layout.name;
       small.textContent = layout.appName;
     };
     refreshName();
diff --git a/apps/settings/js/panels/keyboard_add_layouts/layout_template.js b/apps/settings/js/panels/keyboard_add_layouts/layout_template.js
index 653da197e151..504451fdb9d0 100644
--- a/apps/settings/js/panels/keyboard_add_layouts/layout_template.js
+++ b/apps/settings/js/panels/keyboard_add_layouts/layout_template.js
@@ -8,22 +8,23 @@ define(function(require) {
 
   return function kal_layoutTemplate(layout, recycled, helper) {
     var container = null;
-    var span, checkbox;
+    var nameBdi, checkbox;
     if (recycled) {
       container = recycled;
       checkbox = container.querySelector('input');
-      span = container.querySelector('span');
+      nameBdi = container.querySelector('bdi');
     } else {
       container = document.createElement('li');
       checkbox = document.createElement('input');
       var label = document.createElement('label');
-      span = document.createElement('span');
+      nameBdi = document.createElement('bdi');
 
       label.className = 'pack-checkbox';
       checkbox.type = 'checkbox';
 
       label.appendChild(checkbox);
-      label.appendChild(span);
+      label.appendChild(document.createElement('span'));
+      label.lastChild.appendChild(nameBdi);
 
       container.appendChild(label);
     }
@@ -34,7 +35,7 @@ define(function(require) {
 
     helper.observeAndCall(layout, {
       name: function refreshName() {
-        span.textContent = layout.name;
+        nameBdi.textContent = layout.name;
       },
       enabled: function() {
         checkbox.checked = layout.enabled;
diff --git a/tests/python/gaia-ui-tests/gaiatest/apps/settings/regions/keyboard.py b/tests/python/gaia-ui-tests/gaiatest/apps/settings/regions/keyboard.py
index d7134131a688..a1416dc62aa0 100644
--- a/tests/python/gaia-ui-tests/gaiatest/apps/settings/regions/keyboard.py
+++ b/tests/python/gaia-ui-tests/gaiatest/apps/settings/regions/keyboard.py
@@ -38,7 +38,7 @@ class KeyboardAddMoreKeyboards(Base):
     _section_locator = (By.ID, 'keyboard-selection-addMore')
     _select_language_locator = (
         By.XPATH,
-        "//div[contains(@class,'keyboardAppContainer')]//li[label[span[text()='%s']]]"
+        "//div[contains(@class,'keyboardAppContainer')]//li[label[span[bdi[text()='%s']]]]"
     )
     _header_locator = (By.CSS_SELECTOR, '.current gaia-header')