Skip to content

Commit

Permalink
- clean not needed code;
Browse files Browse the repository at this point in the history 
- improve screen reader feedback by improve aria-hidden management;
  • Loading branch information
@JoaoFerreira-FrontEnd
JoaoFerreira-FrontEnd committed Sep 20, 2023
1 parent 865ec3b commit 750da77
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 25 deletions.
26 changes: 14 additions & 12 deletions dist/OutSystemsUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8365,7 +8365,6 @@ var OSFramework;
const lastchosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue];
if (lastchosen) {
lastchosen.ariaChecked = 'false';
lastchosen.ariaHidden = 'true';
}
this.configs.RatingValue = this._getValue();
this._setValue(true);
Expand All @@ -8379,14 +8378,12 @@ var OSFramework;
_renderItem(index) {
const labelHTML = index !== 0 ? this._clonedPlaceholders : '';
const ratingInputId = this.uniqueId + '-rating-' + index;
let input;
const input = `<input type="radio" class="${Rating_1.Enum.CssClass.RatingInput} ${Rating_1.Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index} aria-hidden="true">`;
let label;
if (!this.configs.IsEdit) {
input = `<input type="radio" class="${Rating_1.Enum.CssClass.RatingInput} ${Rating_1.Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index} aria-hidden="true">`;
label = `<label class='${Rating_1.Enum.CssClass.RatingItem}' for=${ratingInputId} aria-hidden="true"><span class="${Rating_1.Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
}
else {
input = `<input type="radio" class="${Rating_1.Enum.CssClass.RatingInput} ${Rating_1.Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index}>`;
label = `<label class='${Rating_1.Enum.CssClass.RatingItem}' for=${ratingInputId}><span class="${Rating_1.Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
}
this._ratingFieldsetElem.innerHTML += input + label;
Expand Down Expand Up @@ -8422,9 +8419,19 @@ var OSFramework;
}
_setIsEdit() {
this._setIsDisabled(!this.configs.IsEdit);
this.configs.IsEdit
? OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit)
: OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit);
const LabelList = this.selfElement.querySelectorAll(OSUI.Constants.Dot + Rating_1.Enum.CssClass.RatingItem);
if (this.configs.IsEdit) {
OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit);
LabelList.forEach((label) => {
label.removeAttribute('aria-hidden');
});
}
else {
OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit);
LabelList.forEach((label) => {
label.ariaHidden = 'true';
});
}
this._manageRatingEvent();
}
_setScale() {
Expand All @@ -8450,13 +8457,11 @@ var OSFramework;
if (this.configs.RatingScale === 1) {
ratingItems[1].checked = true;
ratingItems[1].ariaChecked = 'true';
ratingItems[1].ariaHidden = 'false';
return;
}
let newValue = this._isHalfValue || this._decimalValue > 0.7
? Math.floor(this.configs.RatingValue) + 1
: Math.floor(this.configs.RatingValue);
const oldValue = Math.floor(this.configs.RatingValue);
if (newValue < Rating_1.Enum.Properties.MinRatingScale) {
newValue = Rating_1.Enum.Properties.MinRatingScale;
console.warn(`The value of RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} can't be smaller than '${Rating_1.Enum.Properties.MinRatingScale}'.`);
Expand All @@ -8465,11 +8470,8 @@ var OSFramework;
newValue = this.configs.RatingScale;
console.warn(`The value of the RatingValue property on the '${this.widgetId}' ${OSUI.GlobalEnum.PatternName.Rating} exceeds the scale boundaries. To ensure its correct behaviour, set a value smaller or equal to '${this.configs.RatingScale}'.`);
}
ratingItems[oldValue].ariaChecked = 'false';
ratingItems[oldValue].ariaHidden = 'true';
ratingItems[newValue].checked = true;
ratingItems[newValue].ariaChecked = 'true';
ratingItems[newValue].ariaHidden = 'false';
if (this._isHalfValue) {
OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf);
}
Expand Down
29 changes: 16 additions & 13 deletions src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,6 @@ namespace OSFramework.OSUI.Patterns.Rating {
];
if (lastchosen) {
lastchosen.ariaChecked = 'false';
lastchosen.ariaHidden = 'true';
}

// If it is, then get the input:checked value
Expand Down Expand Up @@ -183,13 +182,12 @@ namespace OSFramework.OSUI.Patterns.Rating {
const ratingInputId: string = this.uniqueId + '-rating-' + index;

// Create input and label html
let input;
const input = `<input type="radio" class="${Enum.CssClass.RatingInput} ${Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index} aria-hidden="true">`;

let label;
if (!this.configs.IsEdit) {
input = `<input type="radio" class="${Enum.CssClass.RatingInput} ${Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index} aria-hidden="true">`;
label = `<label class='${Enum.CssClass.RatingItem}' for=${ratingInputId} aria-hidden="true"><span class="${Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
} else {
input = `<input type="radio" class="${Enum.CssClass.RatingInput} ${Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index}>`;
label = `<label class='${Enum.CssClass.RatingItem}' for=${ratingInputId}><span class="${Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
}

Expand Down Expand Up @@ -274,11 +272,22 @@ namespace OSFramework.OSUI.Patterns.Rating {
private _setIsEdit(): void {
// Set the fieldset and input disabled attribute status
this._setIsDisabled(!this.configs.IsEdit);
const LabelList = this.selfElement.querySelectorAll(Constants.Dot + Enum.CssClass.RatingItem);

// Toggle the is-edit class
this.configs.IsEdit
? Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit)
: Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit);
if (this.configs.IsEdit) {
Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.IsEdit);

LabelList.forEach((label) => {
label.removeAttribute('aria-hidden');
});
} else {
Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.IsEdit);

LabelList.forEach((label) => {
label.ariaHidden = 'true';
});
}

// Review if there's a need to add/remove the click event, accordingly to the IsEdit value
this._manageRatingEvent();
Expand Down Expand Up @@ -343,7 +352,6 @@ namespace OSFramework.OSUI.Patterns.Rating {
if (this.configs.RatingScale === 1) {
ratingItems[1].checked = true;
ratingItems[1].ariaChecked = 'true';
ratingItems[1].ariaHidden = 'false';
return;
}

Expand All @@ -354,7 +362,6 @@ namespace OSFramework.OSUI.Patterns.Rating {
this._isHalfValue || this._decimalValue > 0.7
? Math.floor(this.configs.RatingValue) + 1
: Math.floor(this.configs.RatingValue);
const oldValue = Math.floor(this.configs.RatingValue);

if (newValue < Enum.Properties.MinRatingScale) {
// If negative value, set it as 0 by default
Expand All @@ -372,13 +379,9 @@ namespace OSFramework.OSUI.Patterns.Rating {
);
}

ratingItems[oldValue].ariaChecked = 'false';
ratingItems[oldValue].ariaHidden = 'true';

// Set the itemas as :checked
ratingItems[newValue].checked = true;
ratingItems[newValue].ariaChecked = 'true';
ratingItems[newValue].ariaHidden = 'false';

// If is-half add the appropriate class, otherwise just declare the this.isHalfValue, to complete the if statement
if (this._isHalfValue) {
Expand Down

0 comments on commit 750da77

Please sign in to comment.