DatepickerComponent.disablePageTabIndex() stamps tabindex="-1" and aria-hidden="true" onto every focusable element on the page when the calendar opens — including the datepicker's own calendar button, which the user has just clicked and which the browser has focused. Chrome rejects the attribute and logs:
Blocked aria-hidden on an element because its descendant retained focus. The focus must
not be hidden from assistive technology users. [...] Consider using the inert attribute
instead, which will also prevent focus.
Element with focus: <span.fa fa-calendar>
Ancestor with aria-hidden: <span role="button" tabindex="-1" class="fa fa-calendar"
aria-expanded="true" data-sam-tabindex="0" aria-hidden="true">
Reproduced in Chromium on the /datepicker gallery route (added in #666), immediately after a real click on the calendar icon:
{
"activeElement": "<span role=\"button\" tabindex=\"-1\" class=\"fa fa-calendar\" aria-expanded=\"true\" data-sam-tabindex=\"0\" aria-hidden=\"true\">",
"iconAria": "true",
"iconTabindex": "-1"
}
Cause
The selector matches the component's own subtree:
_focusableString: string =
'a[href], area, button, select, textarea, *[tabindex], input:not([type="hidden"])';
picker.template.html gives the calendar button tabindex="0", so *[tabindex] selects it. disablePageTabIndex() then walks document.querySelectorAll(this._focusableString) with no exclusion for this component, hiding the trigger the user is standing on. The masked input inside sam-input-mask is hidden for the same reason.
Second defect in the same pair of methods
enablePageTabIndex() does not restore the prior aria-hidden state — it unconditionally sets aria-hidden="false":
el.removeAttribute("data-sam-tabindex");
el.setAttribute("aria-hidden", "false"); // should be removeAttribute
tabindex is correctly restored (data-sam-noinitial-tabindex tracks elements that had none and removes the attribute), but aria-hidden has no equivalent bookkeeping. So every focusable element on the page is left permanently carrying aria-hidden="false" after the first open/close cycle — DOM pollution that also destroys any aria-hidden an element legitimately had before the calendar opened.
Note test-app/e2e/datepicker.spec.ts currently asserts aria-hidden="false" as the restored state, with a comment explaining the tabindex asymmetry. Fixing this requires updating those assertions to expect the attribute to be absent.
Suggested direction
- Exclude the component's own subtree when disabling — e.g. skip any element where
this.wrapper/host .contains(el), or narrow _focusableString and handle the trigger separately.
- Record prior
aria-hidden alongside data-sam-tabindex (mirroring data-sam-noinitial-tabindex) and remove vs. restore accordingly.
- Chrome's own suggestion — the
inert attribute on a wrapper — would replace both loops with one attribute and is worth evaluating, though it changes the DOM contract these two methods expose.
Scope note
These methods are public on DatepickerComponent and are the general page-locking mechanism for this component, so the fix is not datepicker-cosmetic — it affects the a11y of any page that opens the calendar. Independent of #681 (missing CSS): this reproduces regardless of stylesheets.
Acceptance criteria
Context
Surfaced while manually testing #666 on the new /datepicker route. Pre-existing and unrelated to that PR's two-line fix (git diff on picker.component.ts touches only the @ViewChild decorator and the contains() comparison); kept separate to kept #666 scoped.
DatepickerComponent.disablePageTabIndex()stampstabindex="-1"andaria-hidden="true"onto every focusable element on the page when the calendar opens — including the datepicker's own calendar button, which the user has just clicked and which the browser has focused. Chrome rejects the attribute and logs:Reproduced in Chromium on the
/datepickergallery route (added in #666), immediately after a real click on the calendar icon:{ "activeElement": "<span role=\"button\" tabindex=\"-1\" class=\"fa fa-calendar\" aria-expanded=\"true\" data-sam-tabindex=\"0\" aria-hidden=\"true\">", "iconAria": "true", "iconTabindex": "-1" }Cause
The selector matches the component's own subtree:
picker.template.htmlgives the calendar buttontabindex="0", so*[tabindex]selects it.disablePageTabIndex()then walksdocument.querySelectorAll(this._focusableString)with no exclusion forthiscomponent, hiding the trigger the user is standing on. The masked input insidesam-input-maskis hidden for the same reason.Second defect in the same pair of methods
enablePageTabIndex()does not restore the prioraria-hiddenstate — it unconditionally setsaria-hidden="false":tabindexis correctly restored (data-sam-noinitial-tabindextracks elements that had none and removes the attribute), butaria-hiddenhas no equivalent bookkeeping. So every focusable element on the page is left permanently carryingaria-hidden="false"after the first open/close cycle — DOM pollution that also destroys anyaria-hiddenan element legitimately had before the calendar opened.Note
test-app/e2e/datepicker.spec.tscurrently assertsaria-hidden="false"as the restored state, with a comment explaining thetabindexasymmetry. Fixing this requires updating those assertions to expect the attribute to be absent.Suggested direction
this.wrapper/host.contains(el), or narrow_focusableStringand handle the trigger separately.aria-hiddenalongsidedata-sam-tabindex(mirroringdata-sam-noinitial-tabindex) and remove vs. restore accordingly.inertattribute on a wrapper — would replace both loops with one attribute and is worth evaluating, though it changes the DOM contract these two methods expose.Scope note
These methods are
publiconDatepickerComponentand are the general page-locking mechanism for this component, so the fix is not datepicker-cosmetic — it affects the a11y of any page that opens the calendar. Independent of #681 (missing CSS): this reproduces regardless of stylesheets.Acceptance criteria
aria-hidden="true"on the calendar button or any other element inside the datepickerBlocked aria-hidden on an element because its descendant retained focuswarning in the browser console on openaria-hiddenfrom elements that did not have it beforehand, rather than setting"false"aria-hidden="true"before the calendar opened still has it afterwardstest-app/e2e/datepicker.spec.ts's restore assertions are updated accordingly (they currently expectaria-hidden="false")aria-hiddenviolation — this is a real-focus/real-browser behaviour jsdom cannot reproduce, per AGENTS.md's Vitest/Playwright boundaryContext
Surfaced while manually testing #666 on the new
/datepickerroute. Pre-existing and unrelated to that PR's two-line fix (git diffonpicker.component.tstouches only the@ViewChilddecorator and thecontains()comparison); kept separate to kept #666 scoped.