Skip to content
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

Jump to bottom

ROU-4527 - [OSUI] - Accessibility improvements identified on team audit for the Rating #826

Merged
merged 10 commits into from
Sep 22, 2023
Merged

ROU-4527 - [OSUI] - Accessibility improvements identified on team audit for the Rating #826

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
865ec3b
Rating:
JoaoFerreira-FrontEnd Sep 19, 2023
750da77
- clean not needed code;
JoaoFerreira-FrontEnd Sep 20, 2023
31cee39
Merge branch 'dev' into ROU-4527
JoaoFerreira-FrontEnd Sep 20, 2023
53d7e8d
- reorganize css rules related with states of the rating items;
JoaoFerreira-FrontEnd Sep 20, 2023
af6a770
Merge branch 'ROU-4527' of https://github.com/OutSystems/outsystems-u…
JoaoFerreira-FrontEnd Sep 20, 2023
84c5797
Merge branch 'dev' into ROU-4527
JoaoFerreira-FrontEnd Sep 20, 2023
8ece11c
- fix small issues related with specific interactions
JoaoFerreira-FrontEnd Sep 20, 2023
9a3f21a
Merge branch 'ROU-4527' of https://github.com/OutSystems/outsystems-u…
JoaoFerreira-FrontEnd Sep 20, 2023
50f769b
- use constants or enum where was static text in the past.
JoaoFerreira-FrontEnd Sep 20, 2023
9e593a9
Merge branch 'dev' into ROU-4527
JoaoFerreira-FrontEnd Sep 22, 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
68 changes: 48 additions & 20 deletions dist/OutSystemsUI.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12221,6 +12221,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
}
/*! 6.5.5. Rating */
.rating{
position:relative;
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
Expand All @@ -12242,6 +12243,9 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
.rating.rating-medium{
--rating-size:24px;
}
.rating.is-edit{
pointer-events:initial;
}
.rating.is-edit .rating-item{
cursor:pointer;
pointer-events:auto;
Expand Down Expand Up @@ -12282,41 +12286,55 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
opacity:0;
z-index:var(--layer-global-screen);
}
.rating .rating-item[class*=rating-]:last-of-type{
.rating-item:last-of-type{
padding-right:0;
}
.rating input:checked + label .rating-item-empty,
.rating input:checked ~ label .rating-item-filled{
.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled{
opacity:0;
}
.rating.is-half .rating-item-half{
z-index:var(--layer-local-tier-1);
.rating.is-half input:checked ~ .rating-item .rating-item-half{
opacity:0;
}
.rating.is-half input:checked + label .rating-item-half{
.rating:hover input + .rating-item .rating-item-filled{
opacity:1;
}
.rating.is-half input:checked + label .rating-item-filled{
opacity:0;
.rating input{
}
.rating:hover input + label .rating-item-filled, .rating.is-half:hover input:checked + label .rating-item-filled{
.rating input:first-of-type + .rating-item{
background:transparent;
display:none;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
-webkit-box-shadow:0 0 0 3px var(--color-focus-outer);
box-shadow:0 0 0 3px var(--color-focus-outer);
}
.rating input:first-of-type:focus:checked + .rating-item{
display:block;
}
.rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-empty, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled{
opacity:1;
}
.rating input:focus + label .rating-item-empty,
.rating input:hover ~ label .rating-item-filled{
.rating input:hover ~ .rating-item .rating-item-filled, .rating input:hover ~ .rating-item .rating-item-half{
opacity:0;
}
.rating input:checked ~ label .rating-item-empty,
.rating input:checked + label .rating-item-filled,
.rating input:checked + label .rating-item-half,
.rating input:hover ~ label .rating-item-empty,
.rating input:focus ~ label .rating-item-empty,
.rating input:focus + label .rating-item-filled{
.rating input:hover + .rating-item .rating-item-filled{
opacity:1;
}
.rating input:hover ~ label .rating-item-filled, .rating.is-half input:hover ~ label.rating-item .rating-item-filled, .rating.is-half input:hover ~ label.rating-item .rating-item-half{
.rating.is-half .rating-item-half{
z-index:var(--layer-local-tier-1);
}
.rating.is-half input:checked + .rating-item .rating-item-half{
opacity:1;
}
.rating.is-half input:hover ~ .rating-item .rating-item-filled,
.rating.is-half input:hover ~ .rating-item .rating-item-half{
opacity:0;
}
.rating input:hover + label .rating-item-filled, .rating.is-half input:hover + label.rating-item .rating-item-filled{
.rating.is-half:hover input:checked + .rating-item .rating-item-filled,
.rating.is-half input:hover + .rating-item .rating-item-filled{
opacity:1;
}
.rating .icon-states{
Expand All @@ -12339,7 +12357,17 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
-ms-transform:scaleX(-1);
transform:scaleX(-1);
}
.has-accessible-features input:focus + .rating-item > div{
.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-filled,
.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-filled *, .has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-half,
.has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-half *,
.has-accessible-features .rating input:checked + .rating-item .rating-item-empty,
.has-accessible-features .rating input:checked + .rating-item .rating-item-empty *{
-webkit-box-shadow:none;
box-shadow:none;
}
.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-half,
.has-accessible-features .rating.is-half input:focus + .rating-item .rating-item-half *, .has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-filled,
.has-accessible-features .rating:not(.is-half) input:focus + .rating-item .rating-item-filled *{
-webkit-box-shadow:0 0 0 3px var(--color-focus-outer);
box-shadow:0 0 0 3px var(--color-focus-outer);
}
Expand Down
45 changes: 33 additions & 12 deletions dist/OutSystemsUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4445,12 +4445,6 @@ var OSFramework;
var BottomSheet;
(function (BottomSheet_1) {
class BottomSheet extends Patterns.AbstractPattern {
get gestureEventInstance() {
return this._gestureEventInstance;
}
get hasGestureEvents() {
return this._hasGestureEvents;
}
constructor(uniqueId, configs) {
super(uniqueId, new BottomSheet_1.BottomSheetConfig(configs));
this._isOpen = false;
Expand All @@ -4463,6 +4457,12 @@ var OSFramework;
},
};
}
get gestureEventInstance() {
return this._gestureEventInstance;
}
get hasGestureEvents() {
return this._hasGestureEvents;
}
_handleFocusBehavior() {
const opts = {
focusTargetElement: this._parentSelf,
Expand Down Expand Up @@ -8408,6 +8408,10 @@ var OSFramework;
this._isHalfValue = false;
const isInput = OSUI.Helper.Dom.Styles.ContainsClass(currentTarget, Rating_1.Enum.CssClass.RatingInput);
if (isInput) {
const lastchosen = this.selfElement.querySelectorAll(OSUI.GlobalEnum.HTMLElement.Input)[this.configs.RatingValue];
if (lastchosen) {
lastchosen.ariaChecked = 'false';
}
this.configs.RatingValue = this._getValue();
this._setValue(true);
}
Expand All @@ -8418,11 +8422,16 @@ var OSFramework;
}
}
_renderItem(index) {
const hideLabelClass = index === 0 ? Rating_1.Enum.CssClass.WCAGHideText : '';
const labelHTML = index !== 0 ? this._clonedPlaceholders : '';
const ratingInputId = this.uniqueId + '-rating-' + index;
const input = `<input type="radio" class="${Rating_1.Enum.CssClass.RatingInput} ${Rating_1.Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index}/>`;
const label = `<label class='${Rating_1.Enum.CssClass.RatingItem} ${hideLabelClass}' for=${ratingInputId}><span class="${Rating_1.Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
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) {
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 {
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;
}
_setFieldsetDisabledStatus(isDisabled) {
Expand Down Expand Up @@ -8456,9 +8465,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 @@ -8483,6 +8502,7 @@ var OSFramework;
}
if (this.configs.RatingScale === 1) {
ratingItems[1].checked = true;
ratingItems[1].ariaChecked = 'true';
return;
}
let newValue = this._isHalfValue || this._decimalValue > 0.7
Expand All @@ -8497,6 +8517,7 @@ var OSFramework;
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[newValue].checked = true;
ratingItems[newValue].ariaChecked = 'true';
if (this._isHalfValue) {
OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf);
}
Expand Down
40 changes: 32 additions & 8 deletions src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,13 @@ namespace OSFramework.OSUI.Patterns.Rating {
// Check if the e.target is a label with the Enum.RatingCssClass.RatingInput class
const isInput = Helper.Dom.Styles.ContainsClass(currentTarget, Enum.CssClass.RatingInput);
if (isInput) {
const lastchosen = this.selfElement.querySelectorAll(GlobalEnum.HTMLElement.Input)[
JoaoFerreira-FrontEnd marked this conversation as resolved.
Show resolved Hide resolved
this.configs.RatingValue
];
if (lastchosen) {
lastchosen.ariaChecked = 'false';
}

// If it is, then get the input:checked value
this.configs.RatingValue = this._getValue();
// And use that value to set a new Rating Value
Expand Down Expand Up @@ -169,16 +176,20 @@ namespace OSFramework.OSUI.Patterns.Rating {
* @memberof Rating
*/
private _renderItem(index: number): void {
// If first input, whihc is hidden, than also hide the label
const hideLabelClass: string = index === 0 ? Enum.CssClass.WCAGHideText : '';
// if not first input, which is hidden, add the html stored form the placeholders
const labelHTML = index !== 0 ? this._clonedPlaceholders : '';
// Create a unique rating input id, based on the index
const ratingInputId: string = this.uniqueId + '-rating-' + index;

// Craete input and label html
const input = `<input type="radio" class="${Enum.CssClass.RatingInput} ${Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index}/>`;
const label = `<label class='${Enum.CssClass.RatingItem} ${hideLabelClass}' for=${ratingInputId}><span class="${Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
// Create input and label html
const input = `<input type="radio" class="${Enum.CssClass.RatingInput} ${Enum.CssClass.WCAGHideText}" id=${ratingInputId} name=${this._ratingInputName} value=${index} aria-hidden="true">`;
bmarcelino-fe marked this conversation as resolved.
Show resolved Hide resolved

let label;
if (!this.configs.IsEdit) {
label = `<label class='${Enum.CssClass.RatingItem}' for=${ratingInputId} aria-hidden="true"><span class="${Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
bmarcelino-fe marked this conversation as resolved.
Show resolved Hide resolved
} else {
label = `<label class='${Enum.CssClass.RatingItem}' for=${ratingInputId}><span class="${Enum.CssClass.WCAGHideText}">Rating ${index}</span>${labelHTML}</label>`;
}

// Append new input + label to fieldset's html
this._ratingFieldsetElem.innerHTML += input + label;
Expand Down Expand Up @@ -261,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 @@ -329,6 +351,7 @@ namespace OSFramework.OSUI.Patterns.Rating {
// If there's only one rating item, then there's no need for further checks, this one will be checked
if (this.configs.RatingScale === 1) {
ratingItems[1].checked = true;
ratingItems[1].ariaChecked = 'true';
bmarcelino-fe marked this conversation as resolved.
Show resolved Hide resolved
return;
}

Expand Down Expand Up @@ -358,6 +381,7 @@ namespace OSFramework.OSUI.Patterns.Rating {

// Set the itemas as :checked
ratingItems[newValue].checked = true;
ratingItems[newValue].ariaChecked = 'true';
JoaoFerreira-FrontEnd marked this conversation as resolved.
Show resolved Hide resolved

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