"Add members” displays new content not apparent to a screenreader

Problem:
New Content Not “Visible” to ScreenReaders
Selecting “Add members” reveals new content visually (circled above in red) but not to the screenreader. In other words, there is no announcement to the screenreader that new content has appeared.
Focus Placed After New Content
In addition, after selecting "Add Members" focus takes the user past the new content and fields associated with adding a new member. The first field a keyboard user would encounter (using the down arrow) is the “more actions” button or (if using the Tab key) the "Test group for accessibility" (circled above in green)”.
A keyboard user (including screenreader users) would be required to back tab back through a number of buttons and links such as "more," “Test group for accessibility,” " "import a list of members," etc. before finding the "member name or ID" field. Of course, a blind user would have discover this on their own. They would not know they have been placed past the fields associated with adding a new member. It might take quite a while of exploring the page before (and if) they find the necessary content.

Solution:
Use jQuery or JavaScript with ARIA to announce the new content to screenreaders and to move the focus to the "member name or id field".
Specific Coding
The "control-group" div (shown below) should include the aria attributes: aria-live="polite" aria-expanded="false".

Adding the following jQuery (or equivalent JavaScript) should place the attribute role="alert" and change the attribute "aria-expanded” to “true" (from “false) in the "control-group" div statement once the link "show-add-block" is selected (this is the ID of the “Add members” link). This will alert the screenreader that new content has appeared. The last statement below will place focus in the “Member name or ID” field. (Note: the current coding for this input field is quite complex with a number of hidden fields located at the same location. As with the other suggestions in this report, these solution should be tested with a screenreader once these changes are implemented).
$("a.show-add-block").click(function()

{ $("#control-group).attr("role", "alert"); $("#control-group").attr("aria-expanded","true"); document.getElementById("groupAddMemberComboId").focus(); }

);

You can read and see more examples on making collapsible and expandable content accessible at: https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element