Skip to content

1415 and 1419 screen reader enhancements #1421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackocnr merged 3 commits into from
May 21, 2023
Merged

1415 and 1419 screen reader enhancements #1421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
533a4d4
1415: flag container title attribute updates
May 5, 2023
fa5e32c
1419 - fixes screen reader not reading select box option
May 5, 2023
1d4580c
built the JS
May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions build/js/intlTelInput-jquery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,6 @@
role: "combobox",
"aria-haspopup": "listbox",
"aria-controls": "iti-".concat(this.id, "__country-listbox"),
"aria-owns": "iti-".concat(this.id, "__country-listbox"),
"aria-expanded": "false",
"aria-label": "Telephone country code"
}), this.flagsContainer);
Expand Down Expand Up @@ -1079,22 +1078,19 @@
}, {
key: "_setFlag",
value: function _setFlag(countryCode) {
var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, separateDialCode = _this$options3.separateDialCode, showFlags = _this$options3.showFlags;
var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
// do this first as it will throw an error and stop if countryCode is invalid
this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false, false) : {};
// update the defaultCountry - we only need the iso2 from now on, so just store that
if (this.selectedCountryData.iso2) {
this.defaultCountry = this.selectedCountryData.iso2;
}
if (this.options.showFlags) {
if (showFlags) {
this.selectedFlagInner.setAttribute("class", "iti__flag iti__".concat(countryCode));
}
// update the selected country's title attribute
if (this.selectedFlag) {
var title = countryCode ? "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode) : "Unknown";
this.selectedFlag.setAttribute("title", title);
}
if (this.options.separateDialCode) {
this._setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode);
if (separateDialCode) {
var dialCode = this.selectedCountryData.dialCode ? "+".concat(this.selectedCountryData.dialCode) : "";
this.selectedDialCode.innerHTML = dialCode;
// offsetWidth is zero if input is in a hidden container during initialisation
Expand All @@ -1105,7 +1101,7 @@
// and the input's placeholder
this._updatePlaceholder();
// update the active list item
if (this.options.allowDropdown) {
if (allowDropdown) {
var prevItem = this.activeItem;
if (prevItem) {
prevItem.classList.remove("iti__active");
Expand All @@ -1122,6 +1118,24 @@
// return if the flag has changed or not
return prevCountry.iso2 !== countryCode;
}
}, {
key: "_setSelectedCountryFlagTitleAttribute",
value: function _setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode) {
if (!this.selectedFlag) {
return;
}
var title;
if (countryCode && !separateDialCode) {
title = "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode);
} else if (countryCode) {
// For screen reader output, we don't want to include the dial code in the reader output twice
// so just use the selected country name here:
title = this.selectedCountryData.name;
} else {
title = "Unknown";
}
this.selectedFlag.setAttribute("title", title);
}
}, {
key: "_getHiddenSelectedFlagWidth",
value: function _getHiddenSelectedFlagWidth() {
Expand Down
4 changes: 2 additions & 2 deletions build/js/intlTelInput-jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 23 additions & 9 deletions build/js/intlTelInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,6 @@
role: "combobox",
"aria-haspopup": "listbox",
"aria-controls": "iti-".concat(this.id, "__country-listbox"),
"aria-owns": "iti-".concat(this.id, "__country-listbox"),
"aria-expanded": "false",
"aria-label": "Telephone country code"
}), this.flagsContainer);
Expand Down Expand Up @@ -1074,22 +1073,19 @@
}, {
key: "_setFlag",
value: function _setFlag(countryCode) {
var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, separateDialCode = _this$options3.separateDialCode, showFlags = _this$options3.showFlags;
var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
// do this first as it will throw an error and stop if countryCode is invalid
this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false, false) : {};
// update the defaultCountry - we only need the iso2 from now on, so just store that
if (this.selectedCountryData.iso2) {
this.defaultCountry = this.selectedCountryData.iso2;
}
if (this.options.showFlags) {
if (showFlags) {
this.selectedFlagInner.setAttribute("class", "iti__flag iti__".concat(countryCode));
}
// update the selected country's title attribute
if (this.selectedFlag) {
var title = countryCode ? "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode) : "Unknown";
this.selectedFlag.setAttribute("title", title);
}
if (this.options.separateDialCode) {
this._setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode);
if (separateDialCode) {
var dialCode = this.selectedCountryData.dialCode ? "+".concat(this.selectedCountryData.dialCode) : "";
this.selectedDialCode.innerHTML = dialCode;
// offsetWidth is zero if input is in a hidden container during initialisation
Expand All @@ -1100,7 +1096,7 @@
// and the input's placeholder
this._updatePlaceholder();
// update the active list item
if (this.options.allowDropdown) {
if (allowDropdown) {
var prevItem = this.activeItem;
if (prevItem) {
prevItem.classList.remove("iti__active");
Expand All @@ -1117,6 +1113,24 @@
// return if the flag has changed or not
return prevCountry.iso2 !== countryCode;
}
}, {
key: "_setSelectedCountryFlagTitleAttribute",
value: function _setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode) {
if (!this.selectedFlag) {
return;
}
var title;
if (countryCode && !separateDialCode) {
title = "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode);
} else if (countryCode) {
// For screen reader output, we don't want to include the dial code in the reader output twice
// so just use the selected country name here:
title = this.selectedCountryData.name;
} else {
title = "Unknown";
}
this.selectedFlag.setAttribute("title", title);
}
}, {
key: "_getHiddenSelectedFlagWidth",
value: function _getHiddenSelectedFlagWidth() {
Expand Down
4 changes: 2 additions & 2 deletions build/js/intlTelInput.min.js
View file
Open in desktop

Large diffs are not rendered by default.

39 changes: 27 additions & 12 deletions src/js/intlTelInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,6 @@ class Iti {
role: "combobox",
"aria-haspopup": "listbox",
"aria-controls": `iti-${this.id}__country-listbox`,
"aria-owns": `iti-${this.id}__country-listbox`,
"aria-expanded": "false",
"aria-label": "Telephone country code"
})
Expand Down Expand Up @@ -1166,9 +1165,11 @@ class Iti {
throw new Error(`No country data for '${countryCode}'`);
}

// select the given flag, update the placeholder and the active list item
// select the given flag, update the placeholder, title, and the active list item
// Note: called from _setInitialState, _updateFlagFromNumber, _selectListItem, setCountry
_setFlag(countryCode) {
const { allowDropdown, separateDialCode, showFlags } = this.options;

const prevCountry = this.selectedCountryData.iso2
? this.selectedCountryData
: {};
Expand All @@ -1182,21 +1183,16 @@ class Iti {
this.defaultCountry = this.selectedCountryData.iso2;
}

if (this.options.showFlags) {
if (showFlags) {
this.selectedFlagInner.setAttribute(
"class",
`iti__flag iti__${countryCode}`
);
}
// update the selected country's title attribute
if (this.selectedFlag) {
const title = countryCode
? `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`
: "Unknown";
this.selectedFlag.setAttribute("title", title);
}

if (this.options.separateDialCode) {
this._setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode);

if (separateDialCode) {
const dialCode = this.selectedCountryData.dialCode
? `+${this.selectedCountryData.dialCode}`
: "";
Expand All @@ -1213,7 +1209,7 @@ class Iti {
this._updatePlaceholder();

// update the active list item
if (this.options.allowDropdown) {
if (allowDropdown) {
const prevItem = this.activeItem;
if (prevItem) {
prevItem.classList.remove("iti__active");
Expand All @@ -1238,6 +1234,25 @@ class Iti {
return prevCountry.iso2 !== countryCode;
}

_setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode) {
if (!this.selectedFlag) {
return;
}

let title;
if (countryCode && !separateDialCode) {
title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
} else if (countryCode) {
// For screen reader output, we don't want to include the dial code in the reader output twice
// so just use the selected country name here:
title = this.selectedCountryData.name;
} else {
title = "Unknown";
}

this.selectedFlag.setAttribute("title", title);
}

// when the input is in a hidden container during initialisation, we must inject some markup
// into the end of the DOM to calculate the correct offsetWidth
// NOTE: this is only used when separateDialCode is enabled, so flagsContainer and selectedFlag
Expand Down
44 changes: 44 additions & 0 deletions src/spec/tests/methods/setCountry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,48 @@ describe("setCountry: init plugin and calling public method setCountry()", funct
expect(getInputVal()).toEqual("");
});

describe("setting title attribute on flag container", function() {
describe("when separateDialCode is false", function() {
beforeEach(function() {
iti = window.intlTelInput(input[0], {
showFlags: true,
separateDialCode: false,
});
iti.setCountry(countryCode);
});

it("has the country name and dial code in the flag's title", function() {
expect(getSelectedFlagContainer().attr("title")).toEqual("United Kingdom: +44");
});
});

describe("when separateDialCode is true", function() {
beforeEach(function() {
iti = window.intlTelInput(input[0], {
showFlags: true,
separateDialCode: true,
});
iti.setCountry(countryCode);
});

it("has the country name but not the dial code in the flag's title", function() {
expect(getSelectedFlagContainer().attr("title")).toEqual("United Kingdom");
});
});


// setCountry errors out when country code is undefined, so we can likely remove this scenario and make country code a required param
describe("when countryCode is falsey", function() {
// beforeEach(function() {
// iti = window.intlTelInput(input[0], {
// showFlags: true,
// });
// iti.setCountry();
// });

it("sets the flag's title as Unknown", function() {
// expect(getSelectedFlagContainer().attr("title")).toEqual("Unknown");
});
})
});
});