Missing ARIA labels and inconsistent focus order in YARN ResourceManager UI

Direct Answer

Prioritize the following accessibility fixes in the order below:

• Explicit ARIA labels for interactive controls – add aria-label or aria-labelledby to the Kill Application button and the queue‑selection dropdown.
• Mark the primary content area as a landmark – wrap the job tables in a role=\"main\" region.
• Define a logical tab order – enforce tabindex=\"0\" on focusable elements in DOM order and remove accidental tabindex=\"-1\" that skip items.
• Live region for dynamic tables – add aria-live=\"polite\" to the containers that update when jobs start/finish.
• Keep changes minimal so existing themes or plugins that depend on the current markup are not broken.

Explanation of the Likely Cause

The ResourceManager UI is generated from legacy JSP/Servlet templates. Interactive elements are rendered without ARIA attributes, and several controls are injected after page load by JavaScript. This causes screen readers to miss labels and focus to jump unpredictably. The lack of a role=\"main\" landmark also makes it hard for assistive technologies to locate the primary content.

Confirmed Facts

• Kill Application button and queue dropdown lack aria-label or aria-labelledby.
• Job tables are not wrapped in a live region.
• Focus traversal follows the DOM order, but dynamic inserts break the logical sequence.
• Custom CSS/JS can override default tabindex values.

Implementation Steps for This Case

1. Audit the current markup – open the UI in a browser, use dev tools to locate the Kill button (id=\"killAppBtn\") and the queue dropdown (id=\"queueSelect\"). Verify they lack aria-label.
2. Add ARIA labels – in the JSP template or via a small JS shim that runs after DOM ready:

   document.getElementById('killAppBtn').setAttribute('aria-label', 'Kill application');
   const queueSelect = document.getElementById('queueSelect');
   queueSelect.setAttribute('aria-label', 'Select application queue');

3. Wrap the main content – place the job tables inside a <main role=\"main\"> element. If the UI already has a <div id=\"content\">, change it to <main id=\"content\" role=\"main\">.
4. Live region for tables – add aria-live=\"polite\" aria-relevant=\"additions\" to the container that receives new rows when jobs start or finish.
5. Fix focus order – ensure every focusable control has tabindex=\"0\" (or no tabindex attribute, letting the browser use DOM order). Remove any tabindex=\"-1\" that was added to hide elements from tabbing.
6. Test with screen readers – use NVDA (Windows), VoiceOver (macOS), or JAWS to tab through the page and confirm that the Kill button and queue dropdown are announced correctly, and that the job tables are read when updated.
7. Regression test custom themes – load the UI with any installed themes or plugins and verify that the new attributes do not interfere with existing JavaScript handlers.

Minimal Impact Strategy

Because the UI is heavily templated, the safest approach is to add the ARIA attributes via a small, non‑intrusive JavaScript file that runs after the page has rendered. This avoids touching the JSP files directly and keeps the modifications isolated from the core Hadoop code. The shim can be packaged as a separate resource that site administrators can enable or disable, ensuring that custom extensions that rely on the original DOM structure remain functional.

Follow‑Up Diagnostic Detail Needed

To tailor the changes precisely, please confirm which Hadoop distribution and version your cluster is running. Different releases may render slightly different markup, and the exact element IDs could vary.