0

[Bedtime Hours] Fix a11y for the device disabled banner

Currently ChromeVox doesn't properly read the text from the banner. Fix
it by specifying aria-label and aria-live.

Bug: b:345186543
Change-Id: I58ce5e08b1ec04c5edd9fb684ee0c91276705c72
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5967093
Reviewed-by: Osama Fathy <osamafathy@google.com>
Commit-Queue: Ivan Šandrk <isandrk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1374658}
This commit is contained in:
Ivan Šandrk
2024-10-28 16:17:15 +00:00
committed by Chromium LUCI CQ
parent 341386faa0
commit 2e539e7086
6 changed files with 46 additions and 24 deletions

@ -13,19 +13,22 @@ found in the LICENSE file.
</style>
<oobe-adaptive-dialog title-key="deviceDisabledHeading" id="dialog"
role="dialog"
aria-label$="[[disabledHeading(locale, deviceRestrictionScheduleEnabled)]]">
role="dialog" aria-live="polite" aria-labelledby="dialog">
<iron-icon slot="icon" icon="oobe-32:warning"></iron-icon>
<h1 id="title" slot="title">
[[disabledHeading(locale, deviceRestrictionScheduleEnabled)]]
</h1>
<div id="subtitle" inner-h-t-m-l="[[disabledText(
locale, serial, enrollmentDomain, deviceRestrictionScheduleEnabled,
deviceName, restrictionScheduleEndDay, restrictionScheduleEndTime)]]"
slot="subtitle">
<div id="subtitle" slot="subtitle">
<p inner-h-t-m-l="[[disabledText(locale, serial, enrollmentDomain,
deviceRestrictionScheduleEnabled, deviceName)]]"></p>
<p hidden="[[!deviceRestrictionScheduleEnabled]]"
inner-h-t-m-l="[[disabledMessage(locale, restrictionScheduleEndDay,
restrictionScheduleEndTime)]]"></p>
</div>
<div slot="content" class="flex layout vertical center center-justified">
<div id="message">[[message]]</div>
<div id="message" hidden="[[deviceRestrictionScheduleEnabled]]">
[[message]]
</div>
<iron-icon icon="oobe-illos:device-disable-illo"
class="illustration-jelly">
</iron-icon>

@ -199,23 +199,18 @@ export class DeviceDisabled extends DeviceDisabledElementBase {
* deviceRestrictionScheduleEnabled flag indicating if the device was disabled
* because the device is in restriction schedule.
* deviceName The name of the ChromeOS device.
* restrictionScheduleEndDay The day at which the restriction schedule ends.
* restrictionScheduleEndTime The time at which the restriction schedule ends.
* return The internationalized explanation.
*/
private disabledText(
locale: string, serial: string, domain: string,
deviceRestrictionScheduleEnabled: boolean, deviceName: string,
restrictionScheduleEndDay: string,
restrictionScheduleEndTime: string): TrustedHTML {
deviceRestrictionScheduleEnabled: boolean,
deviceName: string): TrustedHTML {
if (deviceRestrictionScheduleEnabled) {
return this.i18nAdvancedDynamic(
locale, 'deviceDisabledExplanationRestrictionSchedule', {
substitutions: [
domain,
deviceName,
restrictionScheduleEndDay,
restrictionScheduleEndTime,
],
});
}
@ -228,6 +223,25 @@ export class DeviceDisabled extends DeviceDisabledElementBase {
locale, 'deviceDisabledExplanationWithoutDomain',
{substitutions: [serial]});
}
/**
* Updates the detailed message shown to the user.
* locale The i18n locale.
* restrictionScheduleEndDay The day at which the restriction schedule ends.
* restrictionScheduleEndTime The time at which the restriction schedule ends.
* return The internationalized explanation.
*/
private disabledMessage(
locale: string, restrictionScheduleEndDay: string,
restrictionScheduleEndTime: string): TrustedHTML {
return this.i18nAdvancedDynamic(
locale, 'deviceDisabledExplanationRestrictionScheduleTime', {
substitutions: [
restrictionScheduleEndDay,
restrictionScheduleEndTime,
],
});
}
}
declare global {

@ -63,6 +63,8 @@ void DeviceDisabledScreenHandler::DeclareLocalizedValues(
IDS_DEVICE_DISABLED_HEADING_RESTRICTION_SCHEDULE);
builder->Add("deviceDisabledExplanationRestrictionSchedule",
IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE);
builder->Add("deviceDisabledExplanationRestrictionScheduleTime",
IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME);
}
} // namespace ash

@ -6834,28 +6834,30 @@
Device can't be used
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE" desc="Explanation shown to the user when the device has been disabled because it is inside restriction schedule.">
<ph name="BEGIN_PARAGRAPH1">&lt;p&gt;</ph>The <ph name="MANAGER">$1<ex>google.com</ex></ph> administrator has set when this <ph name="DEVICE_TYPE">$2<ex>Chromebook</ex></ph> can be used.<ph name="END_PARAGRAPH1">&lt;/p&gt;</ph>
<ph name="BEGIN_PARAGRAPH2">&lt;p&gt;</ph>You'll be able to use this device again <ph name="DAY">$3<ex>tomorrow</ex></ph> at <ph name="TIME">$4<ex>8:00 AM</ex></ph>.<ph name="END_PARAGRAPH2">&lt;/p&gt;</ph>
The <ph name="MANAGER">$1<ex>google.com</ex></ph> administrator has set when this <ph name="DEVICE_TYPE">$2<ex>Chromebook</ex></ph> can be used.
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_MONDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME" desc="Time when the user will be able to use the device again.">
You'll be able to use this device again <ph name="DAY">$1<ex>tomorrow</ex></ph> at <ph name="TIME">$2<ex>8:00 AM</ex></ph>.
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_MONDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Monday
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TUESDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TUESDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Tuesday
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_WEDNESDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_WEDNESDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Wednesday
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_THURSDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_THURSDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Thursday
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_FRIDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_FRIDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Friday
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_SATURDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_SATURDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Saturday
</message>
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_SUNDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE.">
<message name="IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_SUNDAY" desc="Message part DAY for IDS_DEVICE_DISABLED_EXPLANATION_RESTRICTION_SCHEDULE_TIME.">
on Sunday
</message>

@ -1 +1 @@
ab5e84a5f90cf8674b8fe28d18a8855b4d2a9fec
ab5e84a5f90cf8674b8fe28d18a8855b4d2a9fec

@ -0,0 +1 @@
ab5e84a5f90cf8674b8fe28d18a8855b4d2a9fec