In browse mode nvda is reading whole information present in the section - accessibility

Question

.ProfileSubHeadTitleLinkStyle-181 {
display: flex;
margin-top: 36px;
margin-right: 20px;
margin-bottom: 24px;
justify-content: space-between;
}
.ProfileSubHeadTitleStyle-182 {
font-size: 18px;
font-weight: 600;
margin: 0px 20px 0px 0px;
padding: 0px;
}
.ProfileEditLinkStyle-283 {
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: inherit;
font-weight: inherit;
color: rgb(92, 27, 134);
outline: none;
text-decoration: none;
background: none transparent;
border-top: none;
border-right: none;
border-left: none;
border-image: initial;
cursor: pointer;
display: flex;
margin: 0px 10px;
overflow: inherit;
padding: 0px;
text-align: left;
text-overflow: inherit;
border-bottom: 1px solid transparent;
align-items: center;
user-select: text;
}
.profileNameColStyle-282 {
margin: 20px 0px;
display: flex;
flex-flow: row wrap;
}
.flex1-185 {
margin-right: 30px;
margin-bottom: 15px;
}
<div id="profileNameWrapper">
<div>
<div class="ProfileSubHeadTitleLinkStyle-181">
<h3 class="ProfileSubHeadTitleStyle-182">Name</h3>
<button type="button" data-testid="edit-link-test-id" class="ms-Link ProfileEditLinkStyle-283">
<i data-icon-name="Edit" aria-hidden="true" class="root-286"></i>
Edit
</button>
</div>
<div>
<div class="profileNameColStyle-282" aria-hidden="true">
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">First name</div>
<div class="ProfileContentStyle-179">Sarfraj</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184" data-testid="middle-name-test-id">Middle name</div>
<div class="ProfileContentStyle-179">L</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">Last name</div>
<div class="ProfileContentStyle-179">P</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">Preferred first name</div>
<div class="ProfileContentStyle-179">P</div>
</div>
</div>
</div>
</div>
</div>
In browse mode, nvda and jaws should read each section after reading the name and edit button, but it's reading the whole container after the edit button. It should read each section one by one.
What would be the way to do that? Also, any documentation on why in browse mode, the focus goes to some items and sometimes it goes directly to their child elements?

Answer 1

You didn't mention how you're navigating but I will assume you're using the up/down arrow keys to walk the DOM.
And what do you mean by "section"? You don't have a literal <section> element and you don't have anything with role="region" (which is the default role for a <section> if that section has an aria-label, which yours doesn't).
I did notice that you have aria-hidden="true" on your <div> for the lower "section" and that will completely hide all child elements in that <div>.
<div class="profileNameColStyle-282" aria-hidden="true">