[PM-8214] adding tabIndex for screen reader

[Jingo88]

🎟️ Tracking

Bug tickets
PM-16506 - remind me later btn
PM-16527 - second page title

Parent Ticket
PM-8214

📔 Objective

Adding liveAnnouncer to components so titles are announced when the component loads
Adding tabIndex so screen reader can focus the Remind Me Later link

📸 Screen Recording

Screen.Recording.2024-12-30.at.7.17.07.PM.mov

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[github-actions]

Checkmarx One – Scan Summary & Details – 1fcb49f6-9c0a-4c03-9016-618b6754b9b1

New Issues

Severity	Issue	Source File / Package	Checkmarx Insight
	Client_DOM_Open_Redirect	/apps/browser/src/billing/popup/settings/premium.component.ts: 29	Attack Vector

Fixed Issues

Severity	Issue	Source File / Package
	Client_Privacy_Violation	/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html: 15

[codecov]

Codecov Report

Attention: Patch coverage is 85.71429% with 2 lines in your changes missing coverage. Please review.

Project coverage is 33.78%. Comparing base (7deba63) to head (36efc31).
Report is 15 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...w-device-verification-notice-page-one.component.ts	85.71%	0 Missing and 1 partial ⚠️
...w-device-verification-notice-page-two.component.ts	85.71%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #12602   +/-   ##
=======================================
  Coverage   33.78%   33.78%           
=======================================
  Files        2912     2911    -1     
  Lines       90747    90728   -19     
  Branches    17165    17159    -6     
=======================================
- Hits        30655    30654    -1     
+ Misses      57703    57681   -22     
- Partials     2389     2393    +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[shane-melton]

🎨 This wasn't selectable because it was missing an href. Instead of tabindex we can rely on the native solution by setting href to something like href="#" so its a valid anchor tag.

We can also add an appStopClick directive to avoid potentially appending the # to the url.

[shane-melton]

❓ I'm not sure why we want this to be keyboard focusable? Its not something the user can interact with, and screen readers can still interact with it without the tabindex.

[Jingo88]

ah how did this sneak back in. thanks! removed